image.transform 裁切方向总是不对怎么调
现象#
传 transform: { maxWidth: 400, maxHeight: 800, crop: LEFT } 想裁掉右边,返回的图却从顶部截,商品主体被切掉一半,换 CENTER 也没有变化。
原因#
- crop 的方向由较小的那条边决定,maxWidth 更小才是左右裁,maxHeight 更小才是上下裁
- crop 必须与不相等的 maxWidth、maxHeight 一起用,两边相等时会被忽略
- maxWidth 与 maxHeight 的合法范围是 1 到 5760,超限会被当成无效参数静默忽略
- 同一个 URL 可能已被 CDN 缓存,改了参数但请求仍命中旧对象
处理步骤#
- 先用
maxWidth: 400, maxHeight: 400, crop: CENTER确认基础裁切生效 - 要左右裁时让
maxWidth小于 maxHeight,方向取LEFT或 RIGHT - 要上下裁时反过来让 maxHeight 更小,方向取
TOP或 BOTTOM - 需要高清图时加
scale: 2,取值只能是 1 到 3 - 改完在无痕窗口打开返回的 URL,核对图片实际宽高
验收标准#
返回图片的宽高与 transform 计算值一致,主体位置符合所选 crop 方向,重复请求得到同一个 URL。
本文由 风格技术 技术团队整理,适用于 Shopify 标准版与 Plus 店铺。Shopify 平台能力迭代较快,具体操作路径与字段以官方文档和店铺后台实际版本为准。