[发明专利]在HTML5画布CANVAS上渲染GIF文件的方法

说明书

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

技术领域

本发明属于GIF文件渲染技术领域，具体涉及一种在HTML5画布CANVAS上渲染GIF文件的方法。

背景技术

GIF(Graphics Interchange Format，图形交换格式)文件使用数据压缩技术减少图片文件大小，并且不降低视觉质量，主要应用于小动画或低分辨率电影剪辑。由于其广泛的认可和可移植性，已经在万维网上广泛使用。由于GIF文件的广泛使用，网络上的动态素材存量巨大，并且种类丰富。

HTML5(HyperText Markup Language 5，超文本标记语言)画布CANVAS(标签定义图形，比如图表和其他图像。该标签基于JavaScript的绘图API)是前端图片渲染的技术手段，不仅可以直接渲染静态图片，而且可以操作位图。

现有技术中，CANVAS模块对GIF文件进行直接图片渲染时，只能将GIF文件位于前部的第一帧图片进行渲染，对GIF文件其他帧图片无法实现动态解析渲染。因此，现有技术中，无法将CANVAS模块和GIF文件各自的优势进行结合，无法满足人们采用CANVAS模块对动态的GIF文件渲染的使用需求。

发明内容

针对现有技术存在的缺陷，本发明提供一种在HTML5画布CANVAS上渲染GIF文件的方法，可有效解决上述问题。

本发明采用的技术方案如下：

本发明提供一种在HTML5画布CANVAS上渲染GIF文件的方法，包括以下步骤：

步骤1，采用类型化数组ArrayBuffer方式请求二进制形式的原始GIF文件，将原始GIF文件转换为8位无符号整型数组类型Uint8Array对象；其中，原始GIF文件包括n个原始图像帧，分别为原始图像帧Q₁,原始图像帧Q₂,...,原始图像帧Q_n；原始图像帧Q₂为相对于原始图像帧Q₁发生位置变化区域的图像帧；原始图像帧Q₃为相对于原始图像帧Q₂发生位置变化区域的图像帧；依此类推，原始图像帧Q_n为相对于原始图像帧Q_n-1发生位置变化区域的图像帧；

步骤2，对8位无符号整型数组类型Uint8Array对象进行解析，得到GIF文件的文件头部、数据流和文件尾部三个数据信息；

步骤3，从步骤2得到的所述数据流中解析出n个图像数据，分别为图像数据P₁,图像数据P₂,...,图像数据P_n,；其中，对于任意图像数据P_i,与原始GIF文件中的原始图像帧Q_i对应，均包括图像帧压缩像素数据A_i、图像帧延迟时间B_i、图像帧位置坐标信息C_i、图像帧宽度信息D_i以及图像帧高度信息E_i；

其中：