IOS 关于GIF图片那点事

前言

前几天我们项目组的群里提了这么一件事情:在我们的应用中存储动态的GIF图到相册,保存的图片变成了静态图片。而微博则能正确保存,可见这并不是一个技术不可实现的。前不久刚好看了苹果关于ImageIO框架的指南,借着这个契机,我就去调研调研其中的原委。

使用UIImage读取GIF图片的不足

UIImage类在UIKit框架中,是我们最常使用的存储图片类。该类提供了可以使用图片路径或是图片数据来实例化的类方法。UIImage类底层采用ImageIO框架来读取图片数据,下图分别为+imageWithContentsOfFile:+imageWithData:调用的堆栈。

image堆栈.png

从堆栈中我们可以看到图片读取的大致流程如下:

  1. 根据文件路径或是数据生成CGImageSource
  2. 然后调用CGImageSourceCreateImageAtIndex方法获取一帧的图片,类型为CGImage;
  3. UIImage对象持有该CGImage

在流程的第一步生成的CGImageSource,仍然保留着GIF的全部信息。而在流程的第二步中出了问题。动态的Gif图与静态格式图片不同,它包含有多张的静态图片。CGImageSourceCreateImageAtIndex只能返回索引值的图片,丢失了其他的图片信息。因此,我们只获取到了其中的一帧图片。出于好奇,我选择了一张只有四帧完全不同的Gif图,通过测试观察,UIImage获取的是第一帧的图片。既然我们不能用UIImageCGImage来处理Gif图,我们是否可以降级,采用ImageIO框架来处理呢。答案是肯定的。

使用 ImageIO 框架解析GIF图片

我参考了YYImage框架的设计,定义了两个类,分别为JWGifDecoderJWGifFrameJWGifDecoder类负责GIF图片数据的解析,而JWGifFrame表示帧。两者的头文件如下:

#import <Foundation/Foundation.h>
#import "JWGifFrame.h"

@interface JWGifDecoder : NSObject

@property (nonatomic,readonly) NSData *data;    /**< 图片数据 */

@property (nonatomic,readonly) NSInteger loopCount; /**< 循环次数 */

@property (nonatomic,readonly) NSUInteger frameCount;   /**< 帧数 */

/**
 根据图片数据生成加码对象,当data为nil,返回nil

 @param data GIF图片数据

 @return 解码对象
 */
+ (instancetype) decoderWithData:(NSData *)data;

/**
 获取对应索引值的帧
 
 @param index 索引值

 @return 帧对象
 */
- (JWGifFrame *) frameAtIndex:(NSUInteger)index;

@end
#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>

@interface JWGifFrame : NSObject

@property (nonatomic,assign) NSUInteger index;  /**< 表示第几帧 */

@property (nonatomic,assign) NSTimeInterval duration;   /**< 持续时间 */

@property (nonatomic,strong) UIImage *image;    /**< 图片 */

@end

JWGifDecoder内部使用CGImageSource来解析图片数据。实例化时候,该类使用CGImageSourceCreateWithData ()方法(这里的c语言方法忽略参数)一个CGImageSource,然后采用CGImageSourceGetCount ()获得其内部的图片个数也就是帧数。而在生成帧对象时候,采用CGImageSourceCopyPropertiesAtIndex ()方法获得对应帧的属性,采用CGImageSourceCreateImageAtIndex()方法得到图片。

#import "JWGifDecoder.h"
#import <ImageIO/ImageIO.h>

@interface JWGifDecoder ()
{
    CGImageSourceRef _source;
}
@end

@implementation JWGifDecoder

+(instancetype)decoderWithData:(NSData *)data
{
    if ( !data ) return nil;
    
    JWGifDecoder *decoder = [[JWGifDecoder alloc] init];
    [decoder _decoderPrepareWithData:data];
    return decoder;
}

- (void)dealloc
{
    CFRelease(_source);
}

-(void)_decoderPrepareWithData:(NSData *)data
{
    _data = data;
    _source = CGImageSourceCreateWithData((__bridge CFDataRef)data, NULL);
    _frameCount = CGImageSourceGetCount(_source);
    
    CFDictionaryRef properties = CGImageSourceCopyProperties(_source, NULL);
    CFDictionaryRef gifProperties = CFDictionaryGetValue(properties, kCGImagePropertyGIFDictionary);
    CFTypeRef loop = CFDictionaryGetValue(gifProperties, kCGImagePropertyGIFLoopCount);
    if (loop) CFNumberGetValue(loop, kCFNumberNSIntegerType, &_loopCount);
    CFRelease(properties);
}

-(JWGifFrame *)frameAtIndex:(NSUInteger)index
{
    if ( index >= _frameCount ) return nil;
    
    JWGifFrame *frame = [[JWGifFrame alloc] init];
    
    frame.index = index;
    
    NSTimeInterval duration = 0;
    CFDictionaryRef frameProperties = CGImageSourceCopyPropertiesAtIndex(_source, index, NULL);
    CFDictionaryRef gifFrameProperties = CFDictionaryGetValue(frameProperties, kCGImagePropertyGIFDictionary);
    CFTypeRef delayTime = CFDictionaryGetValue(gifFrameProperties, kCGImagePropertyGIFUnclampedDelayTime);
    if(delayTime) CFNumberGetValue(delayTime, kCFNumberDoubleType, &duration);
    CFRelease(frameProperties);
    frame.duration = duration;

    CGImageRef cgImage = CGImageSourceCreateImageAtIndex(_source, index, NULL);
    UIImage *image = [UIImage imageWithCGImage:cgImage];
    frame.image = image;
    CFRelease(cgImage);
    
    return frame;
}

保存GIF格式图片至相册

UIImage只会保留一帧的信息,而图片的数据则具有GIF的所有数据。因此,相册读取GIF格式图片有个原则:在保存图片至相册时,必须保存图片的数据而不是UIImage对象。
IOS8以下ALAssetsLibrary框架处理相册,在IOS8以上,则是采用Photos框架。在这篇博客中说在IOS8中使用Photos的方法会保存不了,由于没有IOS8的系统的手机,我也无法做相关测试。目前测试我手上的IOS10系统的iphone6s,可以成功保存,保存的GIF图片可以在微信中成功发送。保存相册的代码如下所示:

    NSString *path = [[NSBundle mainBundle] pathForResource:@"niconiconi" ofType:@"gif"];
    NSData *data = [NSData dataWithContentsOfFile:path];
    if ([UIDevice currentDevice].systemVersion.floatValue >= 9.0f) {
        [[PHPhotoLibrary sharedPhotoLibrary] performChanges:^{
            PHAssetResourceCreationOptions *options = [[PHAssetResourceCreationOptions alloc] init];
            [[PHAssetCreationRequest creationRequestForAsset] addResourceWithType:PHAssetResourceTypePhoto data:data options:options];
        } completionHandler:^(BOOL success, NSError * _Nullable error) {
            NSLog(@"是否保存成功:%d",success);
        }];
    }
    else {
        ALAssetsLibrary *library = [[ALAssetsLibrary alloc] init];
        [library writeImageDataToSavedPhotosAlbum:data metadata:nil completionBlock:^(NSURL *assetURL, NSError *error) {
        }];
    }

结语

ImageIO框架给了我们更加强大的图片处理能力,它可以处理UIImage无法应付的Gif格式的图片。对于那些较高级的API无法处理的事情,可以试一试用更低层的框架看看是否进行处理。发现很多内容在苹果的 Guide里都有说明,以后需要多多看看。
这篇文章中还有很多东西没有讲到,比如相册读取Gif图片,又比如代码将图片保存成Gif图片(这点在苹果的Guide里有提到)等,以后再补充吧。

参考

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 160,881评论 4 368
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 68,052评论 1 301
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 110,598评论 0 250
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,407评论 0 217
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,823评论 3 294
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,872评论 1 224
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 32,037评论 2 317
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,778评论 0 204
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,505评论 1 247
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,745评论 2 253
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,233评论 1 264
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,568评论 3 260
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,231评论 3 241
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,141评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,939评论 0 201
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,954评论 2 283
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,784评论 2 275

推荐阅读更多精彩内容