专栏首页macOS 开发学习Mac开发跬步积累(四):ImageIO解析Gif 图像数据

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

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框架,它是一个图像管理框架,提供了对图像的读写,管理颜色空间,图像格式以及访问图像元数据的功能.这个框架中提供了下面五个模块:

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. 核心代码:
       /** 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来实现动画效果了.

/ ** 懒加载定时器 */ 
 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
            /** 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地址

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • iOS的GIF动画效果实现

    在GIF的合成和分解方面将会接触到iOS图像处理核心框架ImageIO,作为iOS系统中图像处理的核心框架,它为我们提供了各种丰富的API,本文将要实现的GIF...

    博文视点Broadview
  • 如何使用Java快速地给图片转码和生成缩略图(Thumbnailator和webp-imageio-core的使用)

    本文中介绍,如何使用Java优雅处理图片;包括:主流图片格式转码、图片压缩(缩略图生成)等。主要用到的外部工具包:

    Mintimate
  • 让数据动起来!用Python制作动画可视化效果,让数据不再枯燥!

    主要是使用到Matplotlib+imageio,其中Matplotlib就有一个Animation类,可以生成动图GIF,不过使用起来学习成本较高,还是有一定...

    郭好奇同学
  • Matplotlib绘制动图遇到Writer问题,自己写gif保存的代码

    最近使用Matplotlib绘制动图时,在保存图片为GIF图时遇到TypeError: 'MovieWriterRegistry' object is not ...

    蛰虫始航
  • 太强了,用 Matplotlib+Imageio 制作动画!

    主要是使用到Matplotlib+imageio,其中Matplotlib就有一个Animation类,可以生成动图GIF,不过使用起来学习成本较高,还是有一定...

    1480
  • iOS中播放gif动态图的方式探讨 原

        在iOS开发中,UIImageView类专门来负责图片数据的渲染,并且UIImageView也有帧动画的方法来播放一组图片,但是对于gif类型的数据,U...

    珲少
  • 20行代码制作字符画版小黄鸭表情包 | 文末送书抽奖结果

    前段时间,一只可爱的小黄鸭火起来了,据说是抖音上一位黄衣小姐姐模仿小黄鸭的动作而走红。这只动作呆萌的小黄鸭表情包也跟着火起来了,小黄鸭表情包也由一只变成多只,颜...

    sergiojune
  • 太魔性了,用 Python 实现火爆全网的「蚂蚁呀嘿」视频特效!

    https://aistudio.baidu.com/aistudio/projectdetail/1586056

    AirPython
  • 三行Python程序代码实现MP4视频转GIF动画文件

    最近看到好几篇类似“n行Python代码…”的博文,看起来还挺不错,简洁、实用,传播了知识、带来了阅读量,撩动了老猿的心,决定跟风一把,写个视频转动画的三行代码...

    AI算法与图像处理
  • 魔性,用Python实现火爆全网的「蚂蚁呀嘿」视频特效!

    https://aistudio.baidu.com/aistudio/projectdetail/1586056

    数据森麟
  • 全面掌握移动端主流图片格式的特点、性能、调优等

    图片通常是移动端应用流量耗费最多的部分,并且占据着重要的视觉空间。以大家最常用的即时通讯IM应用为例,应用中存在大量的图片数据往来(比如图片消息、用户相册、用户...

    JackJiang
  • 魔性,用Python实现火爆全网的「蚂蚁呀嘿」视频特效!

    https://aistudio.baidu.com/aistudio/projectdetail/1586056

    Python编程与实战
  • 技术菜鸟如何做出好看的奥运会奖牌榜

    2021年7月23日,第32届夏季奥运会在日本东京拉开帷幕。大赛共设置33个大项50个分项339个小项,是历届奥运会中产生金牌最多的一届 。

    数据STUDIO
  • 技术菜鸟如何做出好看的奥运会奖牌榜

    夏季奥林匹克运动会(Summer Olympic Games或Games of the Olympic)是由国际奥林匹克委员会主办的国际性多项运动赛事,每四年举...

    咋咋
  • 手把手实现火爆全网的视频特效 “蚂蚁呀嘿”,太魔性了

    让一张照片动起来,人脸跟着音乐一起挤眉弄眼,需要一个叫做一阶运动模型 (First Order Motion Model)来搞定。

    AI算法与图像处理
  • 跬步神经网络1-基本模型解析

    导语: 最近开始看NN,很多疑问。微积分什么的早丢了,边看边查,记录备忘。 本篇主要是针对最基本的网络模型,解释反向传播(backpropagation)原理。...

    MelonTeam
  • 使用QuadTree算法在Python中实现Photo Stylizer

    最近发现迈克尔·弗格曼(Michael Fogleman)完成了一个叫做四叉树艺术的项目。它激发了尝试编写自己的项目版本。这就是将在本文中讨论的,如何实现自己的...

    代码医生工作室
  • python 文件读写操作

    以前的代码都是直接将数据输出到控制台,实际上我们也可以通过读/写文件的方式读取/输出到磁盘文件中,文件读写简称I/O操作。文件I/O操作一共分为四部分:打开(o...

    猿说编程[Python和C]
  • 24.python 文件读写操作

    以前的代码都是直接将数据输出到控制台,实际上我们也可以通过读/写文件的方式读取/输出到磁盘文件中,文件读写简称I/O操作。文件I/O操作一共分为四部分:打开(o...

    猿说编程[Python和C]

扫码关注云+社区

领取腾讯云代金券