iOS中5種圖片縮略技術及性能的深入探討

2019-10-21 18:40:53

字體：大中小

來源：轉載

供稿：網友

前言

圖像是每個應用程序不可缺少的一部分。調整圖像大小是所有開發人員經常遇到的問題。iOS有5中圖片縮略技術，但是我們應該在項目中選擇哪種技術呢？尤其是面對高精度圖片的縮略時，方式不當可能會出現OOM。現在我們開始一一去看看這5中圖片縮略技術吧，完整代碼在這里ImageResizing 。

UIKit

UIGraphicsBeginImageContextWithOptions & UIImage -drawInRect:

用于圖像大小調整的最高級API可以在UIKit框架中找到。給定一個UIImage，可以使用臨時圖形上下文來渲染縮放版本。這種方式最簡單，效果也不錯，但我不太建議使用這種方式，至于原因會在最后講到。

extension UIImage {  //UIKit func resizeUI(size: CGSize) -> UIImage? {  let hasAlpha = false let scale: CGFloat = 0.0 // Automatically use scale factor of main screen  /** 創建一個圖片類型的上下文。調用UIGraphicsBeginImageContextWithOptions函數就可獲得用來處理圖片的圖形上下文。利用該上下文，你就可以在其上進行繪圖，并生成圖片  size：表示所要創建的圖片的尺寸 opaque：表示這個圖層是否完全透明，如果圖形完全不用透明最好設置為YES以優化位圖的存儲，這樣可以讓圖層在渲染的時候效率更高 scale：指定生成圖片的縮放因子，這個縮放因子與UIImage的scale屬性所指的含義是一致的。傳入0則表示讓圖片的縮放因子根據屏幕的分辨率而變化，所以我們得到的圖片不管是在單分辨率還是視網膜屏上看起來都會很好 */ UIGraphicsBeginImageContextWithOptions(size, !hasAlpha, scale) self.draw(in: CGRect(origin: .zero, size: size))  let resizedImage = UIGraphicsGetImageFromCurrentImageContext() UIGraphicsEndImageContext() return resizedImage! }}

CoreGraphics

CGBitmapContextCreate & CGContextDrawImage

CoreGraphics / Quartz 2D提供了一套較低級別的API，允許進行更高級的配置。給定一個CGImage，使用臨時位圖上下文來渲染縮放后的圖像。

使用CoreGraphics圖像的質量與UIKit圖像相同。至少我無法察覺到任何區別，并且imagediff也沒有任何區別。表演只有不同之處。

extension UIImage {  //CoreGraphics func resizeCG(size:CGSize) -> UIImage? {  guard let cgImage = self.cgImage else { return nil }  let bitsPerComponent = cgImage.bitsPerComponent let bytesPerRow = cgImage.bytesPerRow let colorSpace = cgImage.colorSpace let bitmapInfo = cgImage.bitmapInfo  guard let context = CGContext(data: nil,  width: Int(size.width),  height: Int(size.height),  bitsPerComponent: bitsPerComponent,  bytesPerRow: bytesPerRow,  space: colorSpace!,  bitmapInfo: bitmapInfo.rawValue) else { return nil }  context.interpolationQuality = .high  context.draw(cgImage, in: CGRect(origin: .zero, size: size))  let resizedImage = context.makeImage().flatMap { UIImage(cgImage: $0) } return resizedImage }}

iOS,圖片縮略技術

讓我們看看CoreGraphics圖片和原始圖片之間的差異。如果仔細觀察GIF，可以注意到圖像模糊。

ImageIO

CGImageSourceCreateThumbnailAtIndex

Image I / O是一個功能強大但鮮為人知的用于處理圖像的框架。獨立于Core Graphics，它可以在許多不同格式之間讀取和寫入，訪問照片元數據以及執行常見的圖像處理操作。這個庫提供了該平臺上最快的圖像編碼器和解碼器，具有先進的緩存機制，甚至可以逐步加載圖像。

extension UIImage {  //ImageIO func resizeIO(size:CGSize) -> UIImage? {  guard let data = UIImagePNGRepresentation(self) else { return nil }  let maxPixelSize = max(size.width, size.height)  //let imageSource = CGImageSourceCreateWithURL(url, nil) guard let imageSource = CGImageSourceCreateWithData(data as CFData, nil) else { return nil }  //kCGImageSourceThumbnailMaxPixelSize為生成縮略圖的大小。當設置為800，如果圖片本身大于800*600，則生成后圖片大小為800*600，如果源圖片為700*500，則生成圖片為800*500 let options: [NSString: Any] = [ kCGImageSourceThumbnailMaxPixelSize: maxPixelSize, kCGImageSourceCreateThumbnailFromImageAlways: true ]  let resizedImage = CGImageSourceCreateImageAtIndex(imageSource, 0, options as CFDictionary).flatMap{ UIImage(cgImage: $0) } return resizedImage }}

CoreImage

CoreImage是IOS5中新加入的一個Objective-c的框架，里面提供了強大高效的圖像處理功能，用來對基于像素的圖像進行操作與分析。IOS提供了很多強大的濾鏡(Filter)，這些Filter提供了各種各樣的效果，并且還可以通過濾鏡鏈將各種效果的Filter疊加起來，形成強大的自定義效果，如果你對該效果不滿意，還可以子類化濾鏡。

extension UIImage {  //CoreImage func resizeCI(size:CGSize) -> UIImage? {  guard let cgImage = self.cgImage else { return nil }  let scale = (Double)(size.width) / (Double)(self.size.width)  let image = CIImage(cgImage: cgImage)  let filter = CIFilter(name: "CILanczosScaleTransform")! filter.setValue(image, forKey: kCIInputImageKey) filter.setValue(NSNumber(value:scale), forKey: kCIInputScaleKey) filter.setValue(1.0, forKey:kCIInputAspectRatioKey)  guard let outputImage = filter.value(forKey: kCIOutputImageKey) as? CIImage else { return nil}  let context = CIContext(options: [kCIContextUseSoftwareRenderer: false])  let resizedImage = context.createCGImage(outputImage, from: outputImage.extent).flatMap { UIImage(cgImage: $0) } return resizedImage }}

iOS,圖片縮略技術

可以注意到燈光看起來比它應該更亮。這個偽像出現在用CoreImage調整大小的所有圖像中。一般來說，圖像看起來更清晰一些。

vImage

vImage可能是這幾種技術中被了解最少的，使用時需要 import Accelerate

使用CPU的矢量處理器處理大圖像。強大的圖像處理功能，包括Core Graphics和Core Video互操作，格式轉換和圖像處理。

extension UIImage {  //vImage func resizeVI(size:CGSize) -> UIImage? {  guard let cgImage = self.cgImage else { return nil }  var format = vImage_CGImageFormat(bitsPerComponent: 8, bitsPerPixel: 32, colorSpace: nil,  bitmapInfo: CGBitmapInfo(rawValue: CGImageAlphaInfo.first.rawValue),  version: 0, decode: nil, renderingIntent: .defaultIntent)  var sourceBuffer = vImage_Buffer() defer { free(sourceBuffer.data) }  var error = vImageBuffer_InitWithCGImage(&sourceBuffer, &format, nil, cgImage, numericCast(kvImageNoFlags)) guard error == kvImageNoError else { return nil }  // create a destination buffer let scale = self.scale let destWidth = Int(size.width) let destHeight = Int(size.height) let bytesPerPixel = cgImage.bitsPerPixel / 8 let destBytesPerRow = destWidth * bytesPerPixel  let destData = UnsafeMutablePointer<UInt8>.allocate(capacity: destHeight * destBytesPerRow) defer { destData.deallocate(capacity: destHeight * destBytesPerRow) } var destBuffer = vImage_Buffer(data: destData, height: vImagePixelCount(destHeight), width: vImagePixelCount(destWidth), rowBytes: destBytesPerRow)  // scale the image error = vImageScale_ARGB8888(&sourceBuffer, &destBuffer, nil, numericCast(kvImageHighQualityResampling)) guard error == kvImageNoError else { return nil }  // create a CGImage from vImage_Buffer var destCGImage = vImageCreateCGImageFromBuffer(&destBuffer, &format, nil, nil, numericCast(kvImageNoFlags), &error)?.takeRetainedValue() guard error == kvImageNoError else { return nil }  // create a UIImage let resizedImage = destCGImage.flatMap { UIImage(cgImage: $0, scale: 0.0, orientation: self.imageOrientation) }  destCGImage = nil return resizedImage }}

這個不是很流行并且文檔很少的小框架卻十分強大。結果令人驚訝。這樣可以產生最佳效果，并且圖像清晰平衡。沒有CG那么模糊，又不像CI那樣明亮的不自然。

以下是引用自方蘋果官方文檔

Lanczos重采樣方法通常比簡單的方法（如線性插值）產生更好的結果。但是，Lanczos方法會在高頻信號的區域（例如線條藝術）附近產生振鈴效應。

5種技術表現對比

測試設備是系統為iOS8.4的iPhone6

JPEG

加載，縮放和顯示的大尺寸高分辨率圖片來自NASA Visible Earth，原圖（12000×12000像素，20 MB JPEG），縮放尺寸為1/10：

iOS,圖片縮略技術

PNG

圖片來自Postgres.app Icon，原圖(1024 ? 1024 px 1MB PNG)，縮放尺寸為1/10：

iOS,圖片縮略技術

通過上面測試可以看到Core Image表現最差。Core Graphics 和 Image I/O最好。實際上，在蘋果官方在 Performance Best Practices section of the Core Image Programming Guide 部分中特別推薦使用Core Graphics或Image I / O功能預先裁剪或縮小圖像。

其實微信最早是使用UIKit，后來改使用ImageIO。

UIKit處理大分辨率圖片時，往往容易出現OOM，原因是-[UIImage drawInRect:]在繪制時，先解碼圖片，再生成原始分辨率大小的bitmap，這是很耗內存的。解決方法是使用更低層的ImageIO接口，避免中間bitmap產生。
所以最后我比較建議和微信一樣使用ImageIO。

以上所有測試資料均來自以下參考文章

參考文章：