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

圖像是每個應(yīng)用程序不可缺少的一部分彤避。調(diào)整圖像大小是所有開發(fā)人員經(jīng)常遇到的問題昼榛。iOS有5中圖片縮略技術(shù),但是我們應(yīng)該在項目中選擇哪種技術(shù)呢蚂夕?尤其是面對高精度圖片的縮略時,方式不當可能會出現(xiàn)OOM∫改妫現(xiàn)在我們開始一一去看看這5中圖片縮略技術(shù)吧婿牍,完整代碼在這里ImageResizing

UIKit

UIGraphicsBeginImageContextWithOptions & UIImage -drawInRect:

用于圖像大小調(diào)整的最高級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
        
        /**
         創(chuàng)建一個圖片類型的上下文粉楚。調(diào)用UIGraphicsBeginImageContextWithOptions函數(shù)就可獲得用來處理圖片的圖形上下文。利用該上下文第煮,你就可以在其上進行繪圖解幼,并生成圖片
         
         size:表示所要創(chuàng)建的圖片的尺寸
         opaque:表示這個圖層是否完全透明抑党,如果圖形完全不用透明最好設(shè)置為YES以優(yōu)化位圖的存儲,這樣可以讓圖層在渲染的時候效率更高
         scale:指定生成圖片的縮放因子撵摆,這個縮放因子與UIImage的scale屬性所指的含義是一致的底靠。傳入0則表示讓圖片的縮放因子根據(jù)屏幕的分辨率而變化,所以我們得到的圖片不管是在單分辨率還是視網(wǎng)膜屏上看起來都會很好
         */
        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圖像的質(zhì)量與UIKit圖像相同鳄逾。 至少我無法察覺到任何區(qū)別,并且imagediff也沒有任何區(qū)別灵莲。 表演只有不同之處雕凹。

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


1_2I79bGukRv5wlirgNQKU7Q.gif

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

ImageIO

CGImageSourceCreateThumbnailAtIndex

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

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為生成縮略圖的大小舟舒。當設(shè)置為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
    }
}

1_k1lG_E212_X_Y8Kq0uaEng.gif

可以注意到燈光看起來比它應(yīng)該更亮。 這個偽像出現(xiàn)在用CoreImage調(diào)整大小的所有圖像中。 一般來說浪感,圖像看起來更清晰一些昔头。

vImage

vImage可能是這幾種技術(shù)中被了解最少的,使用時需要 import Accelerate

使用CPU的矢量處理器處理大圖像影兽。 強大的圖像處理功能揭斧,包括Core Graphics和Core Video互操作,格式轉(zhuǎn)換和圖像處理峻堰。

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

這個不是很流行并且文檔很少的小框架卻十分強大讹开。 結(jié)果令人驚訝。這樣可以產(chǎn)生最佳效果捐名,并且圖像清晰平衡旦万。 沒有CG那么模糊,又不像CI那樣明亮的不自然镶蹋。

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

Lanczos重采樣方法通常比簡單的方法(如線性插值)產(chǎn)生更好的結(jié)果成艘。 但是,Lanczos方法會在高頻信號的區(qū)域(例如線條藝術(shù))附近產(chǎn)生振鈴效應(yīng)梅忌。

5種技術(shù)表現(xiàn)對比

測試設(shè)備是系統(tǒng)為iOS8.4的iPhone6

JPEG

加載狰腌,縮放和顯示的大尺寸高分辨率圖片來自NASA Visible Earth除破,原圖(12000×12000像素牧氮,20 MB JPEG),縮放尺寸為1/10:

Screen Shot 2018-06-23 at 6.25.18 PM.png

PNG

圖片來自Postgres.app Icon瑰枫,原圖(1024 ? 1024 px 1MB PNG)踱葛,縮放尺寸為1/10:

Screen Shot 2018-06-23 at 6.25.30 PM.png

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

其實微信最早是使用UIKit盯另,后來改使用ImageIO性含。

UIKit處理大分辨率圖片時,往往容易出現(xiàn)OOM鸳惯,原因是-[UIImage drawInRect:]在繪制時商蕴,先解碼圖片,再生成原始分辨率大小的bitmap芝发,這是很耗內(nèi)存的绪商。解決方法是使用更低層的ImageIO接口,避免中間bitmap產(chǎn)生辅鲸。

所以最后我比較建議和微信一樣使用ImageIO格郁。

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

參考文章:
Resize Image with Swift 4
Image Resizing Techniques
Resizing Techniques and Image Quality That Every iOS Developer Should Know

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子例书,更是在濱河造成了極大的恐慌锣尉,老刑警劉巖,帶你破解...
    沈念sama閱讀 221,820評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件决采,死亡現(xiàn)場離奇詭異悟耘,居然都是意外死亡,警方通過查閱死者的電腦和手機织狐,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,648評論 3 399
  • 文/潘曉璐 我一進店門暂幼,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人移迫,你說我怎么就攤上這事旺嬉。” “怎么了厨埋?”我有些...
    開封第一講書人閱讀 168,324評論 0 360
  • 文/不壞的土叔 我叫張陵邪媳,是天一觀的道長。 經(jīng)常有香客問我荡陷,道長雨效,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 59,714評論 1 297
  • 正文 為了忘掉前任废赞,我火速辦了婚禮徽龟,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘唉地。我一直安慰自己据悔,他們只是感情好,可當我...
    茶點故事閱讀 68,724評論 6 397
  • 文/花漫 我一把揭開白布耘沼。 她就那樣靜靜地躺著极颓,像睡著了一般。 火紅的嫁衣襯著肌膚如雪群嗤。 梳的紋絲不亂的頭發(fā)上菠隆,一...
    開封第一講書人閱讀 52,328評論 1 310
  • 那天,我揣著相機與錄音狂秘,去河邊找鬼骇径。 笑死,一個胖子當著我的面吹牛赃绊,可吹牛的內(nèi)容都是我干的既峡。 我是一名探鬼主播,決...
    沈念sama閱讀 40,897評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼碧查,長吁一口氣:“原來是場噩夢啊……” “哼运敢!你這毒婦竟也來了校仑?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,804評論 0 276
  • 序言:老撾萬榮一對情侶失蹤传惠,失蹤者是張志新(化名)和其女友劉穎迄沫,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體卦方,經(jīng)...
    沈念sama閱讀 46,345評論 1 318
  • 正文 獨居荒郊野嶺守林人離奇死亡羊瘩,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,431評論 3 340
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了盼砍。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片尘吗。...
    茶點故事閱讀 40,561評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖浇坐,靈堂內(nèi)的尸體忽然破棺而出睬捶,到底是詐尸還是另有隱情,我是刑警寧澤近刘,帶...
    沈念sama閱讀 36,238評論 5 350
  • 正文 年R本政府宣布擒贸,位于F島的核電站,受9級特大地震影響觉渴,放射性物質(zhì)發(fā)生泄漏介劫。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,928評論 3 334
  • 文/蒙蒙 一案淋、第九天 我趴在偏房一處隱蔽的房頂上張望座韵。 院中可真熱鬧,春花似錦哎迄、人聲如沸回右。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,417評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至渺氧,卻和暖如春旨涝,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背侣背。 一陣腳步聲響...
    開封第一講書人閱讀 33,528評論 1 272
  • 我被黑心中介騙來泰國打工白华, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人贩耐。 一個月前我還...
    沈念sama閱讀 48,983評論 3 376
  • 正文 我出身青樓弧腥,卻偏偏與公主長得像,于是被迫代替她去往敵國和親潮太。 傳聞我的和親對象是個殘疾皇子管搪,可洞房花燭夜當晚...
    茶點故事閱讀 45,573評論 2 359

推薦閱讀更多精彩內(nèi)容