iOS 图片渐进式下载

为了省去制作图片的麻烦，我就直接拿YYWebImage里面的图片了，我个人也是建议使用这个图片框架来做渐进式下载。

先看下YYKit中做的效果图。

渐进式图片

图片加载很美观，用户体验性非常棒。当我第一次看到的时候，就兴奋的直接拿着代码去用，但是发现并不行，没有效果。后来查了资料才知道这种下载是有要求的。大家若测试，可以用我下面这个代码URL。

 NSURL *url = [NSURL URLWithString:@"http://og3u5glro.bkt.clouddn.com/%E6%B8%90%E8%BF%9B%E5%BC%8F%E5%9B%BE%E7%89%87.jpg"];
 [self.iconImageView yy_setImageWithURL:url
                                   options:YYWebImageOptionProgressiveBlur];

但是，仅仅吃人家给的鱼干，远远满足不了我等对学习的渴望。于是，在和一个群友讨论后，决定自己写出这样的一个效果。

下面我先简单解释下图片格式
然后我会贴上自己实现这个渐进式下载的代码思路
最后当然是对你们来说最关心的，在文末我将提供一个简单的Demo。

言归正传，先来解释下，为什么你从百度随便弄一张图的链接放上去，但没有渐进式的下载效果。

实际上这和图片的格式支持有关。
一般来说我们碰到的图片大多都是Baseline JPEG这种格式的图片，我们也称为标准格式。然而渐进式图片下载，则需要Progressive JPEG这个格式，称之为渐进式，当然还有Interlaced格式等等，说到这里也许你已经明白了，是图片格式本身就不支持，不是代码没作用！下面说下这两个格式。

Baseline JPEG

标准格式的图片，是从上往下的方式逐行进行扫描。也就是看起来是一行一行的下载绘制，细心的同学会发现，YYWebImage里面就有这样的下载设置，代码如下：

[imageView yy_setImageWithURL:url options:YYWebImageOptionProgressive];

那看起来大概是这样的

上下扫描下载

Progressive JPEG

渐进式格式图片的扫描是多次的，再打开图片的过程中，先显示他的轮廓，在慢慢扫描绘制所有的色块，最终清晰。效果最上面大家已经看过了，这种技术被广泛应用于大图的下载显示上。
渐进式图片的一些小缺点：最初绘制的模糊图片，实际上与原图的大小有相差、这种绘制更加消耗CPU...

那么，这种图片如何制作呢？

很简单，在photoshop中有存储为web所用格式，打开后选择连续就是Progressive JPEG。

这样美观的渐进式下载，我如何实现呢？

图片解码需要用到这个框架处理

#import 

首先使用CGImageSourceCreateIncremental(NULL)创建图片源，然后在网络请求代理中拼接每次返回的图片data，使用CGImageSourceUpdateData更新图片数据，最后使用CGImageSourceCreateImageAtIndex来创建图片显示

其实过程就这么多，ok，贴上主要代码，运行看看效果。

@interface ViewController () {
    
    NSMutableData * _recieveData;//当前下载date
    long long _expectedLeght;//预估大小
    CGImageSourceRef _incrementallyImgSource;
}
@property(nonatomic, strong) UIImageView *imageView;

/**
 渐进式加载图片
 */
- (void)loadImage {
    
    _incrementallyImgSource = CGImageSourceCreateIncremental(NULL);
    
    _recieveData = [[NSMutableData alloc] init];
    
    [self.view addSubview:self.imageView];
    
    NSURL *url = [NSURL URLWithString:@"http://og3u5glro.bkt.clouddn.com/%E6%B8%90%E8%BF%9B%E5%BC%8F%E5%9B%BE%E7%89%87.jpg"];
    
    NSURLSession *session=[NSURLSession sessionWithConfiguration:[NSURLSessionConfiguration defaultSessionConfiguration]delegate:self delegateQueue:[NSOperationQueue mainQueue]];
    
    NSURLRequest *request=[NSURLRequest requestWithURL:url];
    NSURLSessionDataTask *task = [session dataTaskWithRequest:request];
    [task resume];
    
}

// 1.接收到服务器的响应
- (void)URLSession:(NSURLSession *)session dataTask:(NSURLSessionDataTask *)dataTask didReceiveResponse:(NSURLResponse *)response completionHandler:(void (^)(NSURLSessionResponseDisposition))completionHandler {
    // 允许处理服务器的响应，才会继续接收服务器返回的数据
    completionHandler(NSURLSessionResponseAllow);
    
    _expectedLeght = response.expectedContentLength;
    NSLog(@"_expectedLeght   %lld",_expectedLeght);
    
}

// 2.接收到服务器的数据（可能调用多次）
- (void)URLSession:(NSURLSession *)session dataTask:(NSURLSessionDataTask *)dataTask didReceiveData:(NSData *)data {
    
    [data enumerateByteRangesUsingBlock:^(const void *bytes, NSRange byteRange, BOOL *stop) {
        [_recieveData appendBytes:bytes length:byteRange.length];
    }];
    
    BOOL isloadFinish = NO;
    if (_expectedLeght == _recieveData.length) {
        isloadFinish = YES;
    }
   
    CGImageSourceUpdateData(_incrementallyImgSource, (CFDataRef)_recieveData, isloadFinish);
    CGImageRef imageRef = CGImageSourceCreateImageAtIndex(_incrementallyImgSource, 0, NULL);
    UIImage *imageaa = [UIImage imageWithCGImage:imageRef];

    self.imageView.image = imageaa;
    CGImageRelease(imageRef);
    
    NSLog(@"_recieveData  %lu",(unsigned long)_recieveData.length);
    
}

效果图

yscrollsss.gif

可以看到，一个明显的下拉效果，仔细看确实是有了模糊到清晰的过程。可是这个下拉似乎不怎么好看啊，而且这个模糊效果真心不好，好像是太清晰了，这不是我们需要的优美的体验。

那么，模糊效果不好怎么处理呢？我第一时间想到的就是，我要再加一层毛玻璃！以此获得更好的用户体验。

毛玻璃处理应该是个动态的，请看下面代码

//毛玻璃处理
- (UIImage *)filterWith:(UIImage *)image andRadius:(CGFloat)radius {
    
    CIImage *inputImage = [[CIImage alloc] initWithCGImage:image.CGImage];
    
    CIFilter *affineClampFilter = [CIFilter filterWithName:@"CIAffineClamp"];
    CGAffineTransform xform = CGAffineTransformMakeScale(1.0, 1.0);
    [affineClampFilter setValue:inputImage forKey:kCIInputImageKey];
    [affineClampFilter setValue:[NSValue valueWithBytes:&xform
                                               objCType:@encode(CGAffineTransform)]
                         forKey:@"inputTransform"];
    
    CIImage *extendedImage = [affineClampFilter valueForKey:kCIOutputImageKey];
    
    CIFilter *blurFilter =
    [CIFilter filterWithName:@"CIGaussianBlur"];
    [blurFilter setValue:extendedImage forKey:kCIInputImageKey];
    [blurFilter setValue:@(radius) forKey:@"inputRadius"];
    
    CIImage *result = [blurFilter valueForKey:kCIOutputImageKey];
    
    CIContext *ciContext = [CIContext contextWithOptions:nil];
    
    CGImageRef cgImage = [ciContext createCGImage:result fromRect:inputImage.extent];
    
    UIImage *uiImage = [UIImage imageWithCGImage:cgImage];
    CGImageRelease(cgImage);
    
    return uiImage;
}

方法写好，那么调用看看吧！

// 2.接收到服务器的数据（可能调用多次）
- (void)URLSession:(NSURLSession *)session dataTask:(NSURLSessionDataTask *)dataTask didReceiveData:(NSData *)data {
    
    [data enumerateByteRangesUsingBlock:^(const void *bytes, NSRange byteRange, BOOL *stop) {
        [_recieveData appendBytes:bytes length:byteRange.length];
    }];
    
    BOOL isloadFinish = NO;
    if (_expectedLeght == _recieveData.length) {
        isloadFinish = YES;
    }
    //不希望出现下拉效果 同时避免数据太少毛玻璃绘制crash
//    if (_recieveData.length <= _expectedLeght*0.12) {
//        return;
//    }
    CGImageSourceUpdateData(_incrementallyImgSource, (CFDataRef)_recieveData, isloadFinish);
    CGImageRef imageRef = CGImageSourceCreateImageAtIndex(_incrementallyImgSource, 0, NULL);
    UIImage *imageaa = [UIImage imageWithCGImage:imageRef];
    
    CGFloat length = _expectedLeght;
    CGFloat dataLength = _recieveData.length;
    NSLog(@"....%f",dataLength/length);
    
    self.imageView.image = [self filterWith:imageaa andRadius:(1-dataLength/length)*10];

    CGImageRelease(imageRef);
    
    NSLog(@"_recieveData  %lu",(unsigned long)_recieveData.length);
    
}

效果图，迫不及待~
为了看清下载效果，找的图片很大2.8M左右。

progress.gif

Gif制作不是很清晰，实际效果要比这个好很多。
有兴趣的同学可以去我GitHub下载这个Demo

既然说了这个图片下载，还有个动态图加载图片跟大家分享一下。

大致是这样的

animation.gif

在以前，我们都是放一张静态图的，当图片下载完成，更改图片，也就是著名的 PlaceholderImage 。如果我想放一张动态的placeholderImage怎么办？我推荐使用YYImage，实现步骤如下：
第一步：把你的imageView继承 YYAnimatedImageView(似乎不继承也可以，我记不清了)
第二步：

    [self.iconImageView sd_setImageWithURL:[NSURL URLWithString:url] 
    placeholderImage:[YYImage imageNamed:@"placeImage.gif"]];

有一点不得不说：万恶的卡顿！虽然已经优化的不错了，但是仍然出现了偶尔轻微卡顿的情况，可能我有强迫症。总之，这样不能众享丝滑了。如果有老司机有办法一路滑下去，请带带我！

iOS技术交流群：511860085 欢迎加入！

最后放一张Progressive JPEG格式的图片

mew_progressive.jpg