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

📅 2026/7/30 20:07:33 👁️ 阅读次数 📝 编程学习
我用 React + Canvas 做了一个在线图片工具,最先崩的不是服务器,而是浏览器

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

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

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

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

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

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

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

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

6000 × 4000 × 4 ≈ 91.6MB

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

因此,批量处理绝不能简单地写成:

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

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