可实现电商商品主图智能居中裁剪：先按目标宽高比（如1:1）计算原图居中裁剪区域（sx,sy,sw,sh），再用drawImage九参数一次性无变形填充至目标画布，最后导出JPEG格式标准图。
电商商品主图常需统一尺寸（如 800×800 像素正方形），但原始图宽高比各异。Canvas 本身不提供“一键居中裁剪”，但用 drawImage 的九参数形式，配合比例判断和坐标计算，就能稳定实现智能居中截取——核心是先按目标比例从原图中抠出一个居中的子区域，再无变形地填满目标画布。
明确目标尺寸与宽高比
商品主图通常要求固定宽高比（如 1:1、4:3 或 16:9）。以最常用的正方形（800×800）为例，目标宽高比为 1。这一步必须提前确定，它是后续所有计算的基准。
- 目标宽高比 = targetW / targetH（例如 800/800 = 1，600/400 = 1.5）
- 不要直接用显示容器尺寸（如缩略图 div 的宽高），而要用最终导出图的实际像素尺寸
- 若业务允许，可将目标比设为配置项，方便适配不同平台（淘宝/京东/小红书对主图比例要求略有差异）
计算居中裁剪区域（sx, sy, sw, sh）
关键在于：让裁剪出来的区域和目标尺寸保持相同宽高比，且尽可能保留原图主体（默认居中）。只需比较原图比和目标比：
- 若 img.width / img.height ≥ targetW / targetH（原图更宽或一样宽）→ 以高度为基准： sh = img.height；sw = img.height × (targetW / targetH)；sx = (img.width − sw) / 2；sy = 0
- 若 img.width / img.height < targetW / targetH（原图更高）→ 以宽度为基准： sw = img.width；sh = img.width / (targetW / targetH)；sx = 0；sy = (img.height − sh) / 2
这段逻辑确保无论原图是横版海报（1920×600）、竖版模特图（600×1200）还是手机截图（1125×2436），都能自动选出居中、等比、无拉伸的裁剪框。
立即学习“前端免费学习笔记（深入）”；
用 drawImage 一次性完成裁剪+绘制
拿到裁剪区域后，直接调用完整九参数 drawImage，把抠出的部分映射到目标画布上：
ctx.drawImage(img, sx, sy, sw, sh, 0, 0, targetW, targetH)- 前四个参数（sx/sy/sw/sh）是原图上的坐标和尺寸，不是 canvas 显示区域的坐标
- 后四个参数（0,0,targetW,targetH）表示在目标 canvas 上从左上角开始，铺满整个画布
- 因 sw/sh 与 targetW/targetH 比例一致，结果图不会被挤压或留白
导出为标准商品图格式
裁剪完成后，生成符合电商平台要求的图片数据：
- 用
toBlob(callback, 'image/jpeg', 0.9)导出 JPEG，兼顾清晰度与体积（电商主图一般不需透明通道） - 避免用
toDataURL，大图易触发内存警告或卡顿 - 导出前可选加一步：在新 canvas 上绘制白色背景（
ctx.fillStyle = '#fff'; ctx.fillRect(0,0,w,h)），防止 PNG 透明底在部分平台显示异常 - 文件名建议规范：如
product_main_800x800.jpg，便于后台识别和 CDN 缓存
