DEV Community

Muhammad Omer Mirza
Muhammad Omer Mirza

Posted on

How to convert a PDF to images entirely in the browser (no upload)

#javascript #webdev #privacy #pdf

Most "PDF to image" websites work like this: you upload your file, their server renders it, and you download the result — trusting that they delete your document afterwards. For a contract, an ID scan, or a medical form, that's a lot of trust to hand over for a one-line conversion.

The good news: you don't need a server at all. Modern browsers can render PDF pages to a <canvas> and export them as PNG or JPG entirely on the client. Here's how to do it properly — including the part everyone gets wrong: resolution.

The tool: pdf.js

pdf.js (by Mozilla) is the engine behind Firefox's built-in PDF viewer. It parses a PDF and lets you render any page onto a canvas. That canvas is then a normal image you can export.

Load it from a CDN:

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
Enter fullscreen mode Exit fullscreen mode

Gotcha #1: configure the worker at parse time

pdf.js does its heavy parsing in a Web Worker. If you don't point it at the worker script, you'll get a console warning and degraded performance. Set this before you load any document, and do not defer the pdf.js script (its global needs to exist when this runs):

pdfjsLib.GlobalWorkerOptions.workerSrc =
  "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js";
Enter fullscreen mode Exit fullscreen mode

Reading the file without uploading it

Use a file input and read the bytes locally with the FileReader/arrayBuffer API. Nothing leaves the page:

const input = document.querySelector("#file");
input.addEventListener("change", async () => {
  const file = input.files[0];
  const bytes = new Uint8Array(await file.arrayBuffer());
  await renderToImages(bytes);
});
Enter fullscreen mode Exit fullscreen mode

Rendering each page — and the DPI that matters

This is the key part. A PDF is defined in points (1 pt = 1/72 inch). If you render at the default scale, you get a blurry ~72 DPI image. To get a crisp result you scale the viewport. The relationship is:

scale = targetDPI / 72
Enter fullscreen mode Exit fullscreen mode

So 150 DPI → scale ≈ 2.08, and 300 DPI (print quality) → scale ≈ 4.17.

async function renderToImages(bytes, { dpi = 150, type = "image/jpeg" } = {}) {
  const scale = dpi / 72;
  const pdf = await pdfjsLib.getDocument({ data: bytes }).promise;
  const blobs = [];

  for (let n = 1; n <= pdf.numPages; n++) {
    const page = await pdf.getPage(n);
    const viewport = page.getViewport({ scale });

    const canvas = document.createElement("canvas");
    canvas.width = Math.floor(viewport.width);
    canvas.height = Math.floor(viewport.height);
    const ctx = canvas.getContext("2d");

    // JPG has no alpha — paint a white background first, or transparency turns black.
    if (type === "image/jpeg") {
      ctx.fillStyle = "#fff";
      ctx.fillRect(0, 0, canvas.width, canvas.height);
    }
    ctx.imageSmoothingEnabled = true;
    ctx.imageSmoothingQuality = "high";

    await page.render({ canvasContext: ctx, viewport }).promise;

    const blob = await new Promise((r) => canvas.toBlob(r, type, 0.96));
    blobs.push(blob);
  }
  return blobs;
}
Enter fullscreen mode Exit fullscreen mode

Gotcha #2: JPG and transparency

Canvas is transparent by default. Export to JPG (which has no alpha channel) and every transparent pixel becomes black. Always paint a white rectangle first when exporting JPG — note the ctx.fillRect above. PNG keeps transparency, so you can skip it there.

Downloading the result

Turn each blob into an object URL and trigger a download:

function download(blob, name) {
  const url = URL.createObjectURL(blob);
  const a = document.createElement("a");
  a.href = url;
  a.download = name;
  a.click();
  URL.revokeObjectURL(url);
}
Enter fullscreen mode Exit fullscreen mode

Want a single file? Zip them client-side with JSZip — also no server needed.

When to use which DPI

DPI scale Use for
96 1.33 quick web previews, smallest files
150 2.08 screens, email, slides (sweet spot)
300 4.17 printing

Higher DPI = sharper but heavier. For a 20-page document at 300 DPI you're allocating a lot of canvas memory, so render page-by-page (as above) rather than all at once.

Why bother doing it client-side?

  • Privacy: the file never touches a server.
  • Speed: no upload/queue/download round trip.
  • Cost: it's static hosting — $0 backend.

The trade-off is memory: very large/high-DPI PDFs lean on the user's device. For everyday documents it's a non-issue.

I put this exact approach into a free tool — PDFNest's PDF to Image converter — with a format picker and a 96/150/300 DPI selector, all running in the browser with no upload. The rest of the free PDF toolkit is here if it's useful. Happy to answer questions about the pdf.js bits in the comments.

Top comments (0)