IOS crazy explanation-imageIO completes progressive image loading

IOS crazy explanation-imageIO completes progressive image loading

I. Common progressive image loading modes

Currently, the following three methods are available for incremental loading:

1) load images of different sizes from the web in turn, from small to large. At first, pull a small thumbnail for stretch display, then pull a medium-sized image, pull it, and overwrite it. Finally, pull the source image. After the pull is complete, the original image is displayed.

2) Pull the largest image from the web directly. Each time you receive a bit of data, a little image will be displayed. This will refresh the image from top to bottom.

3) in combination with 1st and 2nd types, pull a thumbnail for stretching display, and then use the second method to pull the source image directly, so that the progressive loading can be realized, it can also save several intermediate network requests.

 

Ii. Progressive image loading through imageIO

In the imageIO guide, the original saying is: "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."

"If you want to load a very large image, or load an image from the network, you can create an imageSource to achieve progressive loading. "The translation is not very authentic. It probably means this. I used to try this method when I was working on PowerCam, And I tried this method when I was dealing with ultra-large images on iOS, at that time, the test used a map of China with a resolution of 10000*8000. The result was that when the entire image was loaded into the memory, the memory was too much to eat, so I gave up. Now let's think about the processing of this super-large image. We can use the multipart method. Each time we only need to process a small image, we can leave this question for everyone to think about.

Today, we will discuss CGImageSource to incrementally load images from the web. To achieve this, we need to create a URLConnnection and then implement a proxy to update the image every time we receive the data. The main source code is as follows:

////  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
  
 

From the code above, we can see that at first we create a URLConnection based on the input URL, and at the same time create an empty CGImageSource, and then call CGImageSourceUpdateData to update the imageSource data each time when receiving the data, call CGImageSourceCreateImageAtIndex to obtain the latest image.

How can we see whether the above implementation is easy to incrementally load images from the web? Although imageIO has helped us do a lot, we should also understand its principles. We know that files are all formatted. Generally, the file header records some data about the file format, followed by the actual file data.

Take the simplest BMP image file as an example:

1) The first BITMAPFILEHEADER, which records the file size and the distance between the actual image data and the file header.

2) The next step is BITMAPINFOHEADER, which mainly records the image width, height, bit depth, and other information.

3) optional palette Information

4) The last part is the actual image data.

The information in the first three parts is very small. Generally, it does not exceed 100 bytes. After obtaining the written information, we can easily build an image based on the subsequent data, when the data is obtained more and more completely, the more complete the image we construct, until all the images are loaded.

The BMP format is a simple image format. Although other JPG and PNG formats are more complex, their overall structure is similar. ImageIO helps us complete the encoding and decoding of many image formats, and then construct the final image step by step.