商品图适配独立站版位：一个不拉伸主体的 Canvas 裁切函数

　　商品图适配独立站不同版位，可以用 Canvas 的等比 cover 裁切，避免直接拉伸主体。程序先求出源图取样矩形，再将这块区域绘到目标画布。它保持比例，但会裁掉部分原图，所以还需要锚点选择与商品边界检查，不能把数学正确等同于版位合格。

　　假设横图要进入方形商品卡，直接把宽高设为方形会改变商品比例。cover 则放大到能覆盖目标区域，再裁去多余部分；默认中心适合部分画面，但主体靠边时可能被切掉。独立站版位的任务与商品位置决定锚点，不由一个固定公式替用户判断。

先计算取样矩形，再绘制

　　cropRect 接收源宽高、目标宽高与两个0到1的锚点。缩放取较大比值，使目标区域被完整覆盖；源区域的宽高按同一个缩放比例反推。drawImage 的九参数形式指定源取样与目标位置，能够将裁切和缩放清楚分开。[1]

export function cropRect(sw,sh,tw,th,ax=0.5,ay=0.5) {
  if (![sw,sh,tw,th].every(v=>Number.isFinite(v)&&v>0)) throw Error('size');
  if (![ax,ay].every(v=>Number.isFinite(v)&&v>=0&&v<=1)) throw Error('anchor');
  const scale=Math.max(tw/sw,th/sh), w=tw/scale, h=th/scale;
  return { x:(sw-w)*ax, y:(sh-h)*ay, w, h };
}
export function drawCrop(canvas,img,tw,th,ax=0.5,ay=0.5) {
  if (![tw,th].every(v=>Number.isInteger(v)&&v>0)) throw Error('canvas size');
  const r=cropRect(img.naturalWidth,img.naturalHeight,tw,th,ax,ay);
  canvas.width=tw; canvas.height=th;
  canvas.getContext('2d').drawImage(img,r.x,r.y,r.w,r.h,0,0,tw,th);
  return r;
}

　　代码放入 .mjs 模块，通过本地静态服务在浏览器导入。图片完成 decode 后再传入 drawCrop，目标画布宽高必须为正整数。ax为0偏向左侧，1偏向右侧；ay同理控制上下。它们选择取样区域的位置，不负责识别主体，也不判断哪种构图最适合商品。

验证方形裁切与失败输入

　　本次使用宽200、高100的纯色图生成100乘100画布，默认取样矩形为 x50、y0、宽100、高100。Edge 无头浏览器实际完成绘制，几何断言确认宽高使用同一缩放。零尺寸和超出范围锚点被拒绝。这些结果只验证最小实现，不是平台规格测试。

　　公式没有拉伸，但裁掉的部分仍可能是把手、接口或规格文字。应先拿无文案的已验收底图做版位适配，再安排该版位文案，而不是让旧文字随整图裁切。即使底图没有文字，也要对照主体边界检查，保持比例只是必要条件之一。

　　跨域图片可能限制画布导出，调用者需要有相应图像使用与加载条件。演示验证采用本地数据图，未验证任意网络素材；失败时记录加载或导出原因，不用去掉错误捕获让任务继续产生空白文件。较大画布也应限制资源占用，不能无限按用户输入分配。

　　Picset 公开产品入口可以作为制作底图的候选来源，[2] 本文的裁切函数独立于它的界面，不声称产品已内置此算法。输入来源、SKU与版本由上游提供，输出保存版位与裁切锚点，之后复查能够知道为什么同一主体在不同文件里呈现不同区域。

　　发布前在真实容器里预览，而不是只看画布本身。组件的二次裁切、文字覆盖和小屏展示可能继续影响主体；这些条件需要实际检查。等比裁切让程序不主动改比例，商品验收与版位预览则负责它无法理解的重要信息。

　　裁切锚点应随输出记录保存。以后更换版位时重新计算并预览，不把上一次的中心裁切永久复用；如果必要结构无论怎样移动锚点都放不下，就换构图或采用留白。