前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Mac开发跬步积累(四):ImageIO解析Gif 图像数据

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

作者头像
代码行者
发布2018-10-10 10:07:11
2K0
发布2018-10-10 10:07:11
举报
文章被收录于专栏:macOS 开发学习

Gif 动图macOSiOS平台上都是被广泛使用的一种图片资源;但在这两个平台上关于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框架,它是一个图像管理框架,提供了对图像的读写,管理颜色空间,图像格式以及访问图像元数据的功能.这个框架中提供了下面五个模块:

代码语言:javascript
复制
ImageIO.CGImageDestination
ImageIO.CGImageMetadata
ImageIO.CGImageProperties
ImageIO.CGImageSource
ImageIO.ImageIOBase

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

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

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

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

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

0x03: 动手解析Gif

  1. 示例Gif 资源:

Gif示例资源

  1. 创建测试项目工程:

测试项目工程

  1. 核心代码:
代码语言:javascript
复制
       /** 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];
  1. 示例代码运行效果:

代码运行效果

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

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

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

代码语言:javascript
复制
/ ** 懒加载定时器 */ 
 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
        }
    }
  1. 动画效果:

使用NSTimer实现动效

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

  • CGImageSourceCopyPropertiesAtIndex(): 获取指定帧的属性值 -> 返回一个字典; kCGImagePropertyGIFDictionary: // 获取gif 信息的key kCGImagePropertyGIFDelayTime: // 获取gif一帧时长的key
代码语言:javascript
复制
            /** 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数组赋值给UIImageViewanimationImages属性实现Gif动效,权当阅读后的练习,就不给出具体代码了... 本文仅是关于ImageIO的一个简单介绍,通过解析Gif图像数据来揭开这个框架的冰山一角,后续有机会再继续补充.

0x05: One more thing....

  • 使用NSTimer 时,因为repeats设置的为true, 需要注意内存释放问题.
  • 如需要实现Gif水印,则需要使用CGImageDestination将数据写回到指定路径. 示例代码Github地址
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018.10.04 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 0x00: 什么是Gif 图片?
  • 0x01: 关于ImageIO 框架
  • 0x02: 为什么需要手动解析Gif?
  • 0x03: 动手解析Gif
  • 0x04: 小结
  • 0x05: One more thing....
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档