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

📅 2026/7/30 19:51:20
我用 React + Canvas 做了一个在线图片工具,最先崩的不是服务器,而是浏览器
最初,我只是想做一个简单的图片压缩页面。用户上传图片,Canvas 重新绘制,再调用 toBlob() 导出。几十行代码就能跑起来,看起来没什么难度。直到我一次性拖入多张手机照片。页面开始卡顿,内存持续上涨,预览出现空白,最后整个标签页直接失去响应。我这才发现:浏览器能处理图片,不代表它能随便处理图片。一张 10MB 的图片,进入浏览器后可能不止 10MB图片文件大小是压缩后的体积。浏览器解码后,通常需要按像素保存 RGBA 数据。一张 6000 × 4000 的照片,仅像素数据理论上就需要:6000 × 4000 × 4 ≈ 91.6MB如果同时保留原图、预览图、Canvas 和导出结果,实际占用还会继续增加。因此,批量处理绝不能简单地写成:awaitPromise.all(files.map(processImage));图片一多,浏览器就可能同时解码所有文件,内存