DEV Community: Jalal khan

Compress Images in the Browser with Canvas API — No Uploads, No Server

Jalal khan — Thu, 03 Sep 2026 19:55:40 +0000

Most online image compressors upload your file to a server. This one runs entirely in the browser using the native Canvas API — no uploads, no watermark, no signup. You can try it live here: https://yourutilityhub.com/image/image-compressor

Why compress images in the browser?

No uploads — your photos never leave your device
No watermark or signup
Instant — no server round-trip
Works with PNG, JPG, and WEBP

The core idea

Draw the image onto an invisible <canvas>, then export it with a lower quality setting using canvas.toBlob(). The browser does the heavy lifting — no libraries needed.

1. Read the file into an object URL

const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
  const selectedFile = e.target.files?.[0];
  if (selectedFile && selectedFile.type.startsWith("image/")) {
    setFile(selectedFile);
    setOriginalSize(selectedFile.size);
    setOriginalUrl(URL.createObjectURL(selectedFile));
  }
};

URL.createObjectURL() gives us a local blob URL — the file never leaves the browser.

2. Load the image and draw it on a canvas

const img = new Image();
img.onload = () => {
  const canvas = document.createElement("canvas");
  canvas.width = img.width;
  canvas.height = img.height;
  const ctx = canvas.getContext("2d");
  if (ctx) {
    ctx.drawImage(img, 0, 0);

    canvas.toBlob(
      (blob) => {
        if (blob) {
          setCompressedUrl(URL.createObjectURL(blob));
          setCompressedSize(blob.size);
        }
      },
      file.type,       // keep original format (jpg, png, webp)
      quality[0] / 100 // 0.0 – 1.0
    );
  }
};
img.src = originalUrl;

Split PDF Pages in the Browser with pdf-lib — No Uploads, No Server

Jalal khan — Tue, 01 Sep 2026 20:52:27 +0000

A few weeks ago I built a free online Merge PDF tool that runs 100% in the browser. Today I'm sharing its sibling: a Split PDF tool using the same library — pdf-lib — with zero file uploads, zero watermark, and zero server code.

You can try it live here: https://yourutilityhub.com/pdf/split-pdf

Why split PDFs in the browser?

Most online PDF tools upload your file to a server — which means your document is never truly private. Splitting pages locally means:

No uploads — nothing leaves your device
No watermark or signup
Free — no per-page charges
Works offline, fast, for files of any size (limited by your browser's memory)

The plan

We'll load the PDF, pick a page range (or specific pages), copy those pages into a fresh PDFDocument, and save the result — all with pdf-lib. Let's walk through the full working component.

1. Install and import

npm install pdf-lib

import { PDFDocument } from "pdf-lib";

2. Load the uploaded file

const arrayBuffer = await file.arrayBuffer();
const pdf = await PDFDocument.load(arrayBuffer);
const totalPages = pdf.getPageCount();

PDFDocument.load() accepts an ArrayBuffer. We read it straight from the File object — no server involved.

3. Split by page range (e.g. `1-5` or `3-`)

const parts = pageRange.split("-");
const startRaw = parseInt(parts[0].trim(), 10);
const endRaw = parts[1].trim() === "" ? totalPages : parseInt(parts[1].trim(), 10);

// validate 1..totalPages
const startPage = Math.min(startRaw, endRaw) - 1;  // 0-based
const endPage = Math.max(startRaw, endRaw) - 1;

const newPdf = await PDFDocument.create();
const pageIndices = [];
for (let i = startPage; i <= endPage; i++) {
  pageIndices.push(i);
}
const copiedPages = await newPdf.copyPages(pdf, pageIndices);
copiedPages.forEach(page => newPdf.addPage(page));

The trick: copyPages() wants 0-based indices, but users type 1-based page numbers, so we subtract 1. "3-" with an empty end means "to the last page."

4. Or extract specific pages (e.g. `1,3,5`)

const pages = extractPages
  .split(",")
  .map(s => parseInt(s.trim()))
  .filter(n => !isNaN(n) && n > 0 && n <= totalPages);

const newPdf = await PDFDocument.create();
const copiedPages = await newPdf.copyPages(pdf, pages.map(p => p - 1));
copiedPages.forEach(page => newPdf.addPage(page));

We parse comma-separated numbers, filter out anything out of range, then map to 0-based before copying.

5. Save, download, and clean up

const pdfBytes = await newPdf.save();
const blob = new Blob([pdfBytes], { type: "application/pdf" });
const url = URL.createObjectURL(blob);

const link = document.createElement("a");
link.href = url;
link.download = "split_" + file.name;
link.click();

Blob + URL.createObjectURL() lets the user download the split file without the bytes ever touching a server.

Full component

The complete, production-ready React component (mode toggle, validation, error handling, and download) is live here: https://yourutilityhub.com/pdf/split-pdf

The full source is also on GitHub: https://github.com/Jalal-khn/utilityhub-

Caveats worth knowing

copyPages reuses the existing page content — it does not re-parse fonts/images per page, so quality is preserved.
Very large PDFs are limited by browser memory. For giant files, consider a server-side approach instead.
The extracted pages keep their original dimensions and orientation.

Why combine this with Merge PDF?

Many users need both halves of the same workflow — split a big PDF apart, then merge specific pages back into one. Pairing them means users never have to send their documents to a third-party server for either task.

Try it free: https://yourutilityhub.com/pdf/split-pdf

Merge PDFs in the browser with JavaScript (no uploads, no server)

Jalal khan — Mon, 31 Aug 2026 21:16:19 +0000

In this post I'll show how to merge PDF files entirely in the browser using PDF.js and pdf-lib — no server, no file upload, no backend. Everything runs on the user's machine, which is great for privacy and for keeping hosting costs at zero (it's just a static site).

Why process PDFs on the client?

Most "free" PDF websites quietly upload your documents to their server, which:

Exposes private/sensitive files to third parties
Imposes size limits
Often slaps a watermark on the output
Requires you to trust their storage

If you handle PDFs with client-side JavaScript (WebAssembly / WASM + PDF.js), none of that happens. The user's file never leaves their device, and you don't need a backend at all — so it's cheap and private.

Caveats

pdf-lib works well with standard PDFs; heavily encrypted or unusual documents may need extra handling.
Very large PDFs are memory-hungry since everything is client-side, but for typical documents it's fast and free.
Some complex PDFs with unusual fonts can lose fidelity — test on your own files first.

Try it

I packaged this approach (plus split, compress, rotate, unlock, image-to-PDF) into a free no-upload tool: https://yourutilityhub.com/pdf/merge-pdf

The whole project is open source: https://github.com/Jalal-khn/utilityhub-

If you have questions about the architecture or want a deeper dive on any part, ask away.

The basic idea

Read the input file with FileReader
Parse it with pdf-lib (a pure-JS PDF library)
Copy the source pages into a new document
Save the merged PDF and trigger a download

Here's the core function:


js
import { PDFDocument } from "pdf-lib";

async function mergePdfs(files) {
  const merged = await PDFDocument.create();
  for (const file of files) {
    const bytes = await file.arrayBuffer();
    const src = await PDFDocument.load(bytes, { ignoreEncryption: true });
    const pages = await merged.copyPages(src, src.getPageIndices());
    pages.forEach((page) => merged.addPage(page));
  }
  const out = await merged.save();
  return new Blob([out], { type: "application/pdf" });
}