React-pdf: How to get canvas image after importing PDF?

[ho-wan]

I am trying to load a PDF file as an image into a SVG within D3.js, and using React. I have managed to use react-pdf to load the pdf file as a dom element. Through the network tab, I see that 'pdf.worker.js' has generated a blob as a jpeg image at a URL (possibly using createObjectURL). I want to access this jpeg image, but I don't know how to, and I haven't found an answer.

https://imgur.com/PuSSJqC
Can anyone help me please?

I tried getting accessing the canvas element directly from the DOM and using importPDFCanvas.toDataURL(), but this image is blank. The DOM structure looks like this:
https://imgur.com/2y2cspc

onDocumentLoadSuccess = () => {
  const importPDFCanvas: HTMLCanvasElement = document.querySelector('.import-pdf-page canvas');
  const pdfAsImageSrc = importPDFCanvas.toDataURL();
};

<Document file={importPDF.pdfSrc}>
  <Page 
    className="import-pdf-page"
    onLoadSuccess={this.onDocumentLoadSuccess}
    pageNumber={1}
  />
</Document>;

I expect there to be a way to access this image or the URL through the pdf.js api, but have no idea how to get it. Is there a way to do this using this library, or should I go with the native pdf.js or try this other library instead? https://www.npmjs.com/package/react-pdf-js

Environment

• Browser: Chrome 76
• React-PDF version: 4.1.0
• React version: 16.8.6
• Webpack version: 4.29.6

[ho-wan]

Turns out I just needed to use onRenderSuccess instead of onLoadSuccess, as the canvas image was not rendered at that time. Obvious solution!