DEV Community: Muhammad Omer Mirza

Run OCR 100% in the browser: images & scanned PDFs to text, no server

Muhammad Omer Mirza — Sat, 20 Jun 2026 14:26:57 +0000

OCR usually means uploading your document to someone's server. For a receipt or a contract, that's a privacy cost for a one-line task. But you don't need a server — a full OCR engine runs in the browser via WebAssembly. Here's how to turn images and scanned PDFs into editable text fully client-side.

The pieces

Tesseract.js — the Tesseract OCR engine compiled to WASM. Recognises text in an image.
pdf.js — to render scanned PDF pages to a canvas first (a scanned PDF is just images, so we OCR each page).

<script src="https://cdn.jsdelivr.net/npm/tesseract.js@5/dist/tesseract.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>

OCR an image

The modern API is a worker you create once, reuse, then terminate:

async function imageToText(file, lang = "eng") {
  const worker = await Tesseract.createWorker(lang); // downloads core + lang data on first run
  const { data: { text } } = await worker.recognize(file); // accepts File/Blob/canvas/<img>
  await worker.terminate();
  return text;
}

That's it for images. recognize() takes a File directly, so a file input is enough — nothing leaves the page.

OCR a scanned PDF

A scanned PDF has no text layer, only page images. So render each page to a canvas (at a generous scale for accuracy) and OCR the canvas:

async function scannedPdfToText(bytes, lang = "eng") {
  pdfjsLib.GlobalWorkerOptions.workerSrc =
    "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js";

  const pdf = await pdfjsLib.getDocument({ data: bytes }).promise;
  const worker = await Tesseract.createWorker(lang);
  let out = "";

  for (let n = 1; n <= pdf.numPages; n++) {
    const page = await pdf.getPage(n);
    const viewport = page.getViewport({ scale: 2.5 }); // ~180 DPI — good OCR accuracy
    const canvas = document.createElement("canvas");
    canvas.width = Math.floor(viewport.width);
    canvas.height = Math.floor(viewport.height);
    const ctx = canvas.getContext("2d");
    ctx.fillStyle = "#fff";
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    await page.render({ canvasContext: ctx, viewport }).promise;
    const { data: { text } } = await worker.recognize(canvas);
    out += text + "\n\n";
  }
  await worker.terminate();
  return out;
}

Gotchas worth knowing

First run is heavy. Tesseract.js downloads its WASM core (~2–4 MB) and the language traineddata (a few MB) on first use, then caches them. Show a "Loading OCR engine…" state so the wait isn't mysterious.
Scale matters for PDFs. Rendering pages at scale: 1 gives ~72 DPI and poor accuracy. Use ~2.5 (≈180 DPI). Higher is sharper but uses more memory.
Match the language. createWorker('eng') vs 'spa' etc. — the right language massively improves accuracy on accented text. You can combine: 'eng+spa'.
Reuse the worker. Creating a worker per page re-loads everything each time. Make one, loop, then terminate().
Set a white background before drawImage on the canvas — transparent PDF regions otherwise OCR as noise.
OCR isn't magic. Clean, straight, high-contrast scans read well; blurry phone photos and handwriting don't. Set that expectation in the UI.

Why client-side

Privacy: the document never leaves the device — ideal for IDs, contracts, statements.
$0 backend: it's static hosting; OCR runs on the user's CPU.
Offline-friendly: once the WASM + lang data are cached, it works without a connection.

The trade-off is the first-load download and that recognition uses the user's CPU — fine for everyday documents.

I built this into a free tool — PDFNest's Image to Text (OCR) does exactly this (images + scanned PDFs, multiple languages, copy/download), all in the browser. There's also a companion guide on extracting text from PDFs. Happy to talk through the Tesseract/pdf.js details in the comments.

PNG to PDF without losing transparency: what most converters get wrong

Muhammad Omer Mirza — Sat, 20 Jun 2026 14:16:02 +0000

You export a logo as a transparent PNG, drop it into a "PNG to PDF" converter, and the result has an ugly black box around it — or the transparency silently becomes white and ruins a design meant to overlay something. This is the single most common bug in PNG→PDF conversion, and it comes from one fact people forget:

A PDF page is not transparent. When you print or flatten it, "transparent" has to become some colour.

So the real question isn't "does it keep transparency?" — it's "what should the transparent pixels become, and who decides?" Good converters make that a choice. Let's build one client-side.

The library: pdf-lib

pdf-lib creates and edits PDFs in pure JavaScript — in the browser, no server. It can embed PNGs with their alpha channel:

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf-lib/1.17.1/pdf-lib.min.js"></script>

const doc = await PDFLib.PDFDocument.create();
const png = await doc.embedPng(pngBytes); // alpha preserved
const page = doc.addPage([png.width, png.height]);
page.drawImage(png, { x: 0, y: 0, width: png.width, height: png.height });
const pdfBytes = await doc.save();

That "alpha preserved" is the trap. If you embed a transparent PNG directly, the transparent areas show whatever ends up behind them — which, on a white-printed page, is fine; on a coloured workflow, is not; and in some viewers, renders as black. You want to decide on purpose.

The fix: offer three modes

Give the user (or yourself) three options:

Flatten onto white — the safe default for anything you'll view or print.
Flatten onto black — for light artwork meant for dark backgrounds.
Keep transparency — for PDFs that will be layered over another design.

"Flatten" just means: paint a background colour, draw the PNG on top, re-encode. A <canvas> does this in a few lines:

// Returns PNG bytes, flattened onto `bg` ('white' | 'black' | 'keep')
async function preparePng(file, bg) {
  if (bg === "keep") {
    return new Uint8Array(await file.arrayBuffer()); // embed alpha as-is
  }
  const img = await loadImage(file);              // see helper below
  const canvas = document.createElement("canvas");
  canvas.width = img.naturalWidth;
  canvas.height = img.naturalHeight;
  const ctx = canvas.getContext("2d");

  ctx.fillStyle = bg === "black" ? "#000" : "#fff";
  ctx.fillRect(0, 0, canvas.width, canvas.height); // background first
  ctx.drawImage(img, 0, 0);                         // PNG on top

  const blob = await new Promise((r) => canvas.toBlob(r, "image/png"));
  return new Uint8Array(await blob.arrayBuffer());
}

function loadImage(file) {
  return new Promise((resolve, reject) => {
    const url = URL.createObjectURL(file);
    const img = new Image();
    img.onload = () => { URL.revokeObjectURL(url); resolve(img); };
    img.onerror = () => { URL.revokeObjectURL(url); reject(new Error("bad png")); };
    img.src = url;
  });
}

Order matters: fill the background, then draw the image. Do it the other way and you paint over your own picture.

Putting it together (multiple PNGs → one PDF)

async function pngsToPdf(files, { bg = "white" } = {}) {
  const doc = await PDFLib.PDFDocument.create();
  for (const file of files) {
    const bytes = await preparePng(file, bg);
    const png = await doc.embedPng(bytes);
    const page = doc.addPage([png.width, png.height]); // fit page to image
    page.drawImage(png, { x: 0, y: 0, width: png.width, height: png.height });
  }
  return doc.save(); // Uint8Array — download or zip it, still no server
}

Why not just convert PNG→JPG first?

Because PNG is lossless and often holds screenshots, diagrams, and text — exactly the content JPG compression smears. Embed the PNG and you keep crisp edges at full quality. Flattening onto a solid colour doesn't recompress the visible pixels; it only resolves the alpha.

Quick reference

Mode	Transparent pixels become	Use when
White	white	normal viewing/printing (default)
Black	black	light logos on dark layouts
Keep	whatever's behind in the viewer	PDF will overlay another design

The whole thing runs in the browser, so nothing uploads and there's no backend to pay for.

I shipped this as a free tool — PDFNest's PNG to PDF converter has exactly this white/black/keep transparency control, runs client-side, and adds no watermark. There's a sibling Image to PDF tool for mixed JPG/PNG/WebP. Questions about the pdf-lib/canvas details — drop them below.

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

Muhammad Omer Mirza — Sat, 20 Jun 2026 14:15:56 +0000

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

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.