iOS開發(fā)中用imageIO漸進加載圖片及獲取exif的方法
imageIO完成漸進加載圖片
一、常見漸進加載圖片模式
目前我們看到的漸進加載主要有以下三種實現(xiàn)方式:
1) 依次從web上加載不同尺寸的圖片,從小到大。最開始先拉取一個小縮略圖做拉伸顯示,然后拉取中等規(guī)格的圖,拉取完畢直接覆蓋顯示,最后拉取原圖,拉取完成后顯示原圖。
2)直接從web上拉取最大的圖片,每接受一點兒數(shù)據(jù)就顯示一點兒圖片,這樣就會實現(xiàn)從上到下一點點刷新出來的效果。
3)結(jié)合第1種和第2種,先拉取一個縮略圖做拉伸顯示,然后采用第二種方法直接拉取原圖,這樣即可以實現(xiàn)漸進加載,也可以節(jié)省幾次中間的網(wǎng)絡(luò)請求。
二、通過imageIO實現(xià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實現(xiàn)漸進加載的效果。"翻譯的不是很地道,大概就是這么個意思,以前在做PowerCam的時候,當時為了在iOS上處理超大圖的時候也試過這種方法,當時測試使用的是一副中國地圖,分辨率為10000*8000的,結(jié)果是當整幅圖片加載到內(nèi)存時,內(nèi)存吃不消,于是就放棄了?,F(xiàn)在想想對于這種超大圖片的處理,我們可以采用分片的方式進行,每次只需要處理一小塊圖片即可,這個問題就留給大家思考吧。
今天我們要討論的是CGImageSource實現(xiàn)從web端漸進加載圖片,要達到這個目的我們需要創(chuàng)建一個URLConnnection,然后實現(xiàn)代理,每次接收到數(shù)據(jù)時更新圖片即可。下面主要的實現(xiàn)源碼:
//
// SvIncrementallyImage.m
// SvIncrementallyImage
//
// Created by maple on 6/27/13.
// Copyright (c) 2013 maple. All rights reserved.
//
#import "SvIncrementallyImage.h"
#import <ImageIO/ImageIO.h>
#import <CoreFoundation/CoreFoundation.h>
@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
從上面代碼中我們可以看到,一開始我們根據(jù)傳入的URL創(chuàng)建一個URLConnection,同時創(chuàng)建一個空的CGImageSource,然后在每次收到數(shù)據(jù)的時候調(diào)用CGImageSourceUpdateData更新imageSource的數(shù)據(jù),接著調(diào)用CGImageSourceCreateImageAtIndex獲取最新的圖片即可。
怎么樣,看到上面的實現(xiàn)是不是感覺實現(xiàn)從web上漸進加載圖片很簡單,雖然imageIO幫我們做了很多事情,但是我們也應(yīng)該了解它的原理。我們知道文件都是有格式的,一般文件的頭部會記錄一些關(guān)于文件格式的數(shù)據(jù),后面就是實際的文件數(shù)據(jù)。
拿最簡單的BMP圖片文件舉例:
1) 最開始的BITMAPFILEHEADER,這部分主要記錄文件的大小,以及實際的圖像數(shù)據(jù)離文件頭的距離。
2) 接著是BITMAPINFOHEADER,這部分主要記錄圖片的寬,高,位深等信息
3)可選的調(diào)色板信息
4)最后一部分就是實際的圖片數(shù)據(jù)。
前三部分的信息很小,一般加起來不會超過100個字節(jié),獲取到這寫信息以后,我們就可以很輕松的根據(jù)后面的數(shù)據(jù)構(gòu)建出圖片,當數(shù)據(jù)獲取的越來越完整的時候,我們構(gòu)造出的圖片就會越完整,直至全部加載完成。
BMP格式是簡單的圖片格式,其他的JPG,PNG雖然結(jié)果更加復(fù)雜,但是總體構(gòu)成都差不多。imageIO正是幫助我們完成了眾多圖片格式的編解碼,然后一步步構(gòu)造出最終的圖片。
使用imageIO獲取圖片的exif信息
一幅圖片除了包含我們能看見的像素信息,背后還包含了拍攝時間,光圈大小,曝光等信息。UIImage類將這些細節(jié)信息都隱藏了起來,只提供我們關(guān)心的圖片尺寸,圖片方向等。我們可以通過imageIO框架獲取到圖片背后的所有信息,下面就讓我們一起看看。
imageIO框架是iOS中偏底層一點兒的框架,它內(nèi)部提供的接口都是C風格的,關(guān)鍵數(shù)據(jù)也都是使用CoreFoundation進行存儲。慶幸的是CoreFoundation中有很多數(shù)據(jù)類型都可以上層的數(shù)據(jù)Foundation框架中的數(shù)據(jù)類型進行無縫橋接。這也就大大方便了我們對圖片信息的操作。
CGImageSourceRef是整個imageIO的入口,通過它我們可以完成從文件的加載圖片。加載完成以后我們就得到一個CGImageSourceRef,通過CGImageSourceRef我們就可以獲取圖片文件的大小,UTI(uniform type identifier),內(nèi)部包含幾張圖片,訪問每一張圖片以及獲取每張圖片對應(yīng)的exif信息等。
你可能會有一個疑問,為什么會有幾張圖片呢?
這塊兒我解釋一下,imageSourceRef和文件是一一對應(yīng)的,通常我們見到的圖片文件(例如jpg,png)內(nèi)部都只有一張圖片,這種情況我們通過CGImageSourceGetCount方法得到的就會是1。但是不能排除一個圖片文件中會有多種圖片的情況,例如gif文件,這個時候一個文件中就可能包含幾張甚至幾十張圖片。前面我寫的一片博客《IOS中如何解析并顯示Gif》就是通過imageSource實現(xiàn)加載和解析gif的功能。
下面是系統(tǒng)相機拍的照片的exif信息:
image property: {
ColorModel = RGB;
DPIHeight = 72;
DPIWidth = 72;
Depth = 8;
Orientation = 6;
PixelHeight = 2448;
PixelWidth = 3264;
"{Exif}" = {
ApertureValue = "2.526069";
BrightnessValue = "-0.5140446";
ColorSpace = 1;
ComponentsConfiguration = (
1,
2,
3,
0
);
DateTimeDigitized = "2013:06:24 22:11:30";
DateTimeOriginal = "2013:06:24 22:11:30";
ExifVersion = (
2,
2,
1
);
ExposureMode = 0;
ExposureProgram = 2;
ExposureTime = "0.06666667";
FNumber = "2.4";
Flash = 16;
FlashPixVersion = (
1,
0
);
FocalLenIn35mmFilm = 33;
FocalLength = "4.13";
ISOSpeedRatings = (
400
);
MeteringMode = 3;
PixelXDimension = 3264;
PixelYDimension = 2448;
SceneCaptureType = 0;
SensingMethod = 2;
ShutterSpeedValue = "3.906905";
SubjectArea = (
2815,
1187,
610,
612
);
WhiteBalance = 0;
};
"{GPS}" = {
Altitude = "27.77328";
AltitudeRef = 0;
Latitude = "22.5645";
LatitudeRef = N;
Longitude = "113.8886666666667";
LongitudeRef = E;
TimeStamp = "14:11:23.36";
};
"{TIFF}" = {
DateTime = "2013:06:24 22:11:30";
Make = Apple;
Model = "iPhone 5";
Orientation = 6;
ResolutionUnit = 2;
Software = "6.1.4";
XResolution = 72;
YResolution = 72;
"_YCbCrPositioning" = 1;
};
}
從中我們可以看出最開始的幾項分別顯示了當前圖片的顏色模式,色深,x,y方向的DPI,實際像素以及圖片的方向。我最開始看到這個方向時,心中一喜這不是UIImage中的imageOrientation,但是實驗發(fā)現(xiàn)這個方向和UIImage中的imageOrientation并不相等,此處的方向是exif標準定義的方向,從1到8分別對應(yīng)這UIImage中的8個方向,只是順序不一樣,它們對應(yīng)關(guān)系如下:
enum {
exifOrientationUp = 1, // UIImageOrientationUp
exifOrientationDown = 3, // UIImageOrientationDown
exifOrientationLeft = 6, // UIImageOrientationLeft
exifOrientationRight = 8, // UIImageOrientationRight
// these four exifOrientation does not support by all camera, but IOS support these orientation
exifOrientationUpMirrored = 2, // UIImageOrientationUpMirrored
exifOrientationDownMirrored = 4, // UIImageOrientationDownMirrored
exifOrientationLeftMirrored = 5, // UIImageOrientationLeftMirrored
exifOrientationRightMirrored = 7, // UIImageOrientationRightMirrored
};
typedef NSInteger ExifOrientation;
目前市面上的大部分數(shù)碼相機和手機都會內(nèi)置一個方向感應(yīng)器,拍出的照片中會寫如方向信息,但是通常都只會有前四種方向。這幾種Mirrored方向通常都是手機前置攝像頭自拍的時候才會設(shè)置。
exif為什么要搞這么一個方向呢?
幾乎所有的攝像頭在出場的時候成相芯片都是有方向的,拍出來的照片的像素都是默認方向的。如果每拍一張照片就對這些像素進行旋轉(zhuǎn),如果數(shù)碼相機每秒連拍20張來算,旋轉(zhuǎn)操作將會非常耗時。更聰明的做法是拍照時只記錄一個方向,然后顯示的時候按方向顯示出來即可。因此exif定義了一個標準的方向參數(shù),只要讀圖的軟件都來遵守規(guī)則,加載時候讀取圖片方向,然后做相應(yīng)的旋轉(zhuǎn)即可。這樣既可以達到快速成像的目的,又能達到正確的顯示,何樂而不為呢。
常見的圖片瀏覽和編輯軟件都遵守這個規(guī)則,但是有一個我們最常用的看圖軟件(windows自帶的看圖程序)不會去讀這個方向,因此我們將數(shù)碼相機和手機拍出來的圖片導(dǎo)入windows上時,會經(jīng)常遇到方向錯誤的問題。不知道windows帝國是怎么想的,或許和定義exif的組織有什么過節(jié)吧。
圖片信息中除了上面看提到的那些,還有拍攝的GPS信息,iOS自帶的相冊軟件中的地點tab就是按照GPS信息實現(xiàn)的。還有很多其他的信息,感興趣的可以自己寫個程序研究研究,這里就不展開了。
相關(guān)文章
Xcode8下iOS10常見報錯閃退,字體適配和編譯不過的問題及解決方案
蘋果推送了iOS10,好多朋友迅速即將系統(tǒng)升級了ios10,然后遇到好多問題。下面小編給針對遇到的問題給大家介紹解決方法,希望對大家有所幫助,感興趣的朋友可以參考下2016-09-09詳解iOS多線程之2.NSThread的加鎖@synchronized
這篇文章主要介紹了詳解iOS多線程之2.NSThread的加鎖@synchronized,有需要的小伙伴可以參考下。2016-11-11iOS中利用CAEmitterLayer實現(xiàn)粒子動畫詳解
粒子效果應(yīng)該對現(xiàn)在很多人來說并不陌生,我們之前也分享了一些相關(guān)文章,下面這篇文章主要給大家介紹了關(guān)于iOS中利用CAEmitterLayer實現(xiàn)粒子動畫的相關(guān)資料,文中介紹的非常詳細,需要的朋友們下面來一起看看吧。2017-06-06React Native搭建iOS開發(fā)環(huán)境
React Native的門檻不管是對于前端開發(fā)者還是移動端開發(fā)者來說都是很高的,既要懂原生又要懂js,技術(shù)棧是相當長的。但是沒有關(guān)系,下面我們一步步來學(xué)習(xí),慢慢成長吧!2016-09-09