申请/专利权人：四三九九网络股份有限公司

申请日：2020-11-26

公开（公告）日：2023-04-14

公开（公告）号：CN112488911B

主分类号：G06T3/00

分类号：G06T3/00;G06T1/00

优先权：

专利状态码：有效-授权

法律状态：2023.04.14#授权;2021.03.30#实质审查的生效;2021.03.12#公开

摘要：本发明提供一种在HTML5画布CANVAS上渲染GIF文件的方法，包括：请求二进制形式的原始GIF文件，转换为8位无符号整型数组类型对象；对8位无符号整型数组类型对象进行解析，得到GIF文件的文件头部、数据流和文件尾部三个数据信息；从数据流中解析出n个图像数据；对图像帧压缩像素数据Ai进行解压操作，并转换为二进制像素数据Fi；采用渲染方式得到二进制像素数据Fi对应的图像帧tui；对各个图像帧tui按延迟时间进行帧序列控制。本发明利用GIF文件内容动态丰富，文件体积小等优势，结合CANVAS技术位图操作技术，实现对GIF文件的动态渲染效果。

主权项：1.一种在HTML5画布CANVAS上渲染GIF文件的方法，其特征在于，包括以下步骤：步骤1，采用类型化数组ArrayBuffer方式请求二进制形式的原始GIF文件，将原始GIF文件转换为8位无符号整型数组类型Uint8Array对象；其中，原始GIF文件包括n个原始图像帧，分别为原始图像帧Q1,原始图像帧Q2,...,原始图像帧Qn；原始图像帧Q2为相对于原始图像帧Q1发生位置变化区域的图像帧；原始图像帧Q3为相对于原始图像帧Q2发生位置变化区域的图像帧；依此类推，原始图像帧Qn为相对于原始图像帧Qn-1发生位置变化区域的图像帧；步骤2，对8位无符号整型数组类型Uint8Array对象进行解析，得到GIF文件的文件头部、数据流和文件尾部三个数据信息；步骤3，从步骤2得到的所述数据流中解析出n个图像数据，分别为图像数据P1,图像数据P2,...,图像数据Pn；其中，对于任意图像数据Pi,与原始GIF文件中的原始图像帧Qi对应，均包括图像帧压缩像素数据Ai、图像帧延迟时间Bi、图像帧位置坐标信息Ci、图像帧宽度信息Di以及图像帧高度信息Ei；其中：图像帧压缩像素数据Ai：为原始图像帧Qi中完整物体的最小外接矩形内的压缩像素数据；图像帧延迟时间Bi：为原始图像帧Qi渲染后，经过图像帧延迟时间Bi，再渲染相邻的原始图像帧Qi+1；图像帧位置坐标信息Ci：为原始图像帧Qi渲染在画布上的位置坐标；图像帧宽度信息Di以及图像帧高度信息Ei，分别为原始图像帧Qi中完整物体的最小外接矩形的宽度和高度；步骤4，采用压缩算法，对图像帧压缩像素数据Ai进行解压操作，并转换为二进制像素数据Fi；步骤5，令i＝1；步骤6，根据图像帧宽度信息Di以及图像帧高度信息Ei实例化一个ImageData类型的实例对象Hi，实例对象Hi中设置二进制像素数据Fi；将实例对象Hi、图像帧延迟时间Bi、图像帧位置坐标信息Ci、图像帧宽度信息Di以及图像帧高度信息Ei共同传输给CANVAS模块；步骤7，CANVAS模块首先在当前画布上定位到坐标为图像帧位置坐标信息Ci、宽度为图像帧宽度信息Di以及高度为图像帧高度信息Ei的矩形区域Wi；然后，CANVAS模块在当前画布中删除矩形区域Wi内的像素点，得到空矩形区域Mi；当前画布中空矩形区域Mi外部的区域为前渲染维持区域；再将实例对象Hi渲染到空矩形区域Mi，形成新渲染区域；新渲染区域和前渲染维持区域共同形成一张完整的图像帧tui；步骤8，CANVAS模块在画布上保持完整的图像帧tui不变，作为下一帧图像渲染的基础；同时，使用CANVAS模块将完整的图像帧tui导出，将图像帧tui以及图像帧延迟时间Bi进行存储；步骤9，判断i是否等于n，如果等于，则执行步骤10；如果不等于，令i＝i+1，执行步骤6，对下一个二进制像素数据进行图像帧渲染操作；步骤10，由此得到n个图像帧序列，分别为：图像帧tu1,图像帧tu2,...,图像帧tun，各个图像帧对应的图像帧延迟时间分别为：图像帧延迟时间B1,图像帧延迟时间B2,,...,图像帧延迟时间Bn；CANVAS模块首先将图像帧tu1渲染到画布；经过图像帧延迟时间B1，再将图像帧tu2渲染到画布；经过图像帧延迟时间B2，再将图像帧tu3渲染到画布；依此类推，直到将图像帧tun渲染到画布；经过图像帧延迟时间Bn，即形成对原始GIF文件进行动态渲染的效果。

全文数据：

权利要求：

百度查询： 四三九九网络股份有限公司 在HTML5画布CANVAS上渲染GIF文件的方法

免责声明
1、本报告根据公开、合法渠道获得相关数据和信息，力求客观、公正，但并不保证数据的最终完整性和准确性。
2、报告中的分析和结论仅反映本公司于发布本报告当日的职业理解，仅供参考使用，不能作为本公司承担任何法律责任的依据或者凭证。

阅读全文 双屏查看 官方信息 专利公告 收藏专利 下载PDF 下载WORD