iOS Crazy detailed ImageIO complete progressive loading picture

First, the common progressive loading picture mode

Currently we see the following three implementations of progressive loading:

1) load different sizes of pictures from the web, from small to large. First pull a small thumbnail to do the stretching display, and then pull the medium-sized diagram, pull over the direct overlay display, and finally pull the original image, pull completed after the display of the original.

2) pull the largest picture directly from the Web, and display a little bit of image every bit of data, so it will be refreshed from top to bottom.

3) combined with the 1th and 2nd, pull a thumbnail to do the stretching display, and then use the second method to pull the original image directly, so that the progressive loading can be achieved, but also save a few intermediate network requests.

Second, through the ImageIO to achieve the progressive loading of pictures

That's what ImageIO's guide says:

If you have a very large image, or is loading image data over the Web, you may want to create an incremental image SOURC e So, can draw the image data as you accumulate it. "

The translation comes from:

"If you want to load a very large picture, or load a picture from the Web, you can achieve a progressive load by creating a imagesource." "

Translation is not very authentic, probably is this meaning, before doing powercam, at that time in order to deal with the large map on iOS also tried this method, when the test used a map of China, the resolution of 10000*8000, the result is when the entire picture loaded into memory, Memory is too unbearable, so I gave up. Now think about this super-large picture processing, we can use the way of the Shard, each time only need to deal with a small piece of picture, this problem is left for everyone to think about it.

Today we are going to discuss the Cgimagesource implementation from the Web side of the gradual loading of images, to achieve this goal we need to create a urlconnnection, and then implement the proxy, each time the data received when the image is updated. The following main implementation of the source code:

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465 66676869707172737475

////  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;@[email protected] [email protected] imageURL = _imageURL;@synthesize image    = _image;@synthesize thumbImage = _thumbImage;- (id)initWithURL:(NSURL *)imageURL{    self = [superinit];    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;    }        returnself;}#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</corefoundation></imageio>

From the above code we can see that at first we create a urlconnection based on the incoming URL, and create an empty Cgimagesource, Then call Cgimagesourceupdatedata to update imagesource data each time you receive the data, and then call Cgimagesourcecreateimageatindex to get the latest image.

How to see the above implementation is not feel to realize the gradual loading of images from the web is very simple, although imageio to help us do a lot of things, but we should also understand its principles. We know that the files are formatted, and the head of the general file records some data about the file format, followed by the actual file data.

Take the simplest BMP image file for example:

1) at the beginning of the Bitmapfileheader, this section mainly records the size of the file, as well as the actual distance from the file header of the image data.

2) followed by Bitmapinfoheader, this part of the main record picture of the width, height, bit depth and other information

3) Optional Palette information

4) The final part is the actual picture data.

The first three parts of the information is very small, generally add up to not more than 100 bytes, get to this write information, we can easily based on the following data to build a picture, when the data gets more and more complete, we construct the picture will be more complete, until all loading is complete.

BMP format is a simple picture format, other jpg,png Although the results are more complex, but the overall composition is similar. ImageIO is helping us to complete the codec of many image formats, and then construct the final picture step-by-step.

Forwarded from: http://blog.csdn.net/wanglongblog/article/details/41868499

iOS Crazy detailed ImageIO complete progressive loading picture