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>

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";

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);
});

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

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;
}

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);
}

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

When to use which DPI

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.