Resize and Crop Images in the Browser with the Canvas API - No Server, No Upload

Why process images on the client at all

Most image tools upload your file to a server, resize it there, then send a new file back. That works, but it has three downsides: your photos leave the device (privacy), every request costs round-trip latency (speed), and the operator pays storage and bandwidth (cost).

You can do the whole resize and crop inside the browser with the Canvas 2D API. Nothing is sent over the network, processing finishes in milliseconds, and there is no backend to scale. That is exactly how imgsize works: pick a platform preset, drop the file, get the sized image back locally.

The pipeline in five steps

The flow stays the same whether you resize to a preset, a free crop, or a custom width and height:

• Read the selected File from an <input type="file">.
• Decode it with createImageBitmap().
• Create a canvas sized to the target dimensions.
• Draw the cropped source region onto it with the nine-argument drawImage().
• Export a Blob, make an object URL, and trigger a download.

A minimal, runnable example

const file = document.querySelector('input[type=file]').files[0];

// 1. Decode the file on the client
const bitmap = await createImageBitmap(file);

// 2. Target canvas: 1080 x 1080 (square social post)
const canvas = document.createElement('canvas');
canvas.width = 1080;
canvas.height = 1080;
const ctx = canvas.getContext('2d');

// 3. High-quality smoothing
ctx.imageSmoothingEnabled = true;
ctx.imageSmoothingQuality = 'high';

// 4. Crop the source region, then scale it to the target.
// drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)
ctx.drawImage(
  bitmap,
  sx, sy, sw, sh, // source crop rectangle in original pixels
  0, 0, 1080, 1080 // destination rectangle on the canvas
);
bitmap.close(); // release decoder resources

// 5. Export and download
const blob = await new Promise((resolve) => canvas.toBlob(resolve, 'image/png'));
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'resized.png';
a.click();
URL.revokeObjectURL(url); // free the object URL after use

That is the core. Everything else is around these five calls.

The nine-argument drawImage() is doing two jobs at once

drawImage() with nine arguments combines cropping and scaling in one call:

• The first four numbers describe which rectangle of the source image to take (sx, sy, sw, sh).
• The last four describe where it lands on the destination canvas (dx, dy, dw, dh).

If sw/sh does not match the target aspect ratio, the browser stretches the crop into dw/dh. For a clean output you calculate the crop yourself so there is no distortion - for example, take a centered square out of a landscape photo before drawing it onto a square canvas.

Real-world details that break a naive version

These are the details that a tutorial snippet usually skips but a usable tool needs.

1. Map screen coordinates back to original pixels

When the user drags a crop box on screen, your coordinates live in a scaled preview. Before drawImage(), convert them back to source pixels using the preview's scale factor:

const sx = Math.max(0, (crop.x - imageRect.x) / imageRect.width * bitmap.width);
const sy = Math.max(0, (crop.y - imageRect.y) / imageRect.height * bitmap.height);
const sw = Math.min(bitmap.width - sx, crop.width / imageRect.width * bitmap.width);
const sh = Math.min(bitmap.height - sy, crop.height / imageRect.height * bitmap.height);

If you skip this, the crop drifts whenever the preview is zoomed or panned.

2. Fill an opaque background where transparency is not allowed

Marketplace listings (Amazon, Etsy) do not accept transparency. Before drawing, paint the canvas white (or neutral gray) so transparent edges do not turn black:

ctx.fillStyle = '#FFFFFF';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(bitmap, sx, sy, sw, sh, 0, 0, canvas.width, canvas.height);

Social presets, on the other hand, keep the source transparency, so the background fill should be conditional on the target format.

3. Watch for silent MIME downgrades

In some browsers and WebViews, canvas.toBlob('image/gif') silently returns a PNG instead. Before trusting the export, check blob.type against the requested MIME and surface a clear error rather than handing the user a mislabeled file.

4. Release resources

Close each decoded bitmap with bitmap.close(), and call URL.revokeObjectURL() on old preview URLs so memory does not accumulate across repeated resizes.

5. PNG ignores the quality argument

Only JPEG honors the quality parameter in toBlob() / toDataURL(). PNG compression losslessness does not take a quality number, so pass quality only when exporting JPEG.

When to reach for a ready-made tool

If you need 80+ platform presets, one-click background fill, and batch exports without writing this yourself, imgsize runs the same client-side Canvas pipeline in the browser: no upload, no login, no watermark. You can try it at https://www.imgsize.cc.

If you are building your own editor, the five-step pipeline above is the whole foundation - the rest is crop UI, preset metadata, and export options.

What part of client-side image processing have you run into trouble with? Drop it in the comments.