技术经验解读：YYImage实现思路源码分析（图片解压缩原理）

2018年04月09日 18:00:13

阅读数：119

YYKit组件之一---->YYImage 图像处理

移动端图片格式调研

图片处理的小技巧

YYWebImage源码分析

YYModel源码分析

YYText源码分析

核心思路--->图片解码 （二进制数据位图）

雷纯峰的分析

这段是前言，介绍下图片是如何解码的。不想看到的可以直接无视

核心代码：

【objc】 view plain copy

【_decoder frameAtIndex:index decodeForDisplay:YES】----->YYCGImageCreateDecodedCopy

左边是外部暴露的解码方法，右边是核心解码方法

我们首先要知道，如果最普通的UIImageView的图片UIImage创建资源赋值，图片是没有解码的，只有当图片被被赋值给UIImageView的时候，Runloop捕获到事件，才会进行解压缩，其中会把二进制压缩的数据，解压成没有压缩的位图，这里就是最耗时的操作

我这里只是简单的说下我自己理解的流程，具体验证可以看雷哥的博客

既然那么耗时，为什么一定要解压缩才可以显示？那你得明白位图数据和二进制数据的区别了。

比如一张10kb的图，我们有data信息，也就是平时看到的PNG或者JPEG等后缀的格式，其中PNG支持alpha通道，无损压缩，JPEG是支持有损压缩的 图片压缩格式介绍 ，有损无损无非就是把多余的通过代码压进去，可以看看这个文章

那么PNG还是JPEG，只是位图的压缩形式罢了。一张PNG的图，解压缩出来就是原始位图，里面装载着像素信息，颜色信息等，这才是最原始的解压后的图，只有这样，所有的信息具备，才能被渲染到屏幕上，因此拿到的图片只能解压缩才可以显示（就是必然要耗时），既然一定要解压，耗时，不能卡在主线程，那就拿到子线程解压，把解压完的图片返回之后，再次渲染的时候，捕捉到已经解压了，就不需要在主线程解压了，直接显示。这也是所有第三方图片框架下载的核心。平时如果你不在意，你压根不知道他做了什么性能优化。

以上就是原理知识点

解压位图官方核心代码

【objc】 view plain copy

/ Create a bitmap context. The context draws into a bitmap which is width' </p> <p> pixels wide andheight' pixels high. The number of components for each

pixel is specified by space', which may also specify a destination color </p> <p> profile. The number of bits for each component of a pixel is specified by </p> <p>bitsPerComponent'. The number of bytes per pixel is equal to

`(bitsPerComponent number of components + 7)/8'. Each row of the bitmap

consists of bytesPerRow' bytes, which must be at leastwidth bytes

per pixel' bytes; in addition, bytesPerRow' must be an integer multiple </p> <p> of the number of bytes per pixel.data', if non-NULL, points to a block

of memory at least `bytesPerRow height' bytes. If data' is NULL, the </p> <p> data for context is allocated automatically and freed when the context is </p> <p> deallocated.bitmapInfo' specifies whether the bitmap should contain an

alpha channel and how it's to be generated, along with whether the

components are floating-point or integer. /

CG_EXTERN CGContextRef __nullable CGBitmapContextCreate(voidvoid nullable data,

size_t width, size_t height, size_t bitsPerComponent, size_t bytesPerRow,

CGColorSpaceRef cg_nullable space, uint32_t bitmapInfo)

CG_AVAILABLE_STARTING(MAC_10_0, IPHONE_2_0);

data ：如果不为 NULL ，那么它应该指向一块大小至少为 bytesPerRow Height＜/code> 字节的内存；如果 为 NULL ，那么系统就会为我们自动分配和释放所需的内存，所以一般指定 NULL 即可；

Width＜/code> 和 Height＜/code> ：位图的宽度和高度，分别赋值为图片的像素宽度和像素高度即可；

bitsPerComponent ：像素的每个颜色分量使用的 bit 数，在 RGB 颜色空间下指定 8 即可；

bytesPerRow ：位图的每一行使用的字节数，大小至少为 width bytes per pixel 字节。有意思的是，当我们指定 0 时，系统不仅会为我们自动计算，而且还会进行 cache line alignment 的优化

space ：就是我们前面提到的颜色空间，一般使用 RGB 即可；

bitmapInfo ：就是我们前面提到的位图的布局信息。

以上是雷哥总结出来的参数介绍，下面看看YY里面的调用解压

【objc】 view plain copy

// BGRA8888 (premultiplied) or BGRX8888

// same as UIGraphicsBeginImageContext() and -【UIView drawRect:】

CGBitmapInfo bitmapInfo = kCGBitmapByteOrder32Host;

bitmapInfo |= hasAlpha ? kCGImageAlphaPremultipliedFirst : kCGImageAlphaNoneSkipFirst;

CGContextRef context = CGBitmapContextCreate(NULL, width, height, 8, 0, YYCGColorSpaceGetDeviceRGB(), bitmapInfo);

if (!context) return NULL;

CGContextDrawImage(context, CGRectMake(0, 0, width, height), imageRef); // decode

CGImageRef newImage = CGBitmapContextCreateImage(context);

CFRelease(context);

return newImage;

通过CGBitmapContextCreate创建位图上下文

通过CGContextDrawImage把原始位图绘制到上下文

CFDataRef rawData = CGDataProviderCopyData(CGImageGetDataProvider(image.CGImage));该方法可以获取到原始位图信息

CGBitmapContextCreateImage创建一个新的解压后的位图

通过资源的读取到屏幕渲染之间，我们不做处理，系统的解压是在主线程的，因此我们穿插了强制解压，放在异步线程处理，会让性能有着显著的提升。YY,SD,FLA都是这个思路

特性

支持以下类型动画图像的播放/编码/解码:

WebP, APNG, GIF。

支持以下类型静态图像的显示/编码/解码:

WebP, PNG, GIF, JPEG, JP2, TIFF, BMP, ICO, ICNS。

支持以下类型图片的渐进式/逐行扫描/隔行扫描解码:

PNG, GIF, JPEG, BMP。

支持多张图片构成的帧动画播放，支持单张图片的 sprite sheet 动画。

高效的动态内存缓存管理，以保证高性能低内存的动画播放。

完全兼容 UIImage 和 UIImageView，使用方便。

保留可扩展的接口，以支持自定义动画。

每个类和方法都有完善的文档注释。

概览

流程

YYImage : UIImage的子类，遵守 YYAnimatedImage 协议，帧图片，编解码，帧预加载等高级特性，支持WebP，APNG和GIF的编解码

YYFrameImage : 能够显示帧动画，仅支持png，jpeg 格式

YYSpriteSheetImage : 是用来做Spritesheet动画显示的图像类，也是UIImage的子类

YYImageCoder : 图像的编码和解码功能类，YYImage底层支持，YYImageEncoder负责编码，YYImageDecoder 负责解码，YYImageFrame 负责管理帧图像信息，_YYImageDecoderFrame 内部私有类是其子类，UIImage+YYImageCoder提供了一些便利方法

YYAnimatedImageView: UIImageView 子类，用于播放图像动画

1.第一步 YYImage的初始化

根据流程走一遍，以YYImage为例，先创建一个YYImage的对象供后续使用

【html】 view plain copy

YYImage image = 【YYImage imageNamed:name】;

这里入口函数，接着会根据一些后缀，或者没有给出来判断出扩展名

@【@"", @"png", @"jpeg", @"jpg", @"gif", @"webp", @"apng"】

最后来根据以下方法初始化YYImage对象

【html】 view plain copy

- (instancetype)initWithData:(NSData )data scale:(CGFloat)scale {

if (data.length == 0) return nil;

if (scale <= 0) scale = 【UIScreen mainScreen】.scale;

_preloadedLock = dispatch_semaphore_create(1);

@autoreleasepool {

// 解码器创建

YYImageDecoder decoder = 【YYImageDecoder decoderWithData:data scale:scale】;

// 根据index从解码器的数组里面提取出 _YYImageDecoderFrame 然后对图片源根据index解码出对应的帧图片存储到frame的image字段返回

YYImageFrame frame = 【decoder frameAtIndex:0 decodeForDisplay:YES】;

// 上一个方法的解码，赋值 初始化拿出来的就是第一帧

UIImage image = frame.image;

if (!image) return nil;

self = 【self initWithCGImage:image.CGImage scale:decoder.scale orientation:image.imageOrientation】;

if (!self) return nil;

_animatedImageType = decoder.type;

if (decoder.frameCount

_decoder = decoder;

_bytesPerFrame = CGImageGetBytesPerRow(image.CGImage) CGImageGetHeight(image.CGImage);

_animatedImageMemorySize = _bytesPerFrame decoder.frameCount;

}

self.yy_isDecodedForDisplay = YES;

}

return self;

}

先来看一下YYImageDecoder的私有变量

【html】 view plain copy

@implementation YYImageDecoder {

pthread_mutex_t _lock; // recursive lock 递归锁 初始化调用 更新图像数据源加递归锁

BOOL _sourceTypeDetected; // 是否推测图像源类型

CGImageSourceRef _source; // 图像源

yy_png_info _apngSource; // 如果判定图像为 YYImageTypePNG 则会以 APNG 更新图像源

#if YYIMAGE_WEBP_ENABLED

WebPDemuxer _webpSource; // 如果判定图像为 YYImageTypeWebP 则会议 WebP 更新图像源

#endif

UIImageOrientation _orientation; // 绘制方向

dispatch_semaphore_t _framesLock; // 针对于图像帧的锁 这种不长时间阻塞线程的线程安全可以用信号量 frame操作锁

NSArray _frames; ///< Array[span class="tag-name">GGImageDecoderFrame

BOOL _needBlend; // 是否需要混合 WebP 和 APNG来用的

NSUInteger _blendFrameIndex; // 从帧索引混合到当前帧

CGContextRef _blendCanvas; // 混合画布

}

解码器根据Data源初始化的核心代码

【html】 view plain copy

- (void)_updateSourceImageIO {

// 宽 高 初始方向 循环次数

_width = 0;

_height = 0;

_orientation = UIImageOrientationUp;

_loopCount = 0;

// 清楚原先解码器的数据

dispatch_semaphore_wait(_framesLock, DISPATCH_TIME_FOREVER);

_frames = nil;

dispatch_semaphore_signal(_framesLock);

// 处理图像源

if (!_source) {

if (_finalized) {

_source = CGImageSourceCreateWithData((bridge CFDataRef)_data, NULL);

} else {

_source = CGImageSourceCreateIncremental(NULL);

if (_source) CGImageSourceUpdateData(_source, (bridge CFDataRef)_data, false);

}

} else {

CGImageSourceUpdateData(_source, (bridge CFDataRef)_data, _finalized);

}

if (!_source) return;

// 获取图像帧数

_frameCount = CGImageSourceGetCount(_source);

if (_frameCount == 0) return;

if (!_finalized) { // ignore multi-frame before finalized

_frameCount = 1;

} else {

// PNG一帧

if (_type == YYImageTypePNG) { // use custom apng decoder and ignore multi-frame

_frameCount = 1;

}

// GIF多帧

if (_type == YYImageTypeGIF) { // get gif loop count

// 获取数据源属性字典

CFDictionaryRef properties = CGImageSourceCopyProperties(source, NULL);

// 属性字典获取到

if (properties) {

// 根据Key kCGImagePropertyGIFDictionary 获取到GIF下的字典属性

CFDictionaryRef gif = CFDictionaryGetValue(properties, kCGImagePropertyGIFDictionary);

// 获取到gif 字典

if (gif) {

// 获取循环次数 根据Key kCGImagePropertyGIFLoopCount

CFTypeRef loop = CFDictionaryGetValue(gif, kCGImagePropertyGIFLoopCount);

// //代码效果参考：http://www.lyjsj.net.cn/wx/art_22932.html

loopCount 地址进去赋值

if (loop) CFNumberGetValue(loop, kCFNumberNSIntegerType, &_loopCount);

}

CFRelease(properties);

}

}

}

/

ICO, GIF, APNG may contains multi-frame.

多帧的情况下才会进来

/

NSMutableArray frames = 【NSMutableArray new】;

for (NSUInteger i = 0; i < _frameCount; i++) {

// 每一帧的对象属性 继承于YYImageFrame

_YYImageDecoderFrame frame = 【_YYImageDecoderFrame new】;

frame.index = i; // 当前索引

frame.blendFromIndex = i;

frame.hasAlpha = YES;

frame.isFullSize = YES;

【frames addObject:frame】;

// 根据数据源的索引获取属性字典 （刚才上面的获取方式是拿循环次数的时候GIF专用key，这里有多种情况，就根据下标拿）

CFDictionaryRef properties = CGImageSourceCopyPropertiesAtIndex(_source, i, NULL);

if (properties) {

NSTimeInterval duration = 0;

NSInteger orientationValue = 0, width = 0, height = 0;

CFTypeRef value = NULL;

// 获取宽度

value = CFDictionaryGetValue(properties, kCGImagePropertyPixelWidth);

if (value) CFNumberGetValue(value, kCFNumberNSIntegerType, &width);

// 获取高度

value = CFDictionaryGetValue(properties, kCGImagePropertyPixelHeight);

if (value) CFNumberGetValue(value, kCFNumberNSIntegerType, &height);

// 如果是GIF

if (_type == YYImageTypeGIF) {

&