Image Upscaler — Enlarge Photos 2×, 3×, or 4× in Your Browser

Most online image upscalers fall into one of two camps. The first camp uploads your file to a server that runs a neural network — usually a Real-ESRGAN or ESRGAN variant — and returns an enlarged image with hallucinated detail. The output is excellent, but the price is privacy, speed, and a paywall above the free tier. The second camp uses the browser to stretch your image at CSS pixel size; the file you download is unchanged. This tool sits in a third spot: classical resampling and sharpening, fully client-side, returning a real larger file with no upload.

The pipeline has two stages. The first stage is a single call to the canvas API:

1. Decode the input file into an HTMLImageElement via an object URL.
2. Create a canvas at the target output dimensions (source × scale) and set imageSmoothingQuality = "high". Chromium and WebKit implement this as a bicubic resampler with mip-mapped pre-filtering, which is the standard for high-quality image enlargement.
3. Call drawImage(img, 0, 0, outW, outH) to resample the source into the larger canvas.

The second stage is the sharpening pass. Bicubic interpolation smooths transitions between pixels, which softens edges — visually, the new pixels are correct but the image looks slightly out of focus. A 3×3 unsharp-mask convolution applied to the resampled pixel data restores some of the perceived crispness. The kernel is a standard Laplacian sharpening matrix:

Normal kernel (sums to 1):

  0  -1   0
 -1   5  -1
  0  -1   0

For each output pixel P(x, y), the new red / green / blue values are
the sum of each kernel cell times the corresponding neighbour pixel.
Alpha is preserved. Edge samples clamp to the nearest in-bounds pixel
(REPLICATE border) so the image edge does not darken.

Three presets are exposed (Soft, Normal, Strong). All three sum to exactly 1.0, so the average luminance of the image is preserved — the sharpening never makes the image globally brighter or darker. The Normal preset is the default. You can also disable sharpening entirely, which is the right choice for an already-sharp source where you only need the larger size.

The whole pipeline runs inside the browser tab. The source file never leaves the device. There is no model download, no licence dialogue, and no rate limit. The trade-off is honest: classical resampling cannot invent detail the way a generative AI model can. For most everyday cases — print prep, doc placement, social-media uploads from a small source — that distinction does not matter.

• MDN — CanvasRenderingContext2D.drawImage (9-argument destination-size resampling)
• MDN — CanvasRenderingContext2D.imageSmoothingQuality (bicubic-class filter)
• MDN — CanvasRenderingContext2D.getImageData / putImageData (pixel access for the sharpening pass)
• MDN — HTMLCanvasElement.toBlob (browser-native JPEG/WebP/PNG encoder)
• Russ & Neal — The Image Processing Handbook (7th ed., CRC Press) §5.4 on unsharp masking

The canvas-API behaviour and sharpening kernels were last cross-checked on 2026-05-11. They are reviewed when a browser changes its canvas resampler (rare) or when the WHATWG canvas specification updates.