imageIO complete progressive loading image
have to say that people are inert, fast over a month, this month although a bit busy, but definitely not bad time to write a few blog, have time to n times billiard hall, there is time to play n the League, so-called small line and builds big line and beverages, games played this month a little more, a little behind or control. Not pulled, the following entry to the topic, write about this today, when used in early imageIO framework to achieve a pull from the web, progressive image loading pictures.
front of a " use imageIO access and modify pictures exif Information " describes the use imageIO get pictures of the exif information, see the Image I / O Programming Guide when noticed, the document mentions You can use CGImageSource achieve progressive loading function, so try thinking to write their own programs.
a common progressive Load picture mode
now we see there are three main progressive loading implementations:
1) were loaded from the web images of different sizes, from small to large. Most start by doing pull a small thumbnail drawing display, and then pull medium size chart, pull finished directly overlay display, and finally pull artwork, pull the finished display artwork.
2) pull directly from the web greatest picture, every bit of data received on the show a little picture, which would achieve the top to the bottom a little flushed out effect.
3) combined with the first one kind and the first two kinds, first doing stretching pulls a thumbnail display, then use the second method is to pull the original image, so that can achieve progressive loading, you can also save a few intermediate network requests.
two through imageIO achieve progressive image loading
imageIO's guide Zhongyuan words said so: " 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. "
translation is: "If you want to load a particularly large image, or load a picture from the network, you can create a imageSource achieve gradual loading effect. "Translation is not very authentic, probably so mean, before doing PowerCam when the order was processed on a large map on iOS when I tried this approach was tested using a map of China, the resolution 10000 * 8000, the result is that when the whole image is loaded into memory, the memory too much, so he gave up. Now that I think of image processing for this large, we can use slice manner, each only need to deal with a small picture can be, this issue is left to you to think about it.
Today we wish to discuss is CGImageSource achieve incremental load images from a web client, to achieve this objective we need to create a URLConnnection, then implement agents, each received image data can be updated. The main source to achieve the following:
//
// 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
From the above code, we can see that from the beginning we create one based on the incoming URL URLConnection, while creating an empty CGImageSource, and then each time it receives data when calling CGImageSourceUpdateData <a> updated imageSource data, and then call CGImageSourceCreateImageAtIndex Get the latest pictures can be.
how, see the above implementation is not feeling to achieve progressive load images from the web is very simple, although imageIO help us do a lot of things, but we should also understand how it works. We know that there are format files are generally the file header will record some data on the file format, the latter is the actual file data.
take the simplest example of the BMP image file:
1) the beginning of the BITMAPFILEHEADER, this part of the log file size, and the image data of the actual distance from the file header.
2) followed by a BITMAPINFOHEADER, this part of the main record picture width, height, bit depth and other information
3) optional palette information
4) The last part is the actual picture data.
three pieces of information is very small, generally do not add up to more than 100 bytes, write access to this information, we can easily build according to the data behind the picture, when more data acquisition complete, we will construct a more complete picture, until all the load is complete.
BMP format is a simple picture format, the other JPG, PNG although the results are more complex, but overall composition are similar. imageIO is to help us to complete a large number of image formats codec, and then a final image is constructed step by step.
III Summary
This paper discusses the principle of progressive load images and introduces the iOS platform imageIO achieve incremental load images from the web client functionality.
complete source code on my github: https://github.com/smileEvday/SvIncrementallyImage
interested, you can download to see the code in place if there is something wrong please correct me.
Note: Please reprint the famous source, I QQ: 1592232964, welcome to discuss with iOS development knowledge! ! !
Hey its really helpful Thanks a lot
回复删除