如何在REACT中使用openlayers将pdf呈现到画布

Question

我在服务器上保存了一个pdf文件，正在检索该文件，并使用pdfjs进行读取并在openlayers中显示。

但是我有点卡住了，因为我似乎无法使图像显示在开放层中。我正在用React写这个。

class PdfViewer extends React.Component {
    constructor(props) {
        super(props);
        this.canvas = React.createRef();
    }
    componentDidMount()  {
        const canvas = this.canvas;
        debugger;

       function renderCanvas(page) {

            // Set scale (zoom) level
            var scale = 8;
            // Get viewport (dimensions)
            var viewport = page.getViewport(scale);
            // Fetch canvas' 2d context
            var context = canvas.current.getContext('2d');
            // Set dimensions to Canvas
            canvas.current.height = viewport.height;
           canvas.current.width = viewport.width;
            // Render page
            page.render({
                canvasContext: context,
                viewport: viewport
            }).then(initMap)
        };

        function initMap () {
            var width = canvas.width;
            var height = canvas.height;
            var mapExtent = [0, 0, width, height];

            var projection = new olProj.Projection({
                code: '',
                units: 'pixels',
                extent: mapExtent
            });

            var baseLayer = new Image({
                source: new ImageStatic({
                    imageLoadFunction : function(image){
                        image.getImage().src = canvas.current.toDataURL();
                    },
                    projection: projection,
                    imageExtent: mapExtent
                })
            });
            var view = new View({
                center: olExtent.getCenter(mapExtent),
                projection: projection,
                zoom: 1
            });
            var map = new Map({
                target: 'map',
                interactions: olInteraction.defaults(),
                layers: [
                    baseLayer,
                ],
                view: view
            });
            map.getView().fit(mapExtent, map.getSize());
        };

        function loadPDF(url) {
            pdfjs.getDocument(url)
                .then(function(pdfData) {
                    console.log("PDF downloaded", pdfData);
                    return pdfData.getPage(1);
                }).then(function(page) {
                renderCanvas(page)
            });
        }

        loadPDF('/sample.pdf')
    };
        render() {
            return(
                <div>
                    <Canvas ref={this.canvas}/>
                    <MapContainer id="map"> </MapContainer>
                </div>
            )
        }
}
const Canvas = styled.canvas`
    border:1px solid black;
    display: none;
`;
const MapContainer = styled.div`
    width:100%;
    height: 100%;
`;

所以我的计划是将PDF渲染到画布上（然后隐藏画布），然后在ImageStatic上使用openlayers的imageLoadFunction（），将静态图像src设置为canvas.toDataURL();的值pdf作为openlayers中的图像。但是，这没有发生。永远不会调用imageLoadFunction（），因此永远不会设置src值。我不知道为什么不叫它。