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

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

一 OSSImageMaker 简单介绍

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

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

三 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我, 欢迎各位提出修正意见