DEV Community

xueboyang1985
xueboyang1985

Posted on • Originally published at xueboyang1985.github.io

5 Browser-Based Image Tools That Work Entirely Offline — No Upload Required

Every image tool website wants you to upload your photos to their server. I never liked that — especially when the photos are personal.

So I built 5 image tools that process everything in your browser. The image data stays in JavaScript memory, gets processed by Canvas API or WebAssembly, and the result is downloaded directly.

How Client-Side Image Processing Works

Modern browsers have incredible built-in capabilities:

  • Canvas API — Draw, transform, and export images at pixel level. Resize, crop, compress, all without plugins.
  • WebAssembly — Run compiled C/C++ code at near-native speed. This is how the background remover runs a full AI model.
  • EyeDropper API — Pick any color from your screen without taking a screenshot.

With these three APIs, you can build professional-grade image tools that never need a server.

The 5 Tools

1. Image Compressor

Drag in a JPG, PNG, or WebP. Adjust quality slider. Download the compressed version.

How it works: Canvas API re-encodes the image at your chosen quality level. For PNG, it also strips metadata. For JPEG, it uses the browser's native JPEG encoder.

Free limit: 5 MB per image. PRO: unlimited size.

Try Image Compressor →

2. Image Resizer

Resize by percentage, pixels, or max dimension. Aspect ratio lock. Preview before downloading.

How it works: Canvas API draws the image at the target dimensions using drawImage(). Bilinear interpolation by default, high-quality if browser supports it.

Free: 5 MB. PRO: unlimited.

Try Image Resizer →

3. Image Cropper

Interactive crop selector on the image. Touch-friendly for mobile. Set aspect ratios (1:1, 4:3, 16:9, freeform).

How it works: Canvas drawImage() with source rectangle coordinates extracts the cropped region.

Free: 5 MB. PRO: unlimited.

Try Image Cropper →

4. AI Background Remover

This is the most technically interesting one. It runs a neural network (ISNet) entirely in-browser via ONNX Runtime Web with WebAssembly backend.

How it works:

  1. The ONNX model (~40 MB) downloads on first use and caches in browser storage
  2. Your image is preprocessed to 1024x1024
  3. The model runs inference in WebAssembly — ~5 seconds per image
  4. The alpha mask is applied to create a transparent PNG

No API key. No cloud credits. No server processing. Just your browser and a neural network.

Free: 720p output. PRO: full HD+, batch processing, background color replacement.

Try Background Remover →

5. Color Picker

Click a color on the color wheel, paste a hex code, or use the EyeDropper API to pick directly from your screen. Converts between HEX, RGB, and HSL in real-time.

Also saves color history to localStorage.

Try Color Picker →

Performance Comparison

Tool Free Limit Processing Time Output Quality
Image Compressor 5 MB ~1s Configurable
Image Resizer 5 MB < 1s Bilinear
Image Cropper 5 MB < 1s Lossless crop
Background Remover 720p ~5s per image AI neural network
Color Picker Unlimited Real-time N/A

Privacy First

These tools are genuinely private — not "privacy policy" private, but technically private:

  • No server receives your files (there is no server)
  • No analytics script tracks your usage
  • No cookies (except color history you choose to save)
  • Works offline after first load
  • View source to verify — it's just HTML and JS

One Key, All Tools

All 5 image tools are part of a 24-tool collection. The free versions have generous limits. A single PRO key ($19.99, one-time) removes all limits across every tool. No subscription.

Source code for everything is on GitHub — MIT license.


Previously: 7 Free PDF Tools That Never Upload Your Files

Top comments (0)