OSS图片云存储,缩放处理方法终结者

最近项目中使用阿里云OSS云存储解决方案来处理图片, 根据需要, 需要在OSS图片的全路径URL上拼接缩放等参数, 来限定在不同手机机型上面的显示大小和清晰度, 为此, 我们暂且封装了OSS图片存储缩放处理的几个方法, 上传到cocoapods 公共库,方便调用

一 OSSImageMaker 简单介绍

• 采用链式调用, 调用更简单
• 目前仅仅实现了Resize图片的缩放
• 根据iOS不同设备自动转换@2x和@3x的计算, 比如Frame 100 * 200 的imageView, 经过处理后会返回一张 在2x屏的图片为: 200* 400 px大小, 3x屏返回 300 * 600px 大小

二 OSSImageMaker 涉及的处理参数和属性对照

OSSImageMaker	阿里云	描述	取值范围
contentModel	m	指定缩略的模式：lfit：等比缩放，限制在设定在指定w与h的矩形内的最大图片。mfit：等比缩放，延伸出指定w与h的矩形框外的最小图片。fill：固定宽高，将延伸出指定w与h的矩形框外的最小图片进行居中裁剪。pad：固定宽高，缩略填充fixed：固定宽高，强制缩略	[lfit,mfit,fill,pad,fixed]，默认为lfit
width	w	指定目标缩略图的宽度。	1-4096
height	h	指定目标缩略图的高度。	1-4096
limit	limit	指定当目标缩略图大于原图时是否处理。值是 1 表示不处理；值是 0 表示处理。	0/1, 默认是 1
equalRatioScale	p	倍数百分比。 小于100，即是缩小，大于100即是放大。	1-1000
screenWidthToHeightScale(自定义)	无	宽高比 屏幕宽 根据传入的比例依据屏幕宽计算高度 高度 screenWidthToHeightScale = ScreenWidth * 1.0 / ScreenHeight	宽高比的值
widthToHeightScale(自定义)	无	普通宽高比 根据指定宽和指定比例计算设置高度 比例 = width / height 限制条件 必须 先配置 width的大小	宽高比的值
heightToWidthScale(自定义)	无	普通宽高比 根据指定高和指定比例计算设置宽度 width / height限制条件 必须先 配置 height的大小;	宽高比的值
resultString(自定义)	无	最终结果值, 调用完OSSImageMaker, 需要调用resultString, 取出已经修改过的图片URL	返回一个e.g http://jyjf-test.oss-cn-hangzhou.aliyuncs.com/cms/201706/1a63a8cf9a5043999b53df72fdafc124.png?x-oss-process=image/resize,w_200,h_400,m_pad,limit_0

三 Resize(图片缩放使用范例)

• 一下示例使用的图片是张图片宽度 1125 高度 375 的 @3x 的png 图片放在 OSS上面
• URL: http://jyjf-test.oss-cn-hangzhou.aliyuncs.com/cms/201706/1a63a8cf9a5043999b53df72fdafc124.png

1. 单边缩放

1.png

  //将图缩略成高度为100，宽度按比例处理。
  //因为OSSImageMaker 内置转换了 2x 和3x 所以图片的质量转换后 2x 高度200px 2x 高度 300px
  NSString *str = @"http://jyjf-test.oss-cn-hangzhou.aliyuncs.com/cms/201706/1a63a8cf9a5043999b53df72fdafc124.png";
  NSString *oss_url = str.maker.resize.width(@100).resultString;
  

2. 强制宽高缩略

2.png

//强制缩略宽高 contentModel 为 fiexd
   // frame 宽高 100 则 2x和3x 分别为 200 和 300px
   NSString *str = @"http://jyjf-test.oss-cn-hangzhou.aliyuncs.com/cms/201706/1a63a8cf9a5043999b53df72fdafc124.png";
   NSString *oss_url = str.maker.resize.width(@100).height(@100)

3. 等比缩放, 限定在矩形框内

3.png

//将图缩略成宽度为100，高度为100，按长边优先 contentModel 为lift
   // frame 宽高 100 则 2x和3x 分别为 200 和 300px
   NSString *str = @"http://jyjf-test.oss-cn-hangzhou.aliyuncs.com/cms/201706/1a63a8cf9a5043999b53df72fdafc124.png";
   NSString *oss_url = str.maker.resize.width(@100).height(@100).contentModel(@(OSSImageResizeContentModelTypeLfit)).resultString;

4. 等比缩放, 限定在矩形框内 短边优先

4.png

//将图缩略成宽度为100，高度为100，短边优先 contentModel 为mfit
    // frame 宽高 100 则 2x和3x 分别为 200 和 300px
    NSString *str = @"http://jyjf-test.oss-cn-hangzhou.aliyuncs.com/cms/201706/1a63a8cf9a5043999b53df72fdafc124.png";
    NSString *oss_url = str.maker.resize.width(@100).height(@100).contentModel(@(OSSImageResizeContentModelTypeMfit)).resultString;

5. 固定宽高，自动裁剪

5.png

//将图缩略成宽度为100，高度为100，contentModel 为fill
    // frame 宽高 100 则 2x和3x 分别为 200 和 300px
    NSString *str = @"http://jyjf-test.oss-cn-hangzhou.aliyuncs.com/cms/201706/1a63a8cf9a5043999b53df72fdafc124.png";
    NSString *oss_url = str.maker.resize.width(@100).height(@100).contentModel(@(OSSImageResizeContentModelTypeFill)).resultString;

6. 缩略填充

6.png

//将图按短边缩略到100x100, 然后按红色填充 contentModel pad 模式
    // frame 宽高 100 则 2x和3x 分别为 200 和 300px
    NSString *str = @"http://jyjf-test.oss-cn-hangzhou.aliyuncs.com/cms/201706/1a63a8cf9a5043999b53df72fdafc124.png";
    NSString *oss_url = str.maker.resize.width(@100).height(@100).contentModel(@(OSSImageResizeContentModelTypePad)).color(@"ff0000").resultString;

7. 按比例缩略

7.png

NSString *str = @"http://jyjf-test.oss-cn-hangzhou.aliyuncs.com/cms/201706/1a63a8cf9a5043999b53df72fdafc124.png";
    NSString *oss_url = str.maker.resize.equalRatioScale(@10).resultString;

四 使用

• Pod管理

pod "OSSImageMaker"

如果出现 无法找到

!] Unable to find a pod with name, author, summary, or descriptionmatching `OSSImageMaker`

请执行以下命令

pod repo update

rm ~/Library/Caches/CocoaPods/search_index.json

pod search OSSImageMaker

• 如需看详情内容请移步GitHub, 里面含有demo
• 因为刚完成不久, 可能存在很多纰漏如有问题, 请issue我, 欢迎各位提出修正意见