【從0開發(fā)搭建App】imageIO完成漸進(jìn)加載圖片

【轉(zhuǎn)】http://www.cnblogs.com/smileEvday/p/IncrementallyLoadImage.html

前面有一篇《使用imageIO獲取和修改圖片的exif信息》介紹了使用imageIO獲取圖片的exif信息暂幼,在看到Image I/O Programming Guide的時候注意到了淮菠,文檔中提到了可以使用CGImageSource實(shí)現(xiàn)漸進(jìn)加載的功能,于是想著自己寫個程序試試榨婆。 一簿煌、常見漸進(jìn)加載圖片模式  目前我們看到的漸進(jìn)加載主要有以下三種實(shí)現(xiàn)方式:  1)? 依次從web上加載不同尺寸的圖片氮唯,從小到大。最開始先拉取一個小縮略圖做拉伸顯示姨伟,然后拉取中等規(guī)格的圖惩琉,拉取完畢直接覆蓋顯示,最后拉取原圖夺荒,拉取完成后顯示原圖瞒渠。  2)直接從web上拉取最大的圖片技扼,每接受一點(diǎn)兒數(shù)據(jù)就顯示一點(diǎn)兒圖片勤讽,這樣就會實(shí)現(xiàn)從上到下一點(diǎn)點(diǎn)刷新出來的效果踏施。  3)結(jié)合第1種和第2種,先拉取一個縮略圖做拉伸顯示芹彬,然后采用第二種方法直接拉取原圖鄙早,這樣即可以實(shí)現(xiàn)漸進(jìn)加載,也可以節(jié)省幾次中間的網(wǎng)絡(luò)請求。 二造垛、通過imageIO實(shí)現(xiàn)圖片的漸進(jìn)加載  imageIO的guide中原話是這么說的: "If you have a very large image, or are loading image data over the web, you may want to create an incremental image source so that you can draw the image data as you accumulate it. "   翻譯過來就是: "如果你想加載一副特別大的圖片,或者從網(wǎng)絡(luò)上加載一副圖片晰搀,你可以通過創(chuàng)建一個imageSource實(shí)現(xiàn)漸進(jìn)加載的效果五辽。"翻譯的不是很地道,大概就是這么個意思外恕,以前在做PowerCam的時候杆逗,當(dāng)時為了在iOS上處理超大圖的時候也試過這種方法,當(dāng)時測試使用的是一副中國地圖鳞疲,分辨率為10000*8000的罪郊,結(jié)果是當(dāng)整幅圖片加載到內(nèi)存時,內(nèi)存吃不消尚洽,于是就放棄了』陂希現(xiàn)在想想對于這種超大圖片的處理,我們可以采用分片的方式進(jìn)行腺毫,每次只需要處理一小塊圖片即可癣疟,這個問題就留給大家思考吧〕本疲  今天我們要討論的是CGImageSource實(shí)現(xiàn)從web端漸進(jìn)加載圖片睛挚,要達(dá)到這個目的我們需要創(chuàng)建一個URLConnnection,然后實(shí)現(xiàn)代理急黎,每次接收到數(shù)據(jù)時更新圖片即可扎狱。下面主要的實(shí)現(xiàn)源碼:復(fù)制代碼////? SvIncrementallyImage.m//? SvIncrementallyImage////? Created by? maple on 6/27/13.//? Copyright (c) 2013 maple. All rights reserved.//#import "SvIncrementallyImage.h"#import#import@interface SvIncrementallyImage () {

NSURLRequest? ? *_request;

NSURLConnection *_conn;

CGImageSourceRef _incrementallyImgSource;

NSMutableData? *_recieveData;

long long? ? ? _expectedLeght;

bool? ? ? ? ? ? _isLoadFinished;

}

@property (nonatomic, retain) UIImage *image;

@property (nonatomic, retain) UIImage *thumbImage;

@end

@implementation SvIncrementallyImage

@synthesize imageURL = _imageURL;

@synthesize image? ? = _image;

@synthesize thumbImage = _thumbImage;

- (id)initWithURL:(NSURL *)imageURL

{

self = [super init];

if (self) {

_imageURL = [imageURL retain];

_request = [[NSURLRequest alloc] initWithURL:_imageURL];

_conn? ? = [[NSURLConnection alloc] initWithRequest:_request delegate:self];

_incrementallyImgSource = CGImageSourceCreateIncremental(NULL);

_recieveData = [[NSMutableData alloc] init];

_isLoadFinished = false;

}

return self;

}

#pragma mark -

#pragma mark NSURLConnectionDataDelegate

- (void)connection:(NSURLConnection *)connection didReceiveResponse:(NSURLResponse *)response

{

_expectedLeght = response.expectedContentLength;

NSLog(@"expected Length: %lld", _expectedLeght);

NSString *mimeType = response.MIMEType;

NSLog(@"MIME TYPE %@", mimeType);

NSArray *arr = [mimeType componentsSeparatedByString:@"/"];

if (arr.count < 1 || ![[arr objectAtIndex:0] isEqual:@"image"]) {

NSLog(@"not a image url");

[connection cancel];

[_conn release]; _conn = nil;

}

}

- (void)connection:(NSURLConnection *)connection didFailWithError:(NSError *)error

{

NSLog(@"Connection %@ error, error info: %@", connection, error);

}

- (void)connectionDidFinishLoading:(NSURLConnection *)connection

{

NSLog(@"Connection Loading Finished!!!");

// if download image data not complete, create final image

if (!_isLoadFinished) {

CGImageSourceUpdateData(_incrementallyImgSource, (CFDataRef)_recieveData, _isLoadFinished);

CGImageRef imageRef = CGImageSourceCreateImageAtIndex(_incrementallyImgSource, 0, NULL);

self.image = [UIImage imageWithCGImage:imageRef];

CGImageRelease(imageRef);

}

}

- (void)connection:(NSURLConnection *)connection didReceiveData:(NSData *)data

{

[_recieveData appendData:data];

_isLoadFinished = false;

if (_expectedLeght == _recieveData.length) {

_isLoadFinished = true;

}

CGImageSourceUpdateData(_incrementallyImgSource, (CFDataRef)_recieveData, _isLoadFinished);

CGImageRef imageRef = CGImageSourceCreateImageAtIndex(_incrementallyImgSource, 0, NULL);

self.image = [UIImage imageWithCGImage:imageRef];

CGImageRelease(imageRef);

}

@end

復(fù)制代碼

從上面代碼中我們可以看到,一開始我們根據(jù)傳入的URL創(chuàng)建一個URLConnection勃教,同時創(chuàng)建一個空的CGImageSource淤击,然后在每次收到數(shù)據(jù)的時候調(diào)用CGImageSourceUpdateData更新imageSource的數(shù)據(jù),接著調(diào)用CGImageSourceCreateImageAtIndex獲取最新的圖片即可荣回。

怎么樣遭贸,看到上面的實(shí)現(xiàn)是不是感覺實(shí)現(xiàn)從web上漸進(jìn)加載圖片很簡單,雖然imageIO幫我們做了很多事情心软,但是我們也應(yīng)該了解它的原理壕吹。我們知道文件都是有格式的,一般文件的頭部會記錄一些關(guān)于文件格式的數(shù)據(jù)删铃,后面就是實(shí)際的文件數(shù)據(jù)耳贬。

拿最簡單的BMP圖片文件舉例:

1)? 最開始的BITMAPFILEHEADER,這部分主要記錄文件的大小猎唁,以及實(shí)際的圖像數(shù)據(jù)離文件頭的距離咒劲。

2)? 接著是BITMAPINFOHEADER,這部分主要記錄圖片的寬,高腐魂,位深等信息

3)可選的調(diào)色板信息

4)最后一部分就是實(shí)際的圖片數(shù)據(jù)帐偎。

前三部分的信息很小,一般加起來不會超過100個字節(jié)蛔屹,獲取到這寫信息以后削樊,我們就可以很輕松的根據(jù)后面的數(shù)據(jù)構(gòu)建出圖片,當(dāng)數(shù)據(jù)獲取的越來越完整的時候兔毒,我們構(gòu)造出的圖片就會越完整漫贞,直至全部加載完成。

BMP格式是簡單的圖片格式育叁,其他的JPG迅脐,PNG雖然結(jié)果更加復(fù)雜,但是總體構(gòu)成都差不多豪嗽。imageIO正是幫助我們完成了眾多圖片格式的編解碼谴蔑,然后一步步構(gòu)造出最終的圖片。

三龟梦、總結(jié)

本文主要討論了漸進(jìn)加載圖片的原理树碱,并且介紹了iOS平臺使用imageIO實(shí)現(xiàn)從web端漸進(jìn)加載圖片的功能。

完整的源碼在我的github: https://github.com/smileEvday/SvIncrementallyImage

感興趣的变秦,可以下載看看,代碼中如果有什么不對的地方歡迎指正框舔。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末蹦玫,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子刘绣,更是在濱河造成了極大的恐慌樱溉,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,755評論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件纬凤,死亡現(xiàn)場離奇詭異福贞,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)停士,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,305評論 3 395
  • 文/潘曉璐 我一進(jìn)店門挖帘,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人恋技,你說我怎么就攤上這事拇舀。” “怎么了蜻底?”我有些...
    開封第一講書人閱讀 165,138評論 0 355
  • 文/不壞的土叔 我叫張陵骄崩,是天一觀的道長。 經(jīng)常有香客問我,道長要拂,這世上最難降的妖魔是什么抠璃? 我笑而不...
    開封第一講書人閱讀 58,791評論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮脱惰,結(jié)果婚禮上搏嗡,老公的妹妹穿的比我還像新娘。我一直安慰自己枪芒,他們只是感情好彻况,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,794評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著舅踪,像睡著了一般纽甘。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上抽碌,一...
    開封第一講書人閱讀 51,631評論 1 305
  • 那天悍赢,我揣著相機(jī)與錄音,去河邊找鬼货徙。 笑死左权,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的痴颊。 我是一名探鬼主播赏迟,決...
    沈念sama閱讀 40,362評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼蠢棱!你這毒婦竟也來了锌杀?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,264評論 0 276
  • 序言:老撾萬榮一對情侶失蹤泻仙,失蹤者是張志新(化名)和其女友劉穎糕再,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體玉转,經(jīng)...
    沈念sama閱讀 45,724評論 1 315
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡突想,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,900評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了究抓。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片猾担。...
    茶點(diǎn)故事閱讀 40,040評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖刺下,靈堂內(nèi)的尸體忽然破棺而出垒探,到底是詐尸還是另有隱情,我是刑警寧澤怠李,帶...
    沈念sama閱讀 35,742評論 5 346
  • 正文 年R本政府宣布圾叼,位于F島的核電站蛤克,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏夷蚊。R本人自食惡果不足惜构挤,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,364評論 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望惕鼓。 院中可真熱鬧筋现,春花似錦、人聲如沸箱歧。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,944評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽呀邢。三九已至洒沦,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間价淌,已是汗流浹背申眼。 一陣腳步聲響...
    開封第一講書人閱讀 33,060評論 1 270
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留蝉衣,地道東北人括尸。 一個月前我還...
    沈念sama閱讀 48,247評論 3 371
  • 正文 我出身青樓,卻偏偏與公主長得像病毡,于是被迫代替她去往敵國和親濒翻。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,979評論 2 355

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