案例 09 · 多尺寸自适应营销图海报批量加水印与裁剪工具

【关键工具】 Bolt.new + HTML5 Canvas

【70% Vibe】

上传一张商品图，工具自动把它适配成小红书、朋友圈、淘宝主图等 5 种不同尺寸，还能智能识别画面留白、在合适的位置加上动态水印。对要一图多发的运营和电商来说，省下大量重复劳动。前端用 Bolt.new 搭界面，图像处理用浏览器原生的 HTML5 Canvas，不需要服务器。

【30% Engineering】

浏览器端处理图片，30% 全是"内存"和"画质"的硬仗。

首先是大图的内存溢出（OOM）。用户上传的可能是几千万像素的高清原图。在浏览器里同时加载、复制、处理好几张这样的大图，很容易耗尽内存导致页面崩溃。你需要控制处理流程，比如分批处理、及时释放不用的画布、必要时先压缩。

其次是 Canvas 导出高清图的失真问题。Canvas 默认按屏幕像素渲染，直接导出在高分屏上会模糊、在放大时会失真。要导出印刷级别的清晰图，需要正确处理设备像素比（devicePixelRatio）和导出分辨率。这是"看着清楚、导出来糊了"这类投诉的根源。