在HTML5画布CANVAS上渲染GIF文件的方法.pdf

(19)中华人民共和国国家知识产权局(12)发明专利申请(10)申请公布号CN112488911A(43)申请公布日2021.03.12(21)申请号202011356340.X(22)申请日2020.11.26(71)申请人四三九九网络股份有限公司地址361009福建省厦门市思明区软件园2期望海路2号(72)发明人李兴平江伟伟(74)专利代理机构北京市盛峰律师事务所11337代理人席小东(51)Int.Cl.G06T3/00(2006.01)G06T1/00(2006.01)权利要求书2页说明书5页附图1页(54)发明名称在HTML5画布CANVAS上渲染GIF文件的方法(57)摘要本发明提供一种在HTML5画布CANVAS上渲染GIF文件的方法，包括：请求二进制形式的原始GIF文件，转换为8位无符号整型数组类型对象；对8位无符号整型数组类型对象进行解析，得到GIF文件的文件头部、数据流和文件尾部三个数据信息；从数据流中解析出n个图像数据；对图像帧压缩像素数据Ai进行解压操作，并转换为二进制像素数据Fi；采用渲染方式得到二进制像素数据Fi对应的图像帧tui；对各个图像帧tui按延迟时间进行帧序列控制。本发明利用GIF文件内容动态丰富，文件体积小等优势，结合CANVAS技术位图操作技术，实现对GIF文件的动态渲染效果。CN112488911ACN112488911A权利要求书1/2页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，各个2CN112488911A权利要求书2/2页图像帧对应的图像帧延迟时间分别为：图像帧延迟时间B1,图像帧延迟时间B2,,...,图像帧延迟时间Bn；CANVAS模块首先将图像帧tu1渲染到画布；经过图像帧延迟时间B1，再将图像帧tu2渲染到画布；经过图像帧延迟时间B2，再将图像帧tu3渲染到画布；依此类推，直到将图