SDWebImage 源碼解讀之工具類

本章開始將介紹SDWebImage庫在原有類的基礎上增加的拓展方法來完善圖片下載功能,涉及的類有NSData+ImageContentType,UIImage+MultiFormat,UIImage+GIF。首先解釋一下涉及到的一些基本概念和方法:

?什么是文件頭

文件頭是指位于文件數據流開頭的一段承擔一定任務的數據,一般都在開頭的部分。文件有很多類型,所以這時候我們就需要利用文件頭攜帶的信息去進行判斷。

例如,用十六進制編輯器查看一張gif格式的圖片的文件頭如下(部分數據):

<47494638 39619001 2c01f672 007b4f27 866952a6 8839a58e 55b59d7d cbb439c3 af49e8dc 1ee9de2d faec1feb e026ece1...965a6ec9 65975e7e 09669862 8e496699 66d21408 003b>

47494638即為gif圖片格式的文件頭標識。

?如何根據文件頭判斷圖片格式

圖片格式 ? ? ? ? ??文件頭

JPEG (jpg) ? ? ?FFD8FFE1

PNG (png) ? ? ?89504E47

GIF (gif) ? ? ? ? ?47494638

TIFF(tiff) ? ?49492A00或4D4D002A

WebP ? ? ? ? ? ? ?524946462A73010057454250

重點來解釋一下webp這種特殊格式,它是由12個字節組成的文件頭,把這些字節通過ASCII編碼,我們會得到如下內容:

?Image I/O 基礎

Image I/O framework提供不透明數據類型(opaque data types),從CGImageSourceRef獲取圖片數據,將圖片數據寫入到CGImageDestinationRef。它提供一個范圍很廣的圖片格式,包含web格式,動態圖,原始相機數據。是MAC平臺最快速圖片編碼和解碼操作,能夠加載多張圖片的功能,支持圖片元數據,并且能有效的緩存圖片數據。

一個Image Sources抽象出來了圖片數據,它不止包含一個圖像,縮略圖,還有各個圖像的特征和圖片文件。這些都是通過CGImageSource實現。當從Image Sources中創建圖片時,可以提供一個index和dictionary(利用鍵值對)來創建一個縮略圖或者是允許緩存。在創建圖片的時候,也需提供一個index值來索引圖片,因為Image Sources中可能是多張圖片,如果參數時0,那么只有一個圖片。可以通過CGImageSourceGetCount來獲得圖片在Image Sources中的數量。

當圖片從網絡中獲取的時候,可能由于過大,數據緩慢,這時候就需要漸進式加載圖片來顯示。主要通過CFData對象來實現:

1.創建一個CFData去添加image data.

2.創建一個漸進式圖片資源,通過 CGImageSourceCreateIncremental

3.獲取圖片數據到CFData中

4.調用CGImageSourceUpdateData函數,傳遞CFData和一個bool值,去描述這個數據是否包含全部圖片數據或者只是部分數據。無論什么情況,這個data包含已經積累的全部圖片文件。

如果已經有足夠的圖片數據,可以通過函數繪制CGImageSourceCreateImageAtIndex部分圖片,然后記得要Release掉它。檢查是否已經有全部的圖片數據通過使用CGImageSourceGetStatusAtIndex函數。如果圖片是完整的,函數返回值為kCGImageStatusComplete。否則繼續3,4步驟,直到獲得全部數據。Release掉漸進式增長的image source。

一.SDWebImage 源碼解讀之NSData+ImageContentType

先貼下源碼:

現在來看源碼的話,就簡單易懂了。

1.獲取二進制數據開頭一個字節長度的數據(只需比對文件頭的第一個字節數據即可)

[data?getBytes:&c length:1];

2.根據文件頭判斷圖片格式

如果第一個字節為FF,就可以判斷該文件是一張格式為jpeg的圖片,依此論推。

3.針對webp這種特殊格式,先判斷data的字節長度是否> 12,如果不大于12,說明不是webp格式;

如果> 12,進而將十六進制轉為文本字符串,如果該字符串開頭是RIFF,并且結尾是WEBP,就判定該文件類型為webp格式的圖片。

總結:從該類來看,SDWebImage判斷圖片的類型的方法還是比較容易理解,主要考察的是對數據流的文件頭知識的了解,對于我來說,之前這塊沒有進行資料了解的情況下會有點看不懂,理解之后就能夠理解這樣做的原因。

二.SDWebImage 源碼解讀之UIImage+GIF

該類中拓展了三個方法,都是針對gif格式圖片的加載做完善。

+ (UIImage *)sd_animatedGIFNamed:(NSString *)name;//根據名字獲取本地的gif圖片(該方法比較簡單,自行查看即可,下面不進行涉及)

+ (UIImage *)sd_animatedGIFWithData:(NSData *)data;//根據圖片二進制數據獲取圖片對象

- (UIImage *)sd_animatedImageByScalingAndCroppingToSize:(CGSize)size;//根據給定的大小縮放gif圖片

現在先來看看關鍵方法的代碼,上面三個方法都是基于此方法進行的:

該方法是通過Image I/O framework提供的一些API接口去獲取gif圖片中指定幀的圖片基本數據,從這些數據中返回當前幀圖片的動畫時間。CGImageSource是一個負責讀取圖片數據的類,外部接口通過Image I/O framework提供的一些API接口可以將圖片的數據轉化成CGImageSource。CGImageSourceCopyPropertiesAtIndex(source, index, nil)方法是獲取gif圖片數據中指定幀的圖片數據的API接口,該接口會返回一個CFDictionaryRef類型的圖片數據,通過(__bridge NSDictionary *)的方法就能轉化成我們熟悉的NSDictionary類型。在該代碼段中,獲取到幀圖片的gifProperties屬性數據之后,根據kCGImagePropertyGIFUnclampedDelayTime和kCGImagePropertyGIFDelayTime去獲取幀圖片的動畫時間,之后對這個動畫時間做一個最小值的處理,默認都為0.1s。

現在講講第二個方法,根據圖片二進制數據獲取圖片對象:

在該方法中,使用CGImageSourceCreateWithData((__bridge CFDataRef)data, NULL)方法,將圖片的二進制數據轉化成CGImageSourceRef source 類型,這樣便可以使用Image I/O framework提供的一些API接口,CGImageSourceGetCount(source)該方法是用于獲取圖片中的幀數,如果幀數小于等于1,則直接將圖片數據進行轉化成UIImage類型不進行操作,如果大于1之后,會對gif圖片中所有的幀圖片進行遍歷,保存到圖片數組images中,并統計所有幀動畫的總時長,如果最后的總時長為0的情況下就設置默認每幀0.1s的總時長,之后利用UIImage的[UIImage animatedImageWithImages:images duration:duration]方法,將所有的幀動畫重新組合成一個UIImage對象。下面講講第三個方法:

上邊的方法能夠實現把圖片的尺寸修剪為size,剪裁的前提是根據給出的大小與原圖片的寬跟高進行對比,求出寬比,高比中的最大值,然后計算出最大比之后的圖片大小,也就是scaledSize的值,同時計算出對應的裁剪開始位置thumbnailPoint,利用UIGraphicsBeginImageContextWithOptions(size, NO, 0.0);方法按比例對每一幀的圖片進行繪制。

三.SDWebImage 源碼解讀之UIImage+MultiFormat

該類中拓展了一個方法,+ (UIImage *)sd_imageWithData:(NSData *)data;,該方法的作用是用來將圖片的二進制數據轉化成iOS中能夠直接使用的UIImage對象,支持多種圖片格式進行轉化,比UIImage+GIF.h類具有更好的拓展性。先看看該功能的實現思路。

該方法通過調用NSData+ImageContentType.h類中的sd_contentTypeForImageData方法去獲取圖片的類型,如果是gif類型的圖片就是用UIImage+GIF.h中的+ (UIImage *)sd_animatedGIFWithData:(NSData *)data方法將二進制數據轉化成圖片。如果是webo格式的圖片會調用sd_imageWithWebPData進行轉化(該方法在SDWebImage庫中并沒有找到對應實現不知道作者是在哪里進行了實現操作),其他類型的則會使用+ (UIImage *)imageWithCGImage:(CGImageRef)cgImage scale:(CGFloat)scale orientation:(UIImageOrientation)orientation;方法進行轉化,下面的那個方法是利用Image I/O framework庫中提供的API方法在獲取到的圖片數據信息中找出圖片的轉向,進行繪制。這個屬性時為了防止進行剪切或者縮放后圖片顛倒或者旋轉的問題,保持原圖片的轉向。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 229,517評論 6 539
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,087評論 3 423
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 177,521評論 0 382
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,493評論 1 316
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,207評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,603評論 1 325
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,624評論 3 444
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,813評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,364評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,110評論 3 356
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,305評論 1 371
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,874評論 5 362
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,532評論 3 348
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,953評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,209評論 1 291
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,033評論 3 396
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,268評論 2 375

推薦閱讀更多精彩內容