图片调整技术

前几天看到NSHisper上的一篇关于图片缩放的文章挺好,到中文版上找对应的中文版本看,没有找到。索性就自己翻译一下。下面是原文地址:

http://nshipster.com/image-resizing/

翻译如下:

自iOS出现以来,iOS开发者一直被一个问题所困扰:“如何调整一张图片”,在开发者和平台相互不信任的刺激下,这个问题变得含糊不清。在搜索出的一千条垃圾代码样例里,每一个都自称是正确的答案,而其他的是假先知。

这是令人尴尬的,真的。

本周的文章努力对在iOS上调整图片的多种方式做出清晰解释(在OS X,需要一个UImage到NSImage适当的转换),用事实证明每种方式的性能特征,而不是简单的适用于所有情况的任何一种方式。

在进一步阅读之前,请注意下面的这段话:

当设置UIImageView的Image, 对绝大多数的用例来手动调整图片是没有必要的。相反,可以简单的设置contentMode属性,无论是.ScaleAspectFit 来确保整个图片可以在UIImageView中都看得到,或者是设置.ScaleAspectFill,根据需要从中心来裁剪图片,来确保图片填充在UIImageView里。

imageView.contentMode = .ScaleAspectFit 
imageView.image = image

确定缩放尺寸

在做图片调整之前,首先一个必须要决定的目标是要缩放的尺寸。

0.通过系数缩放

缩放图片最简单的一种方式,是通过常量系数。通常,这个调用是除以一个整数,来减少原始尺寸(而不是乘以一个整数来放大)

新的尺寸可以通过单独缩放宽度和高度组件来计算。

let size = CGSize(width: image.size.width / 2, height: image.size.height / 2)  

...或者通过运用CGAffineTransform:
let size = CGSizeApplyAffineTransform(image.size, CGAffineTransformMakeScale(0.5, 0.5))  

1.通过长宽比缩放

这样常常有用来缩放原始尺寸用这种方式,来适应一个矩形不用改变原始长宽比。AVFoundation框架中的AVMakeRectWithAspectRatioInsideRect是一个有用的函数,负责为你计算:

import AVFoundation
let rect = AVMakeRectWithAspectRatioInsideRect(image.size, imageView.bounds)

缩放图片

有许多不同的方式来缩放图片,每一种具有不同的能力和性能特征

0.UIGraphicsBeginImageContextWithOptions & UIImage -drawInRect:

在UIKIt框架中可以发现高级的图片调整API。提供一个UIImage对象,一个临时图形上下文,用来渲染一个缩放版本,使用UIGraphicBeginImageContextWithOptions() 和 UIGraphicsGetImageFromCurrentImageContext():

let image = UIImage(contentsOfFile: self.URL.absoluteString!)

let size = CGSizeApplyAffineTransform(image.size, CGAffineTransformMakeScale(0.5, 0.5))
let hasAlpha = false
let scale: CGFloat = 0.0 // Automatically use scale factor of main screen

UIGraphicsBeginImageContextWithOptions(size, !hasAlpha, scale)
image.drawInRect(CGRect(origin: CGPointZero, size: size))

let scaledImage = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()

UIGraphicsBeginImageContextWithOptions()创建一个临时渲染上下文,在这上面绘制原始图片。第一个参数,size,是缩放图片的尺寸,第二个参数,isOpaque 是用来决定透明通道是否被渲染。对没有透明度的图片设置这个参数为false,可能导致图片有粉红色调。第三个参数scale是显示缩放系数。当设置成0.0,主屏幕的缩放系数将被使用,对视网膜屏显示是2.0或者更高(在iPhone6 Plus 上是 3.0)

1.CGBitmapContextCreate & CGContextDrawImage

Core Graphic/Quartz 2D 提供了一个底层的API集合,可以提供更高级的配置。提供一个CGImage对象,一个临时位图上下文,用来渲染缩放的图片,使用CGBitmapContextCreate()和CGBitmapContextCreateImage():

let cgImage = UIImage(contentsOfFile: self.URL.absoluteString!).CGImage

let width = CGImageGetWidth(cgImage) / 2
let height = CGImageGetHeight(cgImage) / 2
let bitsPerComponent = CGImageGetBitsPerComponent(cgImage)
let bytesPerRow = CGImageGetBytesPerRow(cgImage)
let colorSpace = CGImageGetColorSpace(cgImage)
let bitmapInfo = CGImageGetBitmapInfo(cgImage)

let context = CGBitmapContextCreate(nil, width, height, bitsPerComponent, bytesPerRow, colorSpace, bitmapInfo.rawValue)

CGContextSetInterpolationQuality(context, kCGInterpolationHigh)

CGContextDrawImage(context, CGRect(origin: CGPointZero, size: CGSize(width: CGFloat(width), height: CGFloat(height))), cgImage)

let scaledImage = CGBitmapContextCreateImage(context).flatMap { UIImage(CGImage: $0 }

CGBitmapContextCreate需要几个参数来构建上下文,期望的尺寸和每个给定色彩空间内部的信道。在这个例子中,这些值从 CGImage中获取。下一步,CGContextSetInterpolationQuality允许上下文在各个保真度等级插入像素。在这个例子中,传递kCGInterpolationHigh参数用来获得最优的结果。CGContextDrawImage允许在制定的尺寸和位置上画图,允许在特定边缘或者适应一组图片特征比如faces,裁剪图片。最终,CGBitmapContextCreateImage从上下文中创建CGImage

2.CGImageSourceCreateThumbnailAtIndex

Image I/O是一个强大,也是一个很少知道可以用来处理图片的框架。依赖Core Graphic,它可以在许多不同格式下读写,访问图片媒体,执行通用图片处理。在这个平台上框架提供了快速编解码图片,高级缓存机制和快速加载图片能力。

CGImageSourceCreateThumbnailtIndex提供了一个简介的AP,比同样的Core Graphics调用有不同的选项:

import ImageIO

if let imageSource = CGImageSourceCreateWithURL(self.URL, nil) {
    let options: CFDictionary = [
        kCGImageSourceThumbnailMaxPixelSize: max(size.width, size.height) / 2.0,
        kCGImageSourceCreateThumbnailFromImageIfAbsent: true
    ]

    let scaledImage = CGImageSourceCreateThumbnailAtIndex(imageSource, 0, options).flatMap { UIImage(CGImage: $0) }
}

提供了CGImageSource和一组选项,CGImageSourceCreateThumbnailAtIndex创建一个缩略图。调整是通过kCGImageSourceThumbnailMaxPixelSize完成。指定最大的尺寸初一一个常量系数来缩放图片,同时保持原始的长宽比。通过指定不论是kCGImageSourceCreateThumbnailFromImageIfAbsent或者kCGImageSourceCreateThumbnailFromImageAlways,后续调用,Image I/O将自动缓存缩放的结果。

3.Core Image Lanczos 采样

Core Image 提供一个使用CILanczosScaleTransform滤镜内置的Lanczos 采样函数。虽然是比UIKit更高级的API,在Core Image普及的使用KVC,使他用起来比较笨拙。

这就是说,设计模式是一致的。创建变换滤镜,配置和渲染输出图片的过程就像是其他Core Image流程:

let image = CIImage(contentsOfURL: self.URL)

let filter = CIFilter(name: "CILanczosScaleTransform")
filter.setValue(image, forKey: "inputImage")
filter.setValue(0.5, forKey: "inputScale")
filter.setValue(1.0, forKey: "inputAspectRatio")
let outputImage = filter.valueForKey("outputImage") as CIImage

let context = CIContext(options: nil)
let scaledImage = UIImage(CGImage: self.context.createCGImage(outputImage, fromRect: outputImage.extent()))

CILanczosScaleTransform接受inputImage,InputScale,和inputAspectRatio,所有的这些不言自明。CIContext通过CGImageRef间接表示方式,被用来创建UIImage,既然UIImage(CIImage:)不像预期那样经常工作。

性能测试

那么,如何让这些不同途径组合成另一个?

这里有一组在运行iOS 8.0GM的iPod Touch(第五代)性能测试结果,使用XCTestCase.measureBlock():

JPEG

缩放一个来自NASA Visible Earth,大的,高分辨率(12000 * 12000 px 20 MB JPEG)原图片。

JPEG

PNG

缩放一个相当大(1024 * 1024 px 1MB PNG)来渲染,即Postgres.app的应用Icon 所方程成0.1倍尺寸:

PNG

结论

UIKit,Core Graphic 和Image I/O 对大多数图片缩放操作表现良好

Core Image优于图片缩放操作。实际上,在这篇文章里特别推荐使用Core Graphic或者 Image I/O
函数来对图片缩放或者原先采样

对不需要额外功能的一般图片缩放,UIGraphicsBiginImageContextWithOptions可能是最好的选项

如果图片质量是一个考虑,考虑使用CGBitmapContextCreate与CGContextSetInterpolationQuality组合方式

当以显示缩略图为目的的缩放图片,CGImageSourceCreateThumbnailAtIndex提供了一个对图片渲染和缓存的完整解决方式

注明:

第一次翻译整篇文章,有些地方,翻译的有点粗糙,不明白的地方请参照原文

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,911评论 5 460
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 82,014评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 142,129评论 0 320
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,283评论 1 264
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,159评论 4 357
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,161评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,565评论 3 382
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,251评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,531评论 1 292
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,619评论 2 310
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,383评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,255评论 3 313
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,624评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,916评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,199评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,553评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,756评论 2 335

推荐阅读更多精彩内容