惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

GbyAI
GbyAI
阮一峰的网络日志
阮一峰的网络日志
G
Google Developers Blog
J
Java Code Geeks
Blog — PlanetScale
Blog — PlanetScale
大猫的无限游戏
大猫的无限游戏
云风的 BLOG
云风的 BLOG
Vercel News
Vercel News
L
LangChain Blog
Hugging Face - Blog
Hugging Face - Blog
T
The Blog of Author Tim Ferriss
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
Stack Overflow Blog
Stack Overflow Blog
P
Proofpoint News Feed
腾讯CDC
博客园_首页
博客园 - 聂微东
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
M
MIT News - Artificial intelligence
WordPress大学
WordPress大学
D
DataBreaches.Net
Microsoft Security Blog
Microsoft Security Blog
有赞技术团队
有赞技术团队
博客园 - 叶小钗

DEV Community

Authentication Security Deep Dive: From Brute Force to Salted Hashing (With Java Examples) Why AI Systems Don’t Fail — They Drift Spilling beans for how i learn for exam😁"Reinforcement Learning Cheat Sheet" I Replaced Chrome with Safari for AI Browser Automation. Here's What Broke (and What Finally Worked) How Python Borrows Other People's Work The $40 Architecture: Processing 1 Billion API Requests with 99.99% Uptime Vibe Coding: A Workflow Guide (From Zero to SaaS) Most webhook security guides protect the wrong side. The scary part is delivery. Headless CMS for TanStack Start: Build a Blog with Cosmic EU Age Verification App "Hacked in 2 Minutes" — What Actually Happened Comfy Cloud’s delete function does not actually remove files Running AI Models on GPU Cloud Servers: A Beginner Guide Event-driven media intelligence with AWS Step Functions and Bedrock I scored 500 AI prompts across 8 quality dimensions — here's what broke How to Call Google Gemini API from Next.js (Free Tier, No Backend Needed) The Portal Protocol: Reclaiming Human Connection in the Age of AI How to Fix Your Team's Scattered Knowledge Problem With a Self-Hosted Forum Intro to tc Cloud Functors: A Graph-First Mental Model for the Modern Cloud Designing Multi-Tenant Backends With Both Ownership and Team Access I Built a Neumorphic CSS Library with 77+ Components — Here's What I Learned PostgreSQL Performance Optimization: Why Connection Pooling Is Critical at Scale Cómo construí un SaaS multi-rubro para gestionar expensas en Argentina con FastAPI + Vue 3 🚀 I Built an Ethical Hacking Scanner Tool – Open Source Project I Replaced /usage and /context in Claude Code With a Single Statusline A Pythonic Way to Handle Emails (IMAP/SMTP) with Auto-Discovery and AI-Ready Design I Collected 8.9 Million Polymarket Price Points — Here's What I Found About How Markets Really Move EcoTrack AI — Carbon Footprint Tracker & Dashboard Everyone's Using AI. No One Agrees How. 5 self-hosted ebook managers worth trying in 2026 Building Your First AI Agent with LangChain: From Chatbot to Autonomous Assistant
5 Browser-Based Image Tools That Work Entirely Offline — ...
xueboyang1985 · 2026-05-31 · via DEV Community

xueboyang1985

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