9 Browser-Based Image Tools, One Architecture: Canvas API, WebAssembly, and Zero Uploads

9 Browser-Based Image Tools, One Architecture: Canvas API, WebAssembly, and Zero Uploads I built 9 image tools for UltimateTools — compress, convert, resize, crop, rotate, blur, watermark, HTML-to-image, and YouTube thumbnail downloader. Every tool runs entirely in the browser. No server processing, no file uploads, no temporary storage. Here's the architecture that makes this work, and the specific browser APIs behind each tool. The shared foundation Every image tool follows the same pipeline: File input (drag-and-drop or file picker) ↓ Load into HTMLImageElement or Canvas ↓ Transform (tool-specific logic) ↓ Export as Blob (toBlob / toDataURL) ↓ Download (createObjectURL → anchor click) The loading and downloading code is shared. What changes per tool is the transform step. Loading images const loadImage = ( file : File ): Promise < HTMLImageElement > => { return new Promise (( resolve , reject ) => { const img = new Image (); img . onload = () => resolve ( img ); img . onerror = reje