DEV Community: toolzip

Perspective Correction in the Browser: Implementing Homography Transforms with Canvas API

toolzip — Thu, 22 Oct 2026 12:07:33 +0000

Document scanner apps that automatically straighten photos are doing something mathematically interesting: they're computing a homography transform to map an arbitrarily-angled quadrilateral back to a rectangle.

This post covers the math and implementation we used for ToolZip's perspective correction tool.

What Is a Homography?

A homography is a 3×3 matrix that maps points in one projective plane to another. For perspective correction, we want to map four corner points of a document (which appear as a trapezoid in the photo) to four corners of a rectangle.

┌─────────────────────┐       ┌────────────────────┐
│                     │       │                    │
│    Perspective      │  H    │    Corrected       │
│    distortion  ─────┼──────►│    rectangle       │
│   (trapezoid)       │       │                    │
│                     │       │                    │
└─────────────────────┘       └────────────────────┘

The transform is "projective" (preserves lines but not angles or distances), which is exactly what we need — a tilted rectangle projects to a trapezoid, and we want to reverse that.

The Math: Solving for the Homography Matrix

Given four source points (corners of the document in the photo) and four destination points (corners of the output rectangle), we need to find the 3×3 matrix H such that:

[x']     [h00 h01 h02]   [x]
[y']  =  [h10 h11 h12] × [y]
[w']     [h20 h21 h22]   [1]

With output coordinates: x_out = x'/w', y_out = y'/w'

This gives us 8 unknowns (h22 = 1 by convention). Each point correspondence gives 2 equations, so 4 points = 8 equations = exactly solvable.

Setting up the linear system (DLT algorithm):

function computeHomography(srcPoints, dstPoints) {
  // Build 8x8 matrix A and vector b for Ax = b
  const A = [];
  const b = [];

  for (let i = 0; i < 4; i++) {
    const [sx, sy] = srcPoints[i];
    const [dx, dy] = dstPoints[i];

    // Two equations per point
    A.push([sx, sy, 1, 0, 0, 0, -dx*sx, -dx*sy]);
    b.push(dx);
    A.push([0, 0, 0, sx, sy, 1, -dy*sx, -dy*sy]);
    b.push(dy);
  }

  // Solve using Gaussian elimination
  const h = gaussianElimination(A, b);

  // Reshape to 3x3 matrix (h8 = 1 by convention)
  return [
    [h[0], h[1], h[2]],
    [h[3], h[4], h[5]],
    [h[6], h[7], 1]
  ];
}

Gaussian Elimination

function gaussianElimination(A, b) {
  const n = A.length;
  const augmented = A.map((row, i) => [...row, b[i]]);

  for (let col = 0; col < n; col++) {
    // Find pivot
    let maxRow = col;
    for (let row = col + 1; row < n; row++) {
      if (Math.abs(augmented[row][col]) > Math.abs(augmented[maxRow][col])) {
        maxRow = row;
      }
    }
    [augmented[col], augmented[maxRow]] = [augmented[maxRow], augmented[col]];

    // Eliminate below
    for (let row = col + 1; row < n; row++) {
      const factor = augmented[row][col] / augmented[col][col];
      for (let k = col; k <= n; k++) {
        augmented[row][k] -= factor * augmented[col][k];
      }
    }
  }

  // Back substitution
  const x = new Array(n);
  for (let i = n - 1; i >= 0; i--) {
    x[i] = augmented[i][n];
    for (let j = i + 1; j < n; j++) {
      x[i] -= augmented[i][j] * x[j];
    }
    x[i] /= augmented[i][i];
  }

  return x;
}

Applying the Transform: Inverse Mapping

The naive approach (forward mapping) maps source pixels to destination pixels. Problem: you get holes — some destination pixels never get a value.

The correct approach is inverse mapping: for each pixel in the destination image, compute where it came from in the source image.

function applyHomography(H, x, y) {
  const [h0, h1, h2] = H[0];
  const [h3, h4, h5] = H[1];
  const [h6, h7, h8] = H[2];

  const w = h6*x + h7*y + h8;
  return [
    (h0*x + h1*y + h2) / w,
    (h3*x + h4*y + h5) / w
  ];
}

function invertHomography(H) {
  // 3x3 matrix inverse
  const det = 
    H[0][0] * (H[1][1]*H[2][2] - H[1][2]*H[2][1]) -
    H[0][1] * (H[1][0]*H[2][2] - H[1][2]*H[2][0]) +
    H[0][2] * (H[1][0]*H[2][1] - H[1][1]*H[2][0]);

  return [
    [(H[1][1]*H[2][2]-H[1][2]*H[2][1])/det, (H[0][2]*H[2][1]-H[0][1]*H[2][2])/det, (H[0][1]*H[1][2]-H[0][2]*H[1][1])/det],
    [(H[1][2]*H[2][0]-H[1][0]*H[2][2])/det, (H[0][0]*H[2][2]-H[0][2]*H[2][0])/det, (H[0][2]*H[1][0]-H[0][0]*H[1][2])/det],
    [(H[1][0]*H[2][1]-H[1][1]*H[2][0])/det, (H[0][1]*H[2][0]-H[0][0]*H[2][1])/det, (H[0][0]*H[1][1]-H[0][1]*H[1][0])/det]
  ];
}

Putting It Together

function perspectiveCorrect(srcCanvas, srcPoints) {
  const outputWidth = Math.max(
    distance(srcPoints[0], srcPoints[1]),
    distance(srcPoints[2], srcPoints[3])
  );
  const outputHeight = Math.max(
    distance(srcPoints[0], srcPoints[3]),
    distance(srcPoints[1], srcPoints[2])
  );

  const dstPoints = [
    [0, 0],
    [outputWidth, 0],
    [outputWidth, outputHeight],
    [0, outputHeight]
  ];

  // Compute H (source → destination)
  const H = computeHomography(srcPoints, dstPoints);
  // Invert for destination → source mapping
  const Hinv = invertHomography(H);

  const dstCanvas = document.createElement('canvas');
  dstCanvas.width = outputWidth;
  dstCanvas.height = outputHeight;
  const dstCtx = dstCanvas.getContext('2d');
  const dstImageData = dstCtx.createImageData(outputWidth, outputHeight);

  const srcCtx = srcCanvas.getContext('2d');
  const srcImageData = srcCtx.getImageData(0, 0, srcCanvas.width, srcCanvas.height);

  // For each destination pixel, find its source
  for (let y = 0; y < outputHeight; y++) {
    for (let x = 0; x < outputWidth; x++) {
      const [srcX, srcY] = applyHomography(Hinv, x, y);

      // Bilinear interpolation for smooth result
      const pixel = bilinearSample(srcImageData, srcX, srcY);
      const dstIdx = (y * outputWidth + x) * 4;
      dstImageData.data[dstIdx] = pixel.r;
      dstImageData.data[dstIdx+1] = pixel.g;
      dstImageData.data[dstIdx+2] = pixel.b;
      dstImageData.data[dstIdx+3] = pixel.a;
    }
  }

  dstCtx.putImageData(dstImageData, 0, 0);
  return dstCanvas;
}

Bilinear Interpolation

Simply taking the nearest pixel produces blocky results. Bilinear interpolation blends the four surrounding pixels:

function bilinearSample(imageData, x, y) {
  const { width, height, data } = imageData;

  // Clamp to image bounds
  x = Math.max(0, Math.min(width - 1, x));
  y = Math.max(0, Math.min(height - 1, y));

  const x0 = Math.floor(x), x1 = Math.min(x0 + 1, width - 1);
  const y0 = Math.floor(y), y1 = Math.min(y0 + 1, height - 1);
  const fx = x - x0, fy = y - y0;

  function getPixel(px, py) {
    const i = (py * width + px) * 4;
    return { r: data[i], g: data[i+1], b: data[i+2], a: data[i+3] };
  }

  const p00 = getPixel(x0, y0), p10 = getPixel(x1, y0);
  const p01 = getPixel(x0, y1), p11 = getPixel(x1, y1);

  return {
    r: lerp(lerp(p00.r, p10.r, fx), lerp(p01.r, p11.r, fx), fy),
    g: lerp(lerp(p00.g, p10.g, fx), lerp(p01.g, p11.g, fx), fy),
    b: lerp(lerp(p00.b, p10.b, fx), lerp(p01.b, p11.b, fx), fy),
    a: lerp(lerp(p00.a, p10.a, fx), lerp(p01.a, p11.a, fx), fy)
  };
}

function lerp(a, b, t) { return a + (b - a) * t; }
function distance(p1, p2) { return Math.hypot(p2[0]-p1[0], p2[1]-p1[1]); }

Performance: This Is Slow in Pure JS

For a 1200×900 output image, you're doing 1.08 million inverse transform lookups + bilinear interpolations. In pure JavaScript, that takes several seconds.

Options for better performance:

WebGL shader: The transform is trivially parallelizable. A fragment shader can do each pixel simultaneously on the GPU.
WebAssembly: Compile OpenCV's warpPerspective to WASM (~10x speedup over JS)
OffscreenCanvas + Worker: At least keep the UI responsive

We use a combination of Web Workers (to avoid blocking UI) and canvas drawImage with CSS transforms for the preview, then full-quality processing only on export.

Try It

ToolZip Perspective Correction — drag the four corners to define your document, get a straightened result.

If you're implementing something similar, the full homography math is well worth understanding — it shows up in AR, panorama stitching, and anywhere you're mapping between two views of a planar surface.

Implementing Perceptual Hashing for Duplicate Image Detection in the Browser

toolzip — Wed, 21 Oct 2026 10:58:36 +0000

Detecting duplicate images sounds simple until you realize that "duplicate" in the real world means images that look the same but aren't byte-identical. A JPEG saved at quality 90 vs 95, a resized copy, a screenshot of a photo — these are "the same" to a human but completely different files.

This post covers the implementation of perceptual hashing (pHash) for ToolZip's duplicate image finder, which runs entirely in the browser.

Why Cryptographic Hashes Don't Work

MD5 and SHA-256 are great for checking file integrity but useless for visual similarity. A single changed pixel produces a completely different hash.

What we need is a hash where visually similar images produce similar hash values — and we can measure "how similar" numerically.

The Three Main Approaches

Average Hash (aHash)

Simplest and fastest. Good for quick duplicate detection.

function aHash(imageData, hashSize = 8) {
  // 1. Resize to hashSize x hashSize
  const resized = resize(imageData, hashSize, hashSize);

  // 2. Convert to grayscale
  const gray = toGrayscale(resized);

  // 3. Calculate mean pixel value
  const mean = gray.reduce((sum, val) => sum + val, 0) / gray.length;

  // 4. Each pixel: 1 if above mean, 0 if below
  return gray.map(pixel => pixel >= mean ? 1 : 0);
}

Result: 64-bit hash (8×8 grid). Extremely fast, but sensitive to gamma correction and color shifts.

Perceptual Hash (pHash)

More robust. Uses DCT (Discrete Cosine Transform) to capture frequency information rather than raw pixel values.

function pHash(imageData, hashSize = 8, sampleSize = 32) {
  // 1. Resize to sampleSize x sampleSize (larger than final hash)
  const resized = resize(imageData, sampleSize, sampleSize);

  // 2. Grayscale
  const gray = toGrayscale(resized);

  // 3. Apply DCT
  const dctData = applyDCT2D(gray, sampleSize);

  // 4. Take top-left hashSize x hashSize (low frequency component)
  const lowFreq = extractTopLeft(dctData, sampleSize, hashSize);

  // 5. Median of low-frequency values (excluding DC component)
  const median = calculateMedian(lowFreq.slice(1)); // skip DC

  // 6. 1 if above median, 0 if below
  return lowFreq.map(val => val >= median ? 1 : 0);
}

The key insight: the top-left corner of a DCT output contains low-frequency information (overall structure, major shapes). High-frequency details (fine texture, compression artifacts) are discarded. This makes pHash robust to:

JPEG compression differences
Minor resizing
Slight brightness/contrast changes

Difference Hash (dHash)

Captures gradient information rather than absolute values.

function dHash(imageData, hashSize = 8) {
  // 1. Resize to (hashSize+1) x hashSize
  const resized = resize(imageData, hashSize + 1, hashSize);
  const gray = toGrayscale(resized);

  const hash = [];
  for (let row = 0; row < hashSize; row++) {
    for (let col = 0; col < hashSize; col++) {
      const idx = row * (hashSize + 1) + col;
      // 1 if pixel is brighter than next pixel in same row
      hash.push(gray[idx] > gray[idx + 1] ? 1 : 0);
    }
  }
  return hash;
}

dHash is particularly good at detecting mirrored or flipped duplicates.

The DCT Implementation

Pure JavaScript DCT is slow, but for 32×32 inputs it's fast enough:

function applyDCT2D(data, n) {
  // Apply 1D DCT to each row
  const rowDCT = [];
  for (let i = 0; i < n; i++) {
    const row = data.slice(i * n, (i + 1) * n);
    rowDCT.push(...dct1D(row));
  }

  // Apply 1D DCT to each column
  const result = new Array(n * n);
  for (let j = 0; j < n; j++) {
    const col = [];
    for (let i = 0; i < n; i++) {
      col.push(rowDCT[i * n + j]);
    }
    const colDCT = dct1D(col);
    for (let i = 0; i < n; i++) {
      result[i * n + j] = colDCT[i];
    }
  }
  return result;
}

function dct1D(signal) {
  const n = signal.length;
  return signal.map((_, k) => {
    let sum = 0;
    for (let i = 0; i < n; i++) {
      sum += signal[i] * Math.cos((Math.PI / n) * (i + 0.5) * k);
    }
    return sum * (k === 0 ? Math.sqrt(1 / n) : Math.sqrt(2 / n));
  });
}

Measuring Similarity: Hamming Distance

Once you have two hashes (arrays of 0s and 1s), similarity is measured by counting different bits:

function hammingDistance(hash1, hash2) {
  if (hash1.length !== hash2.length) throw new Error('Hash length mismatch');
  return hash1.reduce((count, bit, i) => count + (bit !== hash2[i] ? 1 : 0), 0);
}

function isSimilar(hash1, hash2, threshold = 10) {
  return hammingDistance(hash1, hash2) <= threshold;
}

Typical thresholds:

0: Identical (or near-identical)
1-5: Very similar (minor edits, re-compression)
6-10: Similar (resize, crop, brightness adjustment)
11-20: Possibly related
20+: Different images

Canvas API for Image Processing

In the browser, we use Canvas to do the pixel manipulation:

async function getImageData(file) {
  return new Promise((resolve) => {
    const img = new Image();
    img.onload = () => {
      const canvas = document.createElement('canvas');
      canvas.width = img.width;
      canvas.height = img.height;
      const ctx = canvas.getContext('2d');
      ctx.drawImage(img, 0, 0);
      resolve(ctx.getImageData(0, 0, canvas.width, canvas.height));
    };
    img.src = URL.createObjectURL(file);
  });
}

function resize(imageData, targetW, targetH) {
  const canvas = document.createElement('canvas');
  canvas.width = targetW;
  canvas.height = targetH;
  const ctx = canvas.getContext('2d');

  // OffscreenCanvas approach for better performance
  const srcCanvas = document.createElement('canvas');
  srcCanvas.width = imageData.width;
  srcCanvas.height = imageData.height;
  srcCanvas.getContext('2d').putImageData(imageData, 0, 0);

  ctx.drawImage(srcCanvas, 0, 0, targetW, targetH);

  const resized = ctx.getImageData(0, 0, targetW, targetH);
  return Array.from(resized.data);
}

function toGrayscale(pixelArray) {
  const gray = [];
  for (let i = 0; i < pixelArray.length; i += 4) {
    // ITU-R BT.601 luminance formula
    gray.push(0.299 * pixelArray[i] + 0.587 * pixelArray[i+1] + 0.114 * pixelArray[i+2]);
  }
  return gray;
}

Scaling to Many Images: O(n²) Problem

Comparing every image against every other image is O(n²). For 100 images, that's ~5,000 comparisons — manageable. For 1,000 images, it's ~500,000.

For browser-based tools, we process in batches using requestIdleCallback:

async function findDuplicates(imageFiles, onProgress) {
  const hashes = [];

  // Phase 1: Hash all images
  for (let i = 0; i < imageFiles.length; i++) {
    const imageData = await getImageData(imageFiles[i]);
    hashes.push({ file: imageFiles[i], hash: pHash(imageData) });
    onProgress({ phase: 'hashing', current: i + 1, total: imageFiles.length });
  }

  // Phase 2: Compare all pairs
  const duplicates = [];
  let compared = 0;
  const totalPairs = (hashes.length * (hashes.length - 1)) / 2;

  for (let i = 0; i < hashes.length; i++) {
    for (let j = i + 1; j < hashes.length; j++) {
      const dist = hammingDistance(hashes[i].hash, hashes[j].hash);
      if (dist <= 10) {
        duplicates.push({ a: hashes[i].file, b: hashes[j].file, distance: dist });
      }
      compared++;

      // Yield to browser every 500 comparisons
      if (compared % 500 === 0) {
        onProgress({ phase: 'comparing', current: compared, total: totalPairs });
        await new Promise(resolve => setTimeout(resolve, 0));
      }
    }
  }

  return duplicates;
}

Which Hash to Use?

In practice, we use pHash as primary, with aHash as a quick pre-filter:

function quickSimilarityCheck(hash1, hash2) {
  // aHash first (fast) — if very different, skip pHash
  const aHashDist = hammingDistance(hash1.aHash, hash2.aHash);
  if (aHashDist > 20) return false;

  // pHash for confirmation (slower but more accurate)
  const pHashDist = hammingDistance(hash1.pHash, hash2.pHash);
  return pHashDist <= 10;
}

Try It

ToolZip Image Duplicate Finder — drop in a folder of images and it finds the duplicates client-side.

Have you dealt with this problem before? I'd be curious how others have handled the scaling challenge for larger collections.

Tags: #javascript #algorithms #webdev #imageprocessing

How We Run AI Face Detection Entirely in the Browser (No Server Required)

toolzip — Tue, 20 Oct 2026 11:13:41 +0000

When we built the face blur tool for ToolZip, we made a deliberate choice: no image ever leaves the user's device. Everything runs client-side, including the AI inference.

Here's how we pulled it off.

The Problem with Server-Side Processing

The conventional approach for image AI features is:

Upload image to server
Run inference
Return result

This works fine technically, but it comes with trade-offs:

Privacy: users must trust you with their photos
Cost: inference compute isn't free at scale
Latency: upload + process + download round-trip
Compliance: GDPR, data residency concerns

For a face blur tool specifically, the privacy angle matters a lot. People blur faces when they don't want the content to be seen — making them upload to a server feels contradictory.

Enter TensorFlow.js

TensorFlow.js lets you run ML models directly in the browser using WebGL for GPU acceleration. The models we care about:

MediaPipe Face Detection — lightweight, optimized for real-time use
BlazeFace — ultra-fast face detection (sub-millisecond on modern hardware)

Both are available as npm packages (@mediapipe/face_detection, @tensorflow-models/blazeface) and can run entirely client-side.

Implementation Overview

1. Load the Model

import * as faceDetection from '@tensorflow-models/face-detection';

const model = faceDetection.SupportedModels.MediaPipeFaceDetector;
const detectorConfig = {
  runtime: 'mediapipe',
  solutionPath: 'https://cdn.jsdelivr.net/npm/@mediapipe/face_detection'
};

const detector = await faceDetection.createDetector(model, detectorConfig);

The first load downloads the model weights (~3MB). After that, it's cached by the browser.

2. Detect Faces

const image = document.getElementById('input-image');
const faces = await detector.detectFaces(image);

// Each face includes:
// { box: { xMin, yMin, width, height }, keypoints: [...] }

3. Apply Blur to Detected Regions

function blurFaceRegions(canvas, faces, blurIntensity = 15) {
  const ctx = canvas.getContext('2d');

  faces.forEach(face => {
    const { xMin, yMin, width, height } = face.box;

    // Add padding around detected face
    const padding = Math.floor(width * 0.15);
    const x = Math.max(0, xMin - padding);
    const y = Math.max(0, yMin - padding);
    const w = Math.min(canvas.width - x, width + padding * 2);
    const h = Math.min(canvas.height - y, height + padding * 2);

    // Save current state
    ctx.save();

    // Clip to face region
    ctx.beginPath();
    ctx.rect(x, y, w, h);
    ctx.clip();

    // Apply blur via CSS filter
    ctx.filter = `blur(${blurIntensity}px)`;
    ctx.drawImage(canvas, 0, 0);

    ctx.restore();
  });
}

The CSS filter: blur() approach works well for rectangular regions. For a more sophisticated oval blur (following face shape), you'd use a radial gradient mask instead.

Performance Considerations

MediaPipe Face Detector is designed for real-time video (30fps+), so for static images it's practically instant. But there are a few gotchas:

Model initialization time: The first inference takes ~300-500ms while TF.js warms up WebGL. Subsequent calls are much faster.

// Warm up the model with a small dummy tensor
const warmupTensor = tf.zeros([1, 100, 100, 3]);
await detector.estimateFaces(warmupTensor);
warmupTensor.dispose();

Large images: Performance degrades with very large images. We resize inputs to max 1920px before detection, then scale the bounding boxes back up.

const MAX_DETECTION_SIZE = 1920;

function prepareForDetection(img) {
  const scale = Math.min(1, MAX_DETECTION_SIZE / Math.max(img.width, img.height));

  const canvas = document.createElement('canvas');
  canvas.width = img.width * scale;
  canvas.height = img.height * scale;
  canvas.getContext('2d').drawImage(img, 0, 0, canvas.width, canvas.height);

  return { canvas, scale };
}

What About False Positives and Misses?

No face detector is perfect. Common failure cases:

Partial faces: faces at the edge of frame, heavily occluded
Extreme angles: faces turned more than ~45 degrees from frontal
Small faces: tiny in the frame (less than ~60px)
Unusual lighting: very dark, backlit, strong shadows

For a blur tool, false negatives (missed faces) are more problematic than false positives (blurring something that isn't a face). So we err on the side of a slightly larger bounding box and offer manual adjustment.

The Privacy Architecture

The full data flow for our tool:

User selects image → FileReader API (local) → 
Canvas element (local) → TF.js inference (local GPU) → 
Canvas manipulation (local) → Download result (local)

Zero network requests involved in the actual processing. The only external call is the one-time model download, which gets cached.

Browser Support

WebGL (required for TF.js GPU acceleration) is supported by 97%+ of browsers as of 2024. For the ~3% without WebGL, TF.js falls back to CPU via WASM or pure JS — slower but functional.

Try It

If you want to see this in action without setting anything up: ToolZip Image Face Blur — runs entirely in your browser, no account needed.

The complete source approach described here is what we use in production. Give it a try and let me know if you have questions about any part of the implementation.

LocalStorage vs sessionStorage vs IndexedDB — When to Use Which

toolzip — Mon, 19 Oct 2026 04:32:41 +0000

localStorage vs sessionStorage vs IndexedDB — When to Use Which

Browser storage has three main options. Most developers know localStorage, fewer know when to use the others.

localStorage

Persistent, synchronous, 5–10MB limit, strings only.

// Store
localStorage.setItem('theme', 'dark');
localStorage.setItem('history', JSON.stringify(items));

// Read
const theme = localStorage.getItem('theme');
const history = JSON.parse(localStorage.getItem('history') ?? '[]');

// Delete
localStorage.removeItem('theme');
localStorage.clear();

Use when: Preferences, settings, small persistent state. Don't use for large data — synchronous reads block the main thread.

sessionStorage

Same API as localStorage, but cleared when the tab closes.

sessionStorage.setItem('draft', content);

Use when: Temporary state within a session — unsaved form data, wizard progress, undo history.

IndexedDB

Asynchronous, large storage (usually 50%+ of disk), supports structured data and binary.

async function openDb() {
  return new Promise((resolve, reject) => {
    const req = indexedDB.open('my-app', 1);
    req.onupgradeneeded = (e) => {
      e.target.result.createObjectStore('files', { keyPath: 'id' });
    };
    req.onsuccess = (e) => resolve(e.target.result);
    req.onerror = () => reject(req.error);
  });
}

async function saveFile(db, file) {
  const buffer = await file.arrayBuffer();
  return new Promise((resolve) => {
    const tx = db.transaction('files', 'readwrite');
    tx.objectStore('files').put({ id: file.name, data: buffer, type: file.type });
    tx.oncomplete = resolve;
  });
}

Use when: Storing files, large datasets, offline-first apps.

Decision Table

Need	Use
Save theme/language preference	localStorage
Remember last-used tool	localStorage
Undo history (current session)	sessionStorage
Store uploaded file temporarily	sessionStorage or IndexedDB
Cache files for offline use	IndexedDB
Store processed output	IndexedDB
Anything >5MB	IndexedDB

What I Use in ToolZip

localStorage: Recent UTM links (8 entries), recently used colors, calculator history
sessionStorage: Nothing — tools are stateless by design
IndexedDB: Not yet — may add for caching processed results

The design choice: no file ever touches the server, so browser storage is the only persistence layer.

All tools at toolzip.app run entirely in your browser.

Generating Dynamic OG Images in Next.js Without @vercel/og

toolzip — Sun, 18 Oct 2026 03:58:33 +0000

Generating Dynamic OG Images in Next.js Without @vercel/og

Open Graph images (the preview image when you share a URL on social media) should be dynamic — showing the actual page title. Here's how to do it in Next.js without relying on a heavy library.

The Goal

When someone shares toolzip.app/tools/image-compress, the OG image should say "Image Compress — ToolZip" instead of a generic site logo.

Option 1: Static OG Images Per Page

The simplest approach: generate images at build time.

// In your page component
export const metadata = {
  openGraph: {
    title: 'Image Compress — ToolZip',
    images: [{ url: '/og/image-compress.png', width: 1200, height: 630 }],
  },
};

This works but requires generating and committing hundreds of images.

Option 2: Canvas-Based OG Image API

A serverless function that generates images on demand:

// /app/api/og/route.ts
import { NextRequest } from 'next/server';

export async function GET(req: NextRequest) {
  const title = req.nextUrl.searchParams.get('title') ?? 'ToolZip';

  // Create canvas
  const { createCanvas } = await import('@napi-rs/canvas');
  const canvas = createCanvas(1200, 630);
  const ctx = canvas.getContext('2d');

  // Background gradient
  const grad = ctx.createLinearGradient(0, 0, 1200, 630);
  grad.addColorStop(0, '#6366f1');
  grad.addColorStop(1, '#ec4899');
  ctx.fillStyle = grad;
  ctx.fillRect(0, 0, 1200, 630);

  // Title text
  ctx.fillStyle = '#ffffff';
  ctx.font = 'bold 64px sans-serif';
  ctx.textAlign = 'center';
  ctx.fillText(title, 600, 280);

  // Site name
  ctx.font = '32px sans-serif';
  ctx.fillStyle = 'rgba(255,255,255,0.7)';
  ctx.fillText('toolzip.app', 600, 360);

  const buffer = canvas.toBuffer('image/png');
  return new Response(buffer, {
    headers: { 'Content-Type': 'image/png', 'Cache-Control': 'public, max-age=86400' },
  });
}

Using the OG Image

// In each tool page
export function generateMetadata({ params }) {
  const tool = getToolById(params.id);
  return {
    openGraph: {
      images: [`/api/og?title=${encodeURIComponent(tool.name)}`],
    },
  };
}

Caching

OG images should be cached aggressively — they rarely change. The Cache-Control: public, max-age=86400 header caches them for 24 hours at the CDN level.

Text Wrapping

Long titles need wrapping. Canvas doesn't do this automatically:

function wrapText(ctx, text, maxWidth, lineHeight, x, y) {
  const words = text.split(' ');
  let line = '';
  let currentY = y;

  for (const word of words) {
    const test = line + word + ' ';
    if (ctx.measureText(test).width > maxWidth && line) {
      ctx.fillText(line, x, currentY);
      line = word + ' ';
      currentY += lineHeight;
    } else {
      line = test;
    }
  }
  ctx.fillText(line, x, currentY);
}

All 76 tools on toolzip.app have dynamic OG images generated this way.

Using Vercel KV for a Simple Blog CMS — What I Learned After 100 Posts

toolzip — Sat, 17 Oct 2026 04:26:13 +0000

Using Vercel KV for a Simple Blog CMS — What I Learned After 100 Posts

I built a simple blog CMS on top of Vercel KV for my utility site. After publishing over 100 posts through it, here's what works, what doesn't, and what I'd do differently.

Why KV Instead of a Database?

For a blog with a few hundred posts, a full database is overkill. Vercel KV (Redis) gives you:

No schema migrations
Free tier that's sufficient for small sites
Simple key-value API
Fast reads

The Data Structure

Each post is stored as a JSON object under post:slug:

const post = {
  slug: 'image-compress-guide',
  title_ko: '이미지 압축 완벽 가이드',
  title_en: 'Complete Guide to Image Compression',
  content_ko: '...',
  content_en: '...',
  status: 'published', // 'scheduled' | 'published'
  published_at: '2026-09-10T00:00:00Z',
  scheduled_at: null,
  tags: ['image', 'compress', 'toolzip'],
  lang: 'both', // 'ko' | 'en' | 'both'
};

await kv.set(`post:${post.slug}`, post);

Listing All Posts

KV doesn't support queries. To list all posts:

async function getAllPosts() {
  const keys = await kv.keys('post:*');
  const posts = await Promise.all(keys.map(k => kv.get(k)));
  return posts
    .filter(Boolean)
    .filter(p => p.status === 'published')
    .sort((a, b) => new Date(b.published_at) - new Date(a.published_at));
}

The problem: kv.keys() returns all keys in a single call. At 1,000 posts, this is still fast. At 10,000, you'll hit limits. Plan for pagination early.

Scheduled Publishing

I added a status: 'scheduled' state and a cron job that runs every hour:

// /api/cron/publish
export async function GET() {
  const keys = await kv.keys('post:*');
  const now = new Date();
  let published = 0;

  for (const key of keys) {
    const post = await kv.get(key);
    if (post?.status === 'scheduled' && new Date(post.scheduled_at) <= now) {
      await kv.set(key, { ...post, status: 'published', published_at: post.scheduled_at });
      published++;
    }
  }

  return Response.json({ published });
}

What I'd Do Differently

Add an index: Store a sorted list of slugs separately so listing doesn't require fetching all post data
Pagination from day one: kv.keys() isn't paginated in the free tier
Search: KV has no text search — for that, you need Algolia or similar

What Works Well

For a site under 500 posts, this setup is fast, free, and simple enough to maintain solo. The admin interface I built took one afternoon and handles everything I need.

The blog runs at toolzip.app/blog.

Building a Drawing App with Canvas — Smooth Lines, Undo, and Shape Tools

toolzip — Fri, 16 Oct 2026 04:30:12 +0000

Building a Drawing App with Canvas — Smooth Lines, Undo, and Shape Tools

A drawing app is a great Canvas project. Here's how to get smooth lines, implement undo, and add shape tools — including the non-obvious parts.

Smooth Lines with Quadratic Curves

Connecting every mousemove point with straight lines looks jagged. The fix: use quadratic Bezier curves through the midpoints:

let lastX, lastY;

canvas.addEventListener('mousemove', (e) => {
  if (!isDrawing) return;
  const { x, y } = getPos(e);

  ctx.beginPath();
  ctx.moveTo(lastX, lastY);
  // Midpoint between last and current
  const midX = (lastX + x) / 2;
  const midY = (lastY + y) / 2;
  ctx.quadraticCurveTo(lastX, lastY, midX, midY);
  ctx.stroke();

  lastX = x;
  lastY = y;
});

Undo with State Snapshots

The simplest undo: save the entire canvas state as a data URL after each stroke:

const history = [];
const MAX_HISTORY = 20;

function saveState() {
  history.push(canvas.toDataURL());
  if (history.length > MAX_HISTORY) history.shift();
}

function undo() {
  if (history.length === 0) return;
  const dataUrl = history.pop();
  const img = new Image();
  img.onload = () => {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(img, 0, 0);
  };
  img.src = dataUrl;
}

toDataURL() is slow for large canvases. For better performance, store ImageData objects instead.

Drawing Shapes

Shapes need a "preview" that updates on mousemove without permanently drawing:

let snapshot; // Canvas state before shape starts

canvas.addEventListener('mousedown', () => {
  snapshot = ctx.getImageData(0, 0, canvas.width, canvas.height);
});

canvas.addEventListener('mousemove', (e) => {
  if (!isDrawing || tool !== 'rect') return;
  // Restore snapshot, then draw preview
  ctx.putImageData(snapshot, 0, 0);
  const { x, y } = getPos(e);
  ctx.strokeRect(startX, startY, x - startX, y - startY);
});

Loading an Image to Draw Over

For annotation use cases, load an existing image onto the canvas:

function loadImageOntoCanvas(file) {
  const img = new Image();
  img.onload = () => {
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.drawImage(img, 0, 0);
    saveState(); // Save as first undo state
  };
  img.src = URL.createObjectURL(file);
}

Touch Support

Add touch events alongside mouse events:

function getPos(e) {
  const rect = canvas.getBoundingClientRect();
  const clientX = e.touches ? e.touches[0].clientX : e.clientX;
  const clientY = e.touches ? e.touches[0].clientY : e.clientY;
  return {
    x: (clientX - rect.left) * (canvas.width / rect.width),
    y: (clientY - rect.top) * (canvas.height / rect.height),
  };
}

The scaling factor handles cases where the canvas display size differs from its actual resolution.

Draw at toolzip.app/tools/drawing-pad.

Image Adjustment in the Browser — Brightness, Contrast, Saturation Without Libraries

toolzip — Thu, 15 Oct 2026 02:58:24 +0000

Image Adjustment in the Browser — Brightness, Contrast, Saturation Without Libraries

CSS filter handles simple visual effects. For pixel-level control — downloadable output, real adjustment values — you need Canvas and pixel manipulation.

Getting Pixel Data

async function getImageData(file) {
  const img = await loadImage(file);
  const canvas = document.createElement('canvas');
  canvas.width = img.naturalWidth;
  canvas.height = img.naturalHeight;
  canvas.getContext('2d').drawImage(img, 0, 0);
  return canvas.getContext('2d').getImageData(0, 0, canvas.width, canvas.height);
}

Brightness

Brightness adds or subtracts from each channel:

function applyBrightness(data, value) {
  // value: -100 to +100
  const factor = value * 2.55;
  for (let i = 0; i < data.length; i += 4) {
    data[i]     = Math.min(255, Math.max(0, data[i]     + factor));
    data[i + 1] = Math.min(255, Math.max(0, data[i + 1] + factor));
    data[i + 2] = Math.min(255, Math.max(0, data[i + 2] + factor));
  }
}

Contrast

Contrast expands or compresses the range around the midpoint (128):

function applyContrast(data, value) {
  // value: -100 to +100
  const factor = (259 * (value + 255)) / (255 * (259 - value));
  for (let i = 0; i < data.length; i += 4) {
    data[i]     = Math.min(255, Math.max(0, factor * (data[i]     - 128) + 128));
    data[i + 1] = Math.min(255, Math.max(0, factor * (data[i + 1] - 128) + 128));
    data[i + 2] = Math.min(255, Math.max(0, factor * (data[i + 2] - 128) + 128));
  }
}

Saturation

Saturation requires converting to HSL, adjusting S, and converting back:

function rgbToHsl(r, g, b) {
  r /= 255; g /= 255; b /= 255;
  const max = Math.max(r, g, b), min = Math.min(r, g, b);
  let h, s, l = (max + min) / 2;

  if (max === min) { h = s = 0; }
  else {
    const d = max - min;
    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
    switch (max) {
      case r: h = ((g - b) / d + (g < b ? 6 : 0)) / 6; break;
      case g: h = ((b - r) / d + 2) / 6; break;
      case b: h = ((r - g) / d + 4) / 6; break;
    }
  }
  return [h, s, l];
}

Sharpness (Unsharp Mask)

Sharpness isn't a simple per-pixel operation — it requires a convolution:

function applySharpness(imageData, strength) {
  const kernel = [
     0, -strength,  0,
    -strength, 1 + 4 * strength, -strength,
     0, -strength,  0
  ];
  return convolve(imageData, kernel);
}

Performance

Processing a 4000×3000 image (48MB of raw pixel data) takes ~200ms in JavaScript. For a preview, work at 1/4 resolution and only process full resolution on download.

Adjust images at toolzip.app/tools/image-adjust.

Randomness in JavaScript — Why Math.random() Isn't Random Enough

toolzip — Wed, 14 Oct 2026 03:30:13 +0000

Randomness in JavaScript — Why Math.random() Isn't Random Enough

Building a fair lottery picker requires more than Math.random(). Here's the difference between pseudo-random and cryptographically secure random, and when it matters.

Math.random() — Fast but Predictable

Math.random(); // 0.7234...

This uses a PRNG (pseudo-random number generator) — typically xorshift128+ in V8. It's fast but deterministic: given the same seed, the sequence is reproducible.

For games and UI animations, this is fine. For lottery picks and security tokens, it isn't.

crypto.getRandomValues() — Truly Random

function secureRandom() {
  const array = new Uint32Array(1);
  crypto.getRandomValues(array);
  return array[0] / (0xFFFFFFFF + 1); // 0 to 1
}

This uses the OS entropy pool (hardware events, timing jitter) — genuinely unpredictable.

Fair Shuffle (Fisher-Yates)

The naive shuffle (sort(() => Math.random() - 0.5)) is biased. Use Fisher-Yates:

function fairShuffle(array) {
  const arr = [...array];
  for (let i = arr.length - 1; i > 0; i--) {
    const j = Math.floor(secureRandom() * (i + 1));
    [arr[i], arr[j]] = [arr[j], arr[i]];
  }
  return arr;
}

Drawing Without Replacement

function drawWithoutReplacement(items, count) {
  if (count > items.length) throw new Error('Cannot draw more than available');
  return fairShuffle(items).slice(0, count);
}

Drawing With Replacement

function drawWithReplacement(items, count) {
  return Array.from({ length: count }, () => {
    const index = Math.floor(secureRandom() * items.length);
    return items[index];
  });
}

Random Number in Range (Without Modulo Bias)

Simple modulo creates bias because the range rarely divides evenly into the max integer:

function secureRandomInt(min, max) {
  const range = max - min + 1;
  const maxValid = Math.floor(0x100000000 / range) * range;
  let value;
  do {
    const arr = new Uint32Array(1);
    crypto.getRandomValues(arr);
    value = arr[0];
  } while (value >= maxValid); // Reject values in the biased range
  return min + (value % range);
}

Try the random picker at toolzip.app/tools/random-picker.

Building a World Clock with Automatic DST — The Timezone Pitfalls

toolzip — Tue, 13 Oct 2026 08:00:50 +0000

Building a World Clock with Automatic DST — The Timezone Pitfalls

Timezone handling is where confident developers become humbled developers. Here's what I learned building a 33-city world clock.

The Wrong Way

// DON'T do this
function getTimeInNewYork(date) {
  const offset = -5; // EST
  return new Date(date.getTime() + offset * 60 * 60 * 1000);
}

This breaks during Daylight Saving Time. New York is UTC-4 in summer, UTC-5 in winter.

The Right Way: Intl.DateTimeFormat

function getTimeInZone(timezone) {
  return new Intl.DateTimeFormat('en-US', {
    timeZone: timezone,
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    hour12: false,
  }).format(new Date());
}

getTimeInZone('America/New_York'); // Automatically handles DST

Intl.DateTimeFormat uses the IANA timezone database, which includes all historical and current DST rules.

Getting UTC Offset

function getUtcOffset(timezone) {
  const date = new Date();
  const utcDate = new Date(date.toLocaleString('en-US', { timeZone: 'UTC' }));
  const tzDate = new Date(date.toLocaleString('en-US', { timeZone: timezone }));
  const diff = (tzDate - utcDate) / (1000 * 60 * 60);
  return diff; // e.g., 9 for Seoul, -4 or -5 for New York
}

Is It Day or Night?

function isDaytime(timezone) {
  const hour = parseInt(
    new Intl.DateTimeFormat('en-US', {
      timeZone: timezone,
      hour: 'numeric',
      hour12: false,
    }).format(new Date())
  );
  return hour >= 6 && hour < 20;
}

Real-Time Updates

Use setInterval to update all clocks, but be careful about performance:

function startClock(timezones, onTick) {
  const tick = () => {
    const now = new Date();
    const times = timezones.map(tz => ({
      timezone: tz,
      time: getTimeInZone(tz),
      offset: getUtcOffset(tz),
      isDay: isDaytime(tz),
    }));
    onTick(times);
  };

  tick(); // Immediate first render
  return setInterval(tick, 1000);
}

The 33 Cities

I chose cities to cover all major business hubs across every region. The key insight: use IANA names, not abbreviations. America/New_York works forever; EST is ambiguous and breaks.

Live at toolzip.app/tools/world-clock — 33 cities, DST-aware, real-time.

Text Deduplication Algorithms — From O(n ) to O(n)

toolzip — Mon, 12 Oct 2026 11:36:21 +0000

Text Deduplication Algorithms — From O(n²) to O(n)

Removing duplicate lines sounds trivial. The naive approach works for small inputs but breaks down at scale. Here's how to do it efficiently.

The Naive Approach: O(n²)

function dedupNaive(lines) {
  const result = [];
  for (const line of lines) {
    if (!result.includes(line)) {
      result.push(line);
    }
  }
  return result;
}

Array.includes() is O(n), so this is O(n²) overall. For 10,000 lines, that's 50 million comparisons.

Using a Set: O(n)

function dedupWithSet(lines) {
  return [...new Set(lines)];
}

Set uses a hash table internally, giving O(1) average lookup. This is 100x faster for large inputs.

Case-Insensitive Deduplication

function dedupCaseInsensitive(lines) {
  const seen = new Set();
  return lines.filter(line => {
    const key = line.toLowerCase();
    if (seen.has(key)) return false;
    seen.add(key);
    return true;
  });
}

Preserving Original Case While Deduplicating

Keep the first occurrence's original case:

function dedupPreserveCase(lines) {
  const seen = new Set();
  return lines.filter(line => {
    const key = line.trim().toLowerCase();
    if (seen.has(key)) return false;
    seen.add(key);
    return true;
  });
}

Sort + Dedup

Sorting first, then deduplicating adjacent duplicates is O(n log n) but useful when you want sorted output:

function sortAndDedup(lines, caseInsensitive = false) {
  const sorted = [...lines].sort((a, b) => {
    const ca = caseInsensitive ? a.toLowerCase() : a;
    const cb = caseInsensitive ? b.toLowerCase() : b;
    return ca.localeCompare(cb);
  });

  return sorted.filter((line, i) => {
    if (i === 0) return true;
    const prev = caseInsensitive ? sorted[i-1].toLowerCase() : sorted[i-1];
    const curr = caseInsensitive ? line.toLowerCase() : line;
    return prev !== curr;
  });
}

Performance Comparison

For 100,000 lines with 50% duplicates:

Method	Time
Naive (includes)	~2,400ms
Set-based	~12ms
Sort + dedup	~45ms

The Set approach wins for pure deduplication. Sort + dedup wins when you also need sorted output.

Try it at toolzip.app/tools/text-dedup.

The Math Behind Compound Interest — And Why It Matters More Than You Think

toolzip — Sun, 11 Oct 2026 02:48:53 +0000

The Math Behind Compound Interest — And Why It Matters More Than You Think

Compound interest is one of those concepts that's easy to describe but hard to intuitively grasp. Let's build a calculator and explore what the numbers actually show.

The Formula

A = P(1 + r/n)^(nt)

Where:

A = final amount
P = principal
r = annual interest rate (decimal)
n = compounding periods per year
t = years

function compound(principal, annualRate, years, periodsPerYear = 12) {
  const r = annualRate / 100;
  const n = periodsPerYear;
  return principal * Math.pow(1 + r / n, n * years);
}

Adding Monthly Contributions

Most real-world scenarios involve regular contributions. The formula becomes:

A = P(1 + r/n)^(nt) + PMT × ((1 + r/n)^(nt) - 1) / (r/n)

function compoundWithContributions(principal, annualRate, years, monthlyContribution, periodsPerYear = 12) {
  const r = annualRate / 100;
  const n = periodsPerYear;
  const nt = n * years;
  const rn = r / n;

  const principalGrowth = principal * Math.pow(1 + rn, nt);
  const contributionGrowth = monthlyContribution * (Math.pow(1 + rn, nt) - 1) / rn;

  return principalGrowth + contributionGrowth;
}

Generating a Year-by-Year Table

function generateYearlyBreakdown(principal, annualRate, years, monthlyContribution) {
  const rows = [];
  let balance = principal;
  const monthlyRate = annualRate / 100 / 12;
  let totalContributions = principal;

  for (let year = 1; year <= years; year++) {
    for (let month = 0; month < 12; month++) {
      balance = balance * (1 + monthlyRate) + monthlyContribution;
      totalContributions += monthlyContribution;
    }
    rows.push({
      year,
      balance: Math.round(balance),
      totalContributions: Math.round(totalContributions),
      totalInterest: Math.round(balance - totalContributions),
    });
  }

  return rows;
}

The Rule of 72

A quick mental math trick: divide 72 by the annual interest rate to estimate how many years until your money doubles.

function yearsToDouble(annualRate) {
  return 72 / annualRate;
}
// 8% rate → ~9 years to double

Compounding Frequency Matters Less Than You Think

Daily vs. monthly compounding has a surprisingly small effect:

Frequency	$10,000 at 10% for 10 years
Annual	$25,937
Monthly	$27,070
Daily	$27,179

The difference between monthly and daily is only $109 over 10 years.

Explore compound interest at toolzip.app/tools/compound-calculator.