我用 React + Canvas 做了一个在线图片工具，最先崩的不是服务器，而是浏览器

最初，我只是想做一个简单的图片压缩页面。

用户上传图片，Canvas 重新绘制，再调用 toBlob() 导出。几十行代码就能跑起来，看起来没什么难度。

直到我一次性拖入多张手机照片。

页面开始卡顿，内存持续上涨，预览出现空白，最后整个标签页直接失去响应。

我这才发现：浏览器能处理图片，不代表它能随便处理图片。

一张 10MB 的图片，进入浏览器后可能不止 10MB

图片文件大小是压缩后的体积。浏览器解码后，通常需要按像素保存 RGBA 数据。

一张 6000 × 4000 的照片，仅像素数据理论上就需要：

6000 × 4000 × 4 ≈ 91.6MB

如果同时保留原图、预览图、Canvas 和导出结果，实际占用还会继续增加。

因此，批量处理绝不能简单地写成：

awaitPromise.all(files.map(processImage));

图片一多，浏览器就可能同时解码所有文件，内存