Skip to main content

自定义裁剪处理说明

图片自定义裁剪可以按坐标从原图中提取任意区域。本文介绍自定义裁剪的参数说明及使用示例。

以下例子中,默认原图均为:https://fanfan.s3.ladydaily.com/girl.jpeg

参数说明

相关参数总览

参数含义作用说明
rect指定裁剪坐标与长宽- 共4个值,均为数字,半角逗号隔开
- 参数分别为:x, y, w, h
- 如:0,0,500,500

用例说明

  • x、y:代表左上角的 x, y 轴坐标
  • w、h:与缩略图中的 w、h 含义相同,代表截取目标的 宽、高
演示:左上角顶边,截取原图 500 宽、500 高 的区域
处理逻辑示例

crop-mode-demo-1.png

加上参数后 URL:https://fanfan.s3.ladydaily.com/girl.jpeg? rect=0,0,500,500

girl.resize.jpg

演示:左上角顶边,截取原图 1000 宽、1000 高 的区域,同时,设定 w=500

由于 参数 rect 的优先级高于 w 和 h,于是:

  1. 所以系统会优先按照参数 rect=0,0,1000,1000 提取原图左上角开始的 1000 x 1000 区域图像;
  2. 然后将 1000 x 1000 的正方形图像按照参数 w=500 将 rect 处理结果缩略至 500 x 500;

所以:按照图片缩略逻辑单独设定 w=500,系统会按rect 结果图像的宽高比(而非原图的宽高比)自动设定缩略高度。

加上参数后 URL:https://fanfan.s3.ladydaily.com/girl.jpeg? rect=0,0,1000,1000 & w=500

girl.resize.jpg