背景
整理竞品素材时,详情页里的图片分散在 img、懒加载的 data-src、甚至 CSS 背景图里,右键另存为一次只能存一张。
我的角色
从需求拆解、架构设计到全部代码实现,包括内容脚本、Service Worker 与图片库页面。
关键难点
- 懒加载图片必须先滚动到视口才会真正请求;
- 缩略图与原图的尺寸不同,按当前尺寸过滤会误杀 800×800 的真图;
- 跨域图片不能直接画进页面 canvas,只能放到 Service Worker 里转码。
结果
单页 50 张图从「10 分钟手工右键」变成「点一次按钮、勾选、导出」,导出的 PNG 自动编号为 商品图_001.png。