Shopify Storefront API

image.transform 裁切方向总是不对怎么调

现象#

传 transform: { maxWidth: 400, maxHeight: 800, crop: LEFT } 想裁掉右边,返回的图却从顶部截,商品主体被切掉一半,换 CENTER 也没有变化。

原因#

  • crop 的方向由较小的那条边决定,maxWidth 更小才是左右裁,maxHeight 更小才是上下裁
  • crop 必须与不相等的 maxWidth、maxHeight 一起用,两边相等时会被忽略
  • maxWidth 与 maxHeight 的合法范围是 1 到 5760,超限会被当成无效参数静默忽略
  • 同一个 URL 可能已被 CDN 缓存,改了参数但请求仍命中旧对象

处理步骤#

  1. 先用 maxWidth: 400, maxHeight: 400, crop: CENTER 确认基础裁切生效
  2. 要左右裁时让 maxWidth 小于 maxHeight,方向取 LEFT 或 RIGHT
  3. 要上下裁时反过来让 maxHeight 更小,方向取 TOP 或 BOTTOM
  4. 需要高清图时加 scale: 2,取值只能是 1 到 3
  5. 改完在无痕窗口打开返回的 URL,核对图片实际宽高

验收标准#

返回图片的宽高与 transform 计算值一致,主体位置符合所选 crop 方向,重复请求得到同一个 URL。

本文由 风格技术 技术团队整理,适用于 Shopify 标准版与 Plus 店铺。Shopify 平台能力迭代较快,具体操作路径与字段以官方文档和店铺后台实际版本为准。