最近项目中使用阿里云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
网友评论