多平台尺寸裁切是怎么实现的

TL;DR：多平台尺寸裁切把同一张图按四家电商/自媒体平台的规格一键裁出全套：淘宝主图（1:1，最长边 800px）、淘宝详情页（750:900，宽 750px）、抖音封面（3:4）、小红书笔记（3:4）。单文件 ≤20MB，多张结果自动打包 ZIP。

⏱️ 30 秒上手

1. 打开 tools.guangmin.top/tools/crop_platform；
2. 选目标平台（可多选），拖入商品图/封面图（≤9 张）；
3. 每张图在预览框里调整裁切区域（拖动定位、保证主体在框内）；
4. 一键裁切 → 单张点下载，或多张自动打包成 ZIP。

🔧 它是怎么实现的

三个实现要点：

1. 规格表是唯一事实源：四家平台的名称、比例、输出上限集中在 shared 的 CROP_PLATFORMS 常量（如 { key: 'taobao_main', ratio: 1, maxWidth: 800 }）——页面菜单、裁切约束、输出尺寸全读它。平台改规格时改一个文件；
2. 比例约束 + 位置自由：用户拖动的裁切框比例被锁死（只能移动/缩放，不能改变比例）——这保证输出一定符合平台要求，把「裁错比例返工」的可能从交互上消灭；
3. 降采样保护：裁切结果若超出平台宽度上限（如淘宝主图 800px），按最长边等比缩小后再输出，避免「传上去被平台二次压缩变糊」。

📏 边界与限制

🔗 延伸阅读

• Canvas 同源应用：图片压缩
• ZIP 打包引擎：文件打包压缩