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) {
&
