如何使用自定义坐标/比例实现Cloudinary图片裁剪变换？

核心概念澄清 #

Cloudinary的gravity（定位）参数决定裁剪时的参考原点与焦点方向，g_custom并非官方支持的自定义定位用法，你之前的尝试错误源于对该参数的误解。正确的自定义定位需要结合g_north_west（以原图左上角为原点）和偏移参数x/y实现。

正确的URL构造方案 #

根据你获取的Left/Top（裁剪区域左上角相对于原图的比例）或X/Y（裁剪区域中心比例），分两种场景构造URL：

场景1：已获取裁剪区域左上角的比例（Left/Top）

假设你得到的参数为：

• 水平偏移比例：left_ratio = 0.2（裁剪区域左上角位于原图宽度的20%位置）
• 垂直偏移比例：top_ratio = 0.3（裁剪区域左上角位于原图高度的30%位置）
• 目标裁剪尺寸：300×300像素

对应的Cloudinary URL：

https://res.cloudinary.com/demo/image/upload/g_north_west,x_0.2,y_0.3,c_crop,w_300,h_300/sample.jpg

场景2：已获取裁剪区域中心的比例（X/Y）

若你得到的是中心坐标比例，需先计算裁剪区域左上角的偏移量：
假设参数为：

• 中心水平比例：center_x = 0.5
• 中心垂直比例：center_y = 0.5
• 裁剪区域相对于原图的宽度比例：crop_w_ratio = 0.5
• 裁剪区域相对于原图的高度比例：crop_h_ratio = 0.5

计算左上角偏移：

left_ratio = center_x - (crop_w_ratio / 2) = 0.5 - 0.25 = 0.25
top_ratio = center_y - (crop_h_ratio / 2) = 0.5 - 0.25 = 0.25

对应的URL（裁剪原图中间50%区域）：

https://res.cloudinary.com/demo/image/upload/g_north_west,x_0.25,y_0.25,c_crop,w_0.5,h_0.5/sample.jpg

关键参数说明 #

• g_north_west：将裁剪参考原点设为原图左上角，与前端绝对定位的坐标逻辑完全匹配（前端left/top通常以父元素左上角为基准）。
• x_<比例>/y_<比例>：指定裁剪区域左上角相对于原点的偏移比例（小数形式，0代表原点，1代表原图最右侧/最底部）。
• c_crop：执行裁剪操作，后续的w_<值>/h_<值>可以是固定像素（如w_300）或原图比例（如w_0.5）。

纠正你之前的错误尝试 #

1. g_custom:0.5:0.5属于无效格式，Cloudinary不支持该写法。
2. g_custom:face实际调用的是面部识别定位（等同于g_face），并非自定义坐标。
3. 第三个URL的问题在于误用g_custom，替换为g_north_west后，x/y参数即可正常生效。

内容的提问来源于stack exchange，提问作者Andrew Marabante