Mac开发跬步积累(四):ImageIO解析Gif 图像数据

图片来自网络

Gif 动图在macOS与iOS平台上都是被广泛使用的一种图片资源;但在这两个平台上关于Gif动图的支持却是完全不同的效果: NSImageView (macOS)默认支持Gif格式的图片资源,而UIImageView(iOS)默认是无法动画显示Gif格式的图片资源

0x00: 什么是Gif 图片?

GIF 分为静态GIF和动画GIF两种，扩展名为.gif，是一种压缩位图格式，支持透明背景图像，适用于多种操作系统，“体型”很小，网上很多小动画都是GIF格式。其实GIF是将多幅图像保存为一个图像文件，从而形成动画，最常见的就是通过一帧帧的动画串联起来的搞笑gif图，所以归根到底GIF仍然是图片文件格式 ---引自 <<百度百科>>

这里可以看到Gif 是保存了多幅图像的一个图像文件,有了这个基础认识,我们就可以使用代码来解析Gif图像了.

0x01: 关于ImageIO 框架

在iOS4.0+和macOS1.08+之后苹果提供了ImageIO框架,它是一个图像管理框架,提供了对图像的读写,管理颜色空间,图像格式以及访问图像元数据的功能.这个框架中提供了下面五个模块:

ImageIO.CGImageDestination
ImageIO.CGImageMetadata
ImageIO.CGImageProperties
ImageIO.CGImageSource
ImageIO.ImageIOBase

其中解析数据我们主要使用CGImageSource这个模块.

0x02: 为什么需要手动解析Gif?

既然在macOS中的NSImageView控件默认支持播放Gif图像资源,为什么我们还需要自己解析Gif呢? 这主要看具体的业务需求场景, 笔者遇到的几个实际需求场景如下:

需要控制Gif的播放次数.
需要提取Gif的某一帧图片.
需要给Gif 添加水印效果(需要将水印加到Gif的每一帧图片上).
获取Gif的内部图片信息.

由于NSImageView仅提供了一个animates布尔值来控制是否动画显示Gif图片,无法指定播放次数,同时在iOS平台中,UIImageview没有animates这个属性支持Gif格式图像,通常需要引入第三方库实现对Gif的支持,通过了解ImageIO,我们可以更容易理解第三方库是如何进行Gif处理的,这将有助于我们进行定制功能的开发或者有效的Bug处理.

0x03: 动手解析Gif

示例Gif 资源:

Gif示例资源
创建测试项目工程:

测试项目工程
核心代码:

       /** 1. 获取gif 资源的路径 */
        guard let gifPath = Bundle.main.pathForImageResource(NSImage.Name.init("timg.gif"))else{return}
        /** 2. 读取gif 图片资源元数据 */
        guard let gifData = NSData(contentsOfFile: gifPath) else {return}
        /** 3. 根据图片元数据生成 cfImageSourceRef (包含了gif资源的内部数据信息) */
        guard let imageSourceRef = CGImageSourceCreateWithData(gifData, nil) else {return}
        /** 4. 获取gif 中的图片个数 */
        let imageCount = CGImageSourceGetCount(imageSourceRef)
        /** 5. 创建数组,用于存放转换后的NSImage */
        var imageArray = [NSImage]();
        for  i in 0 ..< imageCount {
            /** 6. 获取CGImage 资源  */
            guard let cgImageRef =  CGImageSourceCreateImageAtIndex(imageSourceRef, i, nil) else {continue}
            /** 7. 根据CGImage 创建NSImage  */
            let image =  NSImage(cgImage: cgImageRef, size: CGSize(width: cgImageRef.width, height: cgImageRef.height))
            /** 8. 将NSImage 添加的数组中 */
            imageArray.append(image)
        }
        /** 显示某一帧图片 (此示例中显示为100 ,图片总数为104)*/
        imageView.image = imageArray[100];

示例代码运行效果:

代码运行效果

这里主要用到了CGImageSource中的几个函数:

CGImageSourceCreateWithData(): 根据gif数据创建CGImageSource;
CGImageSourceGetCount(): 获取gif中包含的图片总数;
CGImageSourceCreateImageAtIndex(): 根据自定帧数创建一个CGImage对象;

到这里我们已经获取到Gif数据中的图片个数,并将每帧图片都保存到我们自己的一个数组中了,这样我们就可以使用NSTimer来实现动画效果了.

/ ** 懒加载定时器 */ 
 lazy var animTimer = Timer(timeInterval: 0.1, target: self, selector: #selector(starGifAnimated), userInfo: nil, repeats: true)
 
/** 添加播放记录索引 */ 
 var playIndex = 0

/** 动画执行方法 */
 @objc func starGifAnimated() {
        imageView.image = imageArray[playIndex]
        playIndex += 1
        if playIndex == imageArray.count {
            playIndex = 0
        }
    }

动画效果:

使用NSTimer实现动效

细心的朋友可能会看到这里的动画是通过设置NSTimer每个0.1秒(这个值是随便写的)来重复执行的,那么我们如何来获取一个正确的Gif播放时长呢?
其实在CGImageSource中我们可以使用下面这个函数获取Gif每帧图片的播放时长;

CGImageSourceCopyPropertiesAtIndex(): 获取指定帧的属性值 -> 返回一个字典;
kCGImagePropertyGIFDictionary: // 获取gif 信息的key
kCGImagePropertyGIFDelayTime: // 获取gif一帧时长的key

            /** 9. 获取指定帧的属性信息 */
            guard let properties =  CGImageSourceCopyPropertiesAtIndex(imageSourceRef, i, nil) as? NSDictionary else {continue}
            /** 10. 获取指定帧的gif信息字典 */
            guard let gifDictInfo = properties[kCGImagePropertyGIFDictionary] as? NSDictionary else {continue}
            /** 11. 获取一帧的时长 */
            guard let duration = gifDictInfo[kCGImagePropertyGIFDelayTime] as? NSNumber else {continue}
            /** 累加计算总时长 */
            playTotalTime += duration.doubleValue

最后,我们根据总时长和总的图片数就可以计算出NSTimer的执行间隔了.

0x04: 小结

我们通过ImageIO 实现了手动解析Gif图像资源,并使用NSTimer循环所有图片数组实现Gif 的动画效果.通过这个例子希望能够帮助大家进一步的了解在macOS中NSImageView 和iOS平台中UIImageView如何更灵活的使用Gif图像资源.
本例中只是macOS上的效果,对于iOS有兴趣的朋友可以试着将解析后的NSImage数组赋值给UIImageView的animationImages属性实现Gif动效,权当阅读后的练习,就不给出具体代码了...
本文仅是关于ImageIO的一个简单介绍,通过解析Gif图像数据来揭开这个框架的冰山一角,后续有机会再继续补充.

0x05: One more thing....

使用NSTimer 时,因为repeats设置的为true, 需要注意内存释放问题.
如需要实现Gif水印,则需要使用CGImageDestination将数据写回到指定路径.
示例代码Github地址