十年前，在网页上编辑一张图，意味着上传它、等服务器干活、再下载结果。今天，一个浏览器可以压缩一张 30 MB 的照片、把 PNG 转成 WebP，或者批量改一堆图的尺寸，全程不联系任何服务器。让这个转变成为可能的，是两项技术：Canvas 和 WebAssembly。一旦你看清各自在做什么，它们都不神秘。
Canvas：一块能触到每个像素的画布
每个现代浏览器都自带 Canvas API——一个你可以用 JavaScript 在上面绘制的空白矩形。它对图片工具的真正威力不在于画形状，而在于 Canvas 让代码能直接访问一张图的每一个像素。
当你把一张照片加载进 canvas，浏览器交给你代码的是一串数字：每个像素的红、绿、蓝和 alpha（透明度）值。有了这个，常见操作就变得直接：
- 改尺寸就是把这张像素网格重新采样成更小或更大的一张。
- 裁剪就是把一块矩形区域复制到新的 canvas 上。
- 旋转和翻转是绘制前施加的几何变换。
- 格式转换发生在你导出 canvas 时——你要 JPEG、PNG 还是 WebP，浏览器就相应地编码这些像素。
所有这些都在你自己的设备上运行，用你的 CPU，条件允许时还用你的 GPU。没有任何东西被上传，因为像素从没离开过页面。这就是为什么 图片格式转换 能在你拖进一张 PNG 的瞬间就把它变成 WebP——没有往返服务器要等。
WebAssembly：在浏览器里跑出接近原生的速度
Canvas 搞定了常见变换，但有些活需要真正的算力——高质量 JPEG 编码、PNG 优化、跑一个 AI 模型去抠背景。光靠 JavaScript 可能太慢。这时 WebAssembly（常简称 Wasm）就登场了。
WebAssembly 是一种紧凑的低层格式，浏览器能以接近原生的速度执行它。开发者拿那些用 C、C++、Rust 等语言写的、久经考验的高速代码——正是驱动桌面图像软件的同一批库——把它编译成 Wasm。浏览器随后在一个紧凑的沙盒环境里运行这段代码，比等价的 JavaScript 快得多。
实际上这意味着，一个浏览器标签页现在能干过去得靠服务器或桌面软件才能干的活：用专业级压缩编码图片、剥离元数据，或跑一个神经网络去背景——全部在本地。
为什么本地处理既私密又快
把 Canvas 和 WebAssembly 放到一起，好处自然就出来了。
隐私是结构性的，不是一句承诺。因为像素留在页面里，处理在你的 CPU 上跑，根本没有上传这一步。没有你文件的服务器副本可存储、可记录、可缓存、可拿去训练——因为文件从没被传输过。你不必信任一份隐私政策；打开飞行模式、看着工具照常运行，你就能亲自验证。
速度来自把网络整个砍掉。服务器工具最慢的一步通常是把你的文件传上去再传下来。去掉它，一张 40 MB 的照片处理起来和一张 40 KB 的差不多快。也没有排队——你的设备只处理你这一张图，不是别人成千上万张。
还有个多数人想不到的附加好处：因为整个工具不过是代码和资源，浏览器可以把它缓存下来。IMG.DIY 是带 service worker 的 PWA，所以第一次访问之后，工具就存在你的设备上，能离线继续工作——在飞行模式、在飞机上、在任何地方。压缩和转换完全不需要联网。
老实说，也有取舍
浏览器内处理不是魔法，也并非没有限制。特别大的批量可能会撑爆低端手机的内存，因为活用的是你设备的资源，不是数据中心的。还有少数功能确实需要联网——任何调用外部服务的功能，比如页面速度检测，都无法离线运行。去背景是个中间情况：它在本地跑，但要先下载一次模型文件。
不过对日常那些活——压缩、转换、改尺寸、裁剪、旋转——浏览器如今已是一个完整、私密、快速的图片工作台，只不过它恰好住在一个标签页里。不上传、无服务器、不等待。