前言

成都創(chuàng)新互聯(lián)專注于圖木舒克企業(yè)網(wǎng)站建設,響應式網(wǎng)站,商城網(wǎng)站開發(fā)。圖木舒克網(wǎng)站建設公司,為圖木舒克等地區(qū)提供建站服務。全流程按需搭建網(wǎng)站，專業(yè)設計，全程項目跟蹤，成都創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務

在移動app開發(fā)過程中，圖片往往是不可或缺的資源。從磁盤上加載一張圖片，到顯示到屏幕上，中間經(jīng)過了一些復雜的過程，其中非常重要的一步就是對圖片的解壓縮。下面來一起看看詳細的介紹吧

一.圖像從文件到屏幕過程

通常計算機在顯示是CPU與GPU協(xié)同合作完成一次渲染.接下來我們了解一下CPU/GPU等在這樣一次渲染過程中,具體的分工是什么?

• CPU: 計算視圖frame，圖片解碼，需要繪制紋理圖片通過數(shù)據(jù)總線交給GPU
• GPU: 紋理混合，頂點變換與計算,像素點的填充計算，渲染到幀緩沖區(qū)。
• 時鐘信號：垂直同步信號V-Sync / 水平同步信號H-Sync。
• iOS設備雙緩沖機制：顯示系統(tǒng)通常會引入兩個幀緩沖區(qū)，雙緩沖機制

圖片顯示到屏幕上是CPU與GPU的協(xié)作完成

對應應用來說，圖片是最占用手機內存的資源，將一張圖片從磁盤中加載出來，并最終顯示到屏幕上，中間其實經(jīng)過了一系列復雜的處理過程。

二.圖片加載的工作流程

1、假設我們使用 +imageWithContentsOfFile: 方法從磁盤中加載一張圖片，這個時候的圖片并沒有解壓縮；

2、然后將生成的 UIImage 賦值給 UIImageView ；

3、接著一個隱式的 CATransaction 捕獲到了 UIImageView 圖層樹的變化；

4、在主線程的下一個 runloop 到來時，Core Animation 提交了這個隱式的 transaction ，這個過程可能會對圖片進行 copy 操作，而受圖片是否字節(jié)對齊等因素的影響，這個 copy 操作可能會涉及以下部分或全部步驟：

• 分配內存緩沖區(qū)用于管理文件 IO 和解壓縮操作；
• 將文件數(shù)據(jù)從磁盤讀到內存中；
• 將壓縮的圖片數(shù)據(jù)解碼成未壓縮的位圖形式，這是一個非常耗時的 CPU 操作；
• 最后 Core Animation 中CALayer使用未壓縮的位圖數(shù)據(jù)渲染 UIImageView 的圖層。
• CPU計算好圖片的Frame,對圖片解壓之后.就會交給GPU來做圖片渲染

5、渲染流程

• GPU獲取獲取圖片的坐標
• 將坐標交給頂點著色器(頂點計算)
• 將圖片光柵化(獲取圖片對應屏幕上的像素點)
• 片元著色器計算(計算每個像素點的最終顯示的顏色值)
• 從幀緩存區(qū)中渲染到屏幕上

我們提到了圖片的解壓縮是一個非常耗時的 CPU 操作，并且它默認是在主線程中執(zhí)行的。那么當需要加載的圖片比較多時，就會對我們應用的響應性造成嚴重的影響，尤其是在快速滑動的列表上，這個問題會表現(xiàn)得更加突出。

三.為什么要解壓縮圖片

既然圖片的解壓縮需要消耗大量的 CPU 時間，那么我們?yōu)槭裁催€要對圖片進行解壓縮呢？是否可以不經(jīng)過解壓縮，而直接將圖片顯示到屏幕上呢？答案是否定的。要想弄明白這個問題，我們首先需要知道什么是位圖

其實，位圖就是一個像素數(shù)組，數(shù)組中的每個像素就代表著圖片中的一個點。我們在應用中經(jīng)常用到的 JPEG 和 PNG 圖片就是位圖

大家可以嘗試

UIImage *image = [UIImage imageNamed:@"text.png"];
CFDataRef rawData = CGDataProviderCopyData(CGImageGetDataProvider(image.CGImage));

打印rawData,這里就是圖片的原始數(shù)據(jù).

事實上，不管是 JPEG 還是 PNG 圖片，都是一種壓縮的位圖圖形格式。只不過 PNG 圖片是無損壓縮，并且支持 alpha 通道，而 JPEG 圖片則是有損壓縮，可以指定 0-100% 的壓縮比。值得一提的是，在蘋果的 SDK 中專門提供了兩個函數(shù)用來生成 PNG 和 JPEG 圖片：

// return image as PNG. May return nil if image has no CGImageRef or invalid bitmap format
UIKIT_EXTERN NSData * __nullable UIImagePNGRepresentation(UIImage * __nonnull image);

// return image as JPEG. May return nil if image has no CGImageRef or invalid bitmap format. compression is 0(most)..1(least)       
UIKIT_EXTERN NSData * __nullable UIImageJPEGRepresentation(UIImage * __nonnull image, CGFloat compressionQuality);

因此，在將磁盤中的圖片渲染到屏幕之前，必須先要得到圖片的原始像素數(shù)據(jù)，才能執(zhí)行后續(xù)的繪制操作，這就是為什么需要對圖片解壓縮的原因。

四.解壓縮原理

既然圖片的解壓縮不可避免，而我們也不想讓它在主線程執(zhí)行，影響我們應用的響應性，那么是否有比較好的解決方案呢？

我們前面已經(jīng)提到了，當未解壓縮的圖片將要渲染到屏幕時，系統(tǒng)會在主線程對圖片進行解壓縮，而如果圖片已經(jīng)解壓縮了，系統(tǒng)就不會再對圖片進行解壓縮。因此，也就有了業(yè)內的解決方案，在子線程提前對圖片進行強制解壓縮。

而強制解壓縮的原理就是對圖片進行重新繪制，得到一張新的解壓縮后的位圖。其中，用到的最核心的函數(shù)是 CGBitmapContextCreate ：  

CG_EXTERN CGContextRef __nullable CGBitmapContextCreate(void * __nullable data,
 size_t width, size_t height, size_t bitsPerComponent, size_t bytesPerRow,
 CGColorSpaceRef cg_nullable space, uint32_t bitmapInfo)
 CG_AVAILABLE_STARTING(__MAC_10_0, __IPHONE_2_0);

• data ：如果不為 NULL ，那么它應該指向一塊大小至少為 bytesPerRow * height 字節(jié)的內存；如果 為 NULL ，那么系統(tǒng)就會為我們自動分配和釋放所需的內存，所以一般指定 NULL 即可；
• width 和height ：位圖的寬度和高度，分別賦值為圖片的像素寬度和像素高度即可；
• bitsPerComponent ：像素的每個顏色分量使用的 bit 數(shù)，在 RGB 顏色空間下指定 8 即可；
• bytesPerRow ：位圖的每一行使用的字節(jié)數(shù)，大小至少為 width * bytes per pixel 字節(jié)。當我們指定 0/NULL 時，系統(tǒng)不僅會為我們自動計算，而且還會進行 cache line alignment 的優(yōu)化
• space ：就是我們前面提到的顏色空間，一般使用 RGB 即可；
• bitmapInfo ：位圖的布局信息.kCGImageAlphaPremultipliedFirst

五.YYImage\SDWebImage開源框架實現(xiàn)

用于解壓縮圖片的函數(shù) YYCGImageCreateDecodedCopy 存在于 YYImageCoder 類中，核心代碼如下

CGImageRef YYCGImageCreateDecodedCopy(CGImageRef imageRef, BOOL decodeForDisplay) {
 ...

 if (decodeForDisplay) { // decode with redraw (may lose some precision)
  CGImageAlphaInfo alphaInfo = CGImageGetAlphaInfo(imageRef) & kCGBitmapAlphaInfoMask;

  BOOL hasAlpha = NO;
  if (alphaInfo == kCGImageAlphaPremultipliedLast ||
   alphaInfo == kCGImageAlphaPremultipliedFirst ||
   alphaInfo == kCGImageAlphaLast ||
   alphaInfo == kCGImageAlphaFirst) {
   hasAlpha = YES;
  }

  // BGRA8888 (premultiplied) or BGRX8888
  // same as UIGraphicsBeginImageContext() and -[UIView drawRect:]
  CGBitmapInfo bitmapInfo = kCGBitmapByteOrder32Host;
  bitmapInfo |= hasAlpha ? kCGImageAlphaPremultipliedFirst : kCGImageAlphaNoneSkipFirst;

  CGContextRef context = CGBitmapContextCreate(NULL, width, height, 8, 0, YYCGColorSpaceGetDeviceRGB(), bitmapInfo);
  if (!context) return NULL;

  CGContextDrawImage(context, CGRectMake(0, 0, width, height), imageRef); // decode
  CGImageRef newImage = CGBitmapContextCreateImage(context);
  CFRelease(context);

  return newImage;
 } else {
  ...
 }
}

它接受一個原始的位圖參數(shù) imageRef ，最終返回一個新的解壓縮后的位圖 newImage ，中間主要經(jīng)過了以下三個步驟：

• 使用 CGBitmapContextCreate 函數(shù)創(chuàng)建一個位圖上下文；
• 使用 CGContextDrawImage 函數(shù)將原始位圖繪制到上下文中；
• 使用 CGBitmapContextCreateImage 函數(shù)創(chuàng)建一張新的解壓縮后的位圖。

事實上，SDWebImage 中對圖片的解壓縮過程與上述完全一致，只是傳遞給 CGBitmapContextCreate 函數(shù)的部分參數(shù)存在細微的差別

性能對比:

• 在解壓PNG圖片,SDWebImage>YYImage
• 在解壓JPEG圖片,SDWebImage<YYImage

總結

1、圖片文件只有在確認要顯示時,CPU才會對齊進行解壓縮.因為解壓是非常消耗性能的事情.解壓過的圖片就不會重復解壓,會緩存起來.

2、圖片渲染到屏幕的過程: 讀取文件->計算Frame->圖片解碼->解碼后紋理圖片位圖數(shù)據(jù)通過數(shù)據(jù)總線交給GPU->GPU獲取圖片F(xiàn)rame->頂點變換計算->光柵化->根據(jù)紋理坐標獲取每個像素點的顏色值(如果出現(xiàn)透明值需要將每個像素點的顏色*透明度值)->渲染到幀緩存區(qū)->渲染到屏幕

3、面試中如果能按照這個邏輯闡述,應該沒有大的問題.不過,如果細問到離屏渲染和渲染中的細節(jié)處理.就需要掌握OpenGL ES/Metal 這個2個圖形處理API. 面試過程可能會遇到不在自己技術能力范圍問題,盡量知之為知之不知為不知.

• https://github.com/SDWebImage/SDWebImage （本地下載）
• https://github.com/ibireme/YYImage （本地下載）

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，謝謝大家對創(chuàng)新互聯(lián)的支持。

文章名稱：iOS中圖片的解壓縮到渲染過程詳解
分享網(wǎng)址：http://aaarwkj.com/article40/gdigeo.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)建站、、軟件開發(fā)、網(wǎng)站策劃、商城網(wǎng)站、移動網(wǎng)站建設

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)