Convert PDF to PNG inside browser

Question

I'm using Vue.js and trying to convert PDF to PNG (or another image format) inside browser. Right now I'm able to read PDF from URL with PDF.js and Vue.js component pdfvuer like this:

var self = this;
self.pdfdata = pdfvuer.createLoadingTask(
  "https://any-pdf-link"
);
self.pdfdata.then(pdf => {
  console.log(pdf.numPages)
})

What should I do next to convert it to image?

Answer 1

Pdfvuer author here.

Pdfvuer/PDF.js renders PDFs as canvas elements. You can use the following code to generate a thumbnail from the first page.

let s = document.querySelectorAll('canvas')[0]
let imageDataUrl = s.toDataURL('img/png')

This will give you a base64 representation of the page.