CODEWITHSUNDEEP
javascripthtml
TheProgrammedDev
TheProgrammedDev

Reputation: 35

Javascript file upload - PDF to image(s)

So I have some code where you upload a PDF and it displays it using the browser's built-in PDF reader.

I was wondering if there was any way to take an uploaded PDF and convert it to an image or images.

Upvotes: 3

Views: 2816

Answers (2)

meir
meir

Reputation: 96

Here is a recent example how to use with pdf.js

I used it for my project, you can see it in action https://pdf-merge.netlify.app/

npm i pdfjs-dist

import * as pdfjsLib from 'pdfjs-dist';
import * as pdfjsWorker from "pdfjs-dist/build/pdf.worker.mjs";

export default async function pdfToImg(pdfFile) {
  const reader = new FileReader();
  reader.readAsArrayBuffer(pdfFile);
  const data = await new Promise((resolve) => {
    reader.onload = () => {
      resolve(reader.result);
    };
  });
  const pdfData = new Uint8Array(data);

  //set Worker
  pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker;

  const pdf = await pdfjsLib.getDocument(pdfData).promise;
  const page = await pdf.getPage(1);
  const viewport = page.getViewport({ scale: 0.5 });
  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d');
  canvas.height = viewport.height;
  canvas.width = viewport.width;
  const renderContext = {
    canvasContext: context,
    viewport: viewport
  };
  await page.render(renderContext).promise;
  return canvas.toDataURL();
}

Upvotes: 0

sathish kumar
sathish kumar

Reputation: 1507

Try PDF.js will let you render the PDF to a canvas. PDF.js GitHub

var img = new Image();
img.src = pdfCanvas.toDataURL();

Upvotes: 1

Related Questions