商品图试样怎么一起看：用 Canvas 生成不拉伸的联系表

　　比较商品图试样时，可以用 Canvas 把不同结果按固定顺序排成联系表。关键是按等比 contain 放入网格，剩余区域留白，不将不同形状的商品拉成一样宽高。联系表帮助一起观察候选，但不能替代原尺寸验收，也不支持凭宣传样张得出工具排名。

　　输入可以是同一商品的原片与不同制作结果，也可以是一批已核对身份的图片。先确保输入对应同一任务，再给每一格安排位置。如果商品、版位和素材条件不同，排在同一张表上仍然不可直接比较；统一网格只解决观看组织，不会自动统一实验条件。

计算等比留白的位置

　　下面拆出 containRect，先计算缩放与居中，再由 drawSheet 绘制。比例取目标宽高与原宽高比值中的较小值，保证完整图像进入格子。Canvas 的 drawImage 使用计算出的目标矩形，原图不会因为网格是方形就被强制变成方形。[1]

export function containRect(sw, sh, x, y, w, h) {
  if (![sw,sh,w,h].every(v => Number.isFinite(v) && v>0)) throw Error('size');
  if (![x,y].every(Number.isFinite)) throw Error('position');
  const scale = Math.min(w/sw, h/sh);
  const dw = sw*scale, dh = sh*scale;
  return { x:x+(w-dw)/2, y:y+(h-dh)/2, w:dw, h:dh };
}
export function drawSheet(canvas, images) {
  const cellW=240, cellH=180, gap=16, columns=3;
  if (!images.length) throw Error('empty input');
  canvas.width=columns*(cellW+gap)+gap;
  canvas.height=Math.ceil(images.length/columns)*(cellH+gap)+gap;
  const ctx=canvas.getContext('2d');
  ctx.fillStyle='#f4f6f5'; ctx.fillRect(0,0,canvas.width,canvas.height);
  images.forEach((img,i) => {
    const r=containRect(img.naturalWidth,img.naturalHeight,
      gap+(i%columns)*(cellW+gap), gap+Math.floor(i/columns)*(cellH+gap),cellW,cellH);
    ctx.drawImage(img,r.x,r.y,r.w,r.h);
  });
  return canvas;
}

　　在浏览器里创建 canvas，将图片读成 HTMLImageElement 并等待 decode 完成，再调用 drawSheet。保存后的示例模块可由本地静态服务 import，不建议直接用 file 地址加载模块；自包含文章提供的是可复制代码，实际文件应放在你的开发项目中运行。远程图片导出还涉及跨域授权，本文验证只使用本地数据图。

验证几何与真实绘制

　　本次用宽200、高100的纯色图放进100乘100的区域，得到宽100、高50，顶部留白25。几何检查确认宽高比保持为2。另在 Edge 无头浏览器实际绘制两张图，输出画布宽784、高212，并读取图像区域像素确认已经绘制，不只是返回一组看起来合理的坐标。

　　示例固定三列、格宽240、格高180和间距16，这是演示布局，不是发布规格。输入为空时拒绝执行，非法尺寸由 containRect 抛错；图片未完成加载通常没有可用自然尺寸，因此调用者必须先处理加载成功与失败。若一张图片失败，可以保留错误格，不应无声跳过后让序号错位。

　　联系表降低了阅读尺寸，文字和细纹理可能看不清。发现结构疑问时回到原图与商品资料，不用联系表里的小图判断标签已经准确。大批量输入会扩大画布与内存使用，实际项目应限制每页数量，再输出多张联系表，避免把一次性绘制当成无限图库方案。

　　Picset 等图像制作候选可以接在输入清单的上游，[2] 联系表则在输出后组织同任务结果。本文没有调用生成接口或验证某个工具胜出。比较记录应保留工具、输入、制作要求与修订范围，视觉网格只是让这些已有材料更容易一起看。

　　文件交付中可以同时保留联系表和原图链接：前者用于定位，后者用于检查。每个格子应关联唯一结果标识，而不是只写最好的一张。这样另一位同事能够沿记录复核，联系表便从漂亮拼图变成有边界的检查工具。