本发明属于gif文件渲染技术领域，具体涉及一种在html5画布canvas上渲染gif文件的方法。
背景技术：
gif(graphicsinterchangeformat，图形交换格式)文件使用数据压缩技术减少图片文件大小，并且不降低视觉质量，主要应用于小动画或低分辨率电影剪辑。由于其广泛的认可和可移植性，已经在万维网上广泛使用。由于gif文件的广泛使用，网络上的动态素材存量巨大，并且种类丰富。
html5(hypertextmarkuplanguage5，超文本标记语言)画布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个原始图像帧，分别为原始图像帧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文件进行动态渲染的效果。
优选的，步骤4中，采用的压缩算法为串表压缩lzw算法。
本发明提供的在html5画布canvas上渲染gif文件的方法具有以下优点：
本发明利用gif文件内容动态丰富，文件体积小等优势，结合canvas技术位图操作技术，实现对gif文件的动态渲染效果。
附图说明
图1为本发明提供的在html5画布canvas上渲染gif文件的方法的流程示意图。
具体实施方式
为了使本发明所解决的技术问题、技术方案及有益效果更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅用以解释本发明，并不用于限定本发明。
本发明提供一种在html5画布canvas上渲染gif文件的方法，是一种将gif文件渲染在html5画布canvas上的前端技术，利用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渲染在画布上的位置坐标；具体指原始图像帧qi的左上角，渲染在画布上的位置坐标；
图像帧宽度信息di以及图像帧高度信息ei，分别为原始图像帧qi中完整物体的最小外接矩形的宽度和高度；
例如，图像数据p1，与原始图像帧q1对应，为一个小孩站立的初始状态图；在下一时刻，如果小孩的手抬起来，从而使小孩的手发生位置变化，因此，图像数据p2，并不显示完整的小孩外形图像，仅显示发生位置变化后的手部最小外接矩形图像。gif文件采用此种方式，可降低序列帧传输时的体积。
步骤4，采用压缩算法，例如，采用串表压缩lzw算法，对图像帧压缩像素数据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；
例如，对于实例对象h1，与原始图像帧q1对应，为一个小孩站立的初始状态，此时，根据实例对象h1对应的图像帧位置坐标信息c1、图像帧宽度信息d1以及图像帧高度信息e1，形成矩形区域w1；然后，在当前画布中删除矩形区域w1内的像素点，得到空矩形区域m1；再将实例对象h1渲染到空矩形区域m1，即实现将一个完整的小孩站立的图像渲染到画布的效果。
下一时刻，对于实例对象h2，仅为发生位置变化后的手部最小外接矩形图像，此时，根据实例对象h2对应的图像帧位置坐标信息c2、图像帧宽度信息d2以及图像帧高度信息e2，形成矩形区域w2；然后，在前一个渲染到画布的完整的小孩站立的图像中，删除矩形区域w2，得到空矩形区域m2，再将实例对象h2渲染到空矩形区域m2，其中，实例对象h2渲染到空矩形区域m2，对应的为位置变化后的手部最小外接矩形图像，再与前一个渲染到画布的完整的小孩站立的图像的未发生变化位置相结合，即形成一个手部位置变化后的完整的小孩图像。
也就是说，本发明中，仅第1个实例对象h1需要对完整的图像进行渲染，对于后续的实例对象，实际仅渲染局部位置即可，从而提高渲染效率。
步骤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)充分利用gif文件特点，减少序列图的请求，降低带宽和时间的消耗；即：gif文件传输的序列图，仅第1个图像帧为完整图像，后续图像帧仅为相对于前一个图像帧发生变化的局部图像；
2)实现canvas渲染gif文件的效果，从而更好的控制动画效果；
因此，本发明利用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文件进行动态渲染的效果。
2.根据权利要求1所述的在html5画布canvas上渲染gif文件的方法，其特征在于，步骤4中，采用的压缩算法为串表压缩lzw算法。
技术总结