iOS的5種圖片縮略技術以及性能探討

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

https://github.com/woshiccm/ImageResizing/tree/master

 

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
    }
}

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
    }
}

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：

PNG

 

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

經過上面測試能夠看到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。