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

权利要求书

1.一种在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；

其中：

图像帧压缩像素数据A_i：为原始图像帧Q_i中完整物体的最小外接矩形内的压缩像素数据；

图像帧延迟时间B_i：为原始图像帧Q_i渲染后，经过图像帧延迟时间B_i，再渲染相邻的原始图像帧Q_i+1；

图像帧位置坐标信息C_i：为原始图像帧Q_i渲染在画布上的位置坐标；

图像帧宽度信息D_i以及图像帧高度信息E_i，分别为原始图像帧Q_i中完整物体的最小外接矩形的宽度和高度；

步骤4，采用压缩算法，对图像帧压缩像素数据A_i进行解压操作，并转换为二进制像素数据F_i；

步骤5，令i＝1；

步骤6，根据图像帧宽度信息D_i以及图像帧高度信息E_i实例化一个ImageData类型的实例对象H_i，实例对象H_i中设置二进制像素数据F_i；将实例对象H_i、图像帧延迟时间B_i、图像帧位置坐标信息C_i、图像帧宽度信息D_i以及图像帧高度信息E_i共同传输给CANVAS模块；

步骤7，CANVAS模块首先在当前画布上定位到坐标为图像帧位置坐标信息C_i、宽度为图像帧宽度信息D_i以及高度为图像帧高度信息E_i的矩形区域W_i；

然后，CANVAS模块在当前画布中删除矩形区域W_i内的像素点，得到空矩形区域M_i；当前画布中空矩形区域M_i外部的区域为前渲染维持区域；

再将实例对象H_i渲染到空矩形区域M_i，形成新渲染区域；新渲染区域和前渲染维持区域共同形成一张完整的图像帧tu_i；

步骤8，CANVAS模块在画布上保持完整的图像帧tu_i不变，作为下一帧图像渲染的基础；同时，使用CANVAS模块将完整的图像帧tu_i导出，将图像帧tu_i以及图像帧延迟时间B_i进行存储；

步骤9，判断i是否等于n，如果等于，则执行步骤10；如果不等于，令i＝i+1，执行步骤6，对下一个二进制像素数据进行图像帧渲染操作；

步骤10，由此得到n个图像帧序列，分别为：图像帧tu₁,图像帧tu₂,...,图像帧tu_n，各个图像帧对应的图像帧延迟时间分别为：图像帧延迟时间B₁,图像帧延迟时间B₂,,...,图像帧延迟时间B_n；

CANVAS模块首先将图像帧tu₁渲染到画布；经过图像帧延迟时间B₁，再将图像帧tu₂渲染到画布；经过图像帧延迟时间B₂，再将图像帧tu₃渲染到画布；依此类推，直到将图像帧tu_n渲染到画布；经过图像帧延迟时间B_n，即形成对原始GIF文件进行动态渲染的效果。

2.根据权利要求1所述的在HTML5画布CANVAS上渲染GIF文件的方法，其特征在于，步骤4中，采用的压缩算法为串表压缩LZW算法。