基于Canvas和WebWorker的像素差逐帧动画的实现方法【专利摘要】本发明涉及基于Canvas和WebWorker的像素差逐帧动画的实现方法，包括计算像素差部分以及实现部分。主要利用像素差逐帧动画，剔除掉前后帧中相同或者相似的部分得到像素差，然后根据前一帧和像素差还原出后一帧，既不会丢失数据又能大幅减少加载所需的资源体积，大幅减少Web逐帧动画所需的资源体积，可以在网络环境较差的情况下依然保持良好的用户体验。【专利说明】基于Canvas和WebWorker的像素差逐巾贞动画的实现方法
技术领域：
本发明涉及像素差逐帧动画，更具体地说是指基于Canvas和WebWorker的像素差逐帧动画的实现方法。【
背景技术：
】现阶段Web逐帧动画的主要实现方法是把每一帧图片合并成一张完整的精灵图，然后再使用Web技术(IMG、Canvas、CSS3)依次展示其中的一部分，如说明书附图1所示。当前Web逐帧动画的实现方法，会重复加载每帧图片中相同或者相似的部分，导致实现较复杂逐帧动画时需要加载大量资源，在网络环境较差的情况下，需要很长的加载等待时间，用户体验很差。因此，有必要开发一种新的Web逐帧动画的实现方法来解决Web逐帧动画所需的资源体积，提尚用户体验。【
发明内容】本发明的目的在于克服现有技术的缺陷，提供基于Canvas和WebWorker的像素差逐帧动画的实现方法。为实现上述目的，本发明采用以下技术方案:基于Canvas和WebWorker的像素差逐帧动画的实现方法，包括以下具体步骤:步骤1.计算像素差部分，首先加载前后帧图片然后通过canvas获得前后帧类数组形式的像素数据接着设置允许误差和最小截取长度，参数设置完成之后根据设置的允许误差值计算像素差数组;根据最小截取长度截取像素差数组并获得位置信息数组;在获取的数据中插入255alpha值;把像素差数据存储为png图片，在像素数据后补充无效颜色点并记录到位置信息数据中，最后根据得到的数据反向操作得到后帧还原图，对比还原图和原图，如果不符合预期则重新设置参数直至还原图符合预期；另外当所有图片计算完毕后进入第二部分，否则计算一下帧并把当前还原图当成原图充当下一次计算像素差的前帧；步骤2.实现部分，先整理数据把所有像素差图片合成一张精灵图同时把所有位置信息数组放到js文件中，加载整理后的精灵图和相关位置信息数据文件，开启webworker并根据像素差图片和对应的位置信息还原出原始图片并根据实际情况采用不同的方法实现逐帧动画。其进一步技术方案为:所述步骤I中计算像素差是利用HTML5的新特性Canvas,Canvas提供了getlmageData方法，可以得到类数组形式的图片的像素数据，通过计算前后帧图片的类数组形式像素数据的差异就可以得到类数组形式的像素差。其进一步技术方案为:所述步骤I中的像素差数据存储为png图片用Canvas提供的PUtImageData方法，把像素差数据进行一些优化后存储为PNG格式并得到相关的位置信息。其进一步技术方案为:所述步骤I中得到相关的位置信息，首先需要剔除掉像素差类数组中的连续无效像素点，并记录剔除点起始位置和剔除点位数得到相关位置信息;然后在每个像素点的Alpha值前边手动插入255，从而让原Alpha值后退一位成为下一个像素点的R值;最后在像素差类数组尾部增加一些连续无效像素点，让所有输出的像素差PNG图片具有相同的高度或宽度，合成最终精灵图片。其进一步技术方案为:所述步骤I中通过像素差还原原始图片是存储像素差的反向操作。其进一步技术方案为:所述步骤2中像素差逐帧动画的实现方式是需要在一定位置存储原图片，然后在原图片中间位置存储像素差，还原出所有动画帧之后再按普通的方式实现逐帧动画。其进一步技术方案为:所述步骤2中像素差逐帧动画的实现方式是只需要存储像素差数据，然后按照先后顺序还原一帧显示一帧。本发明与现有技术相比的有益效果是:本发明的基于Canvas和WebWorker的像素差逐帧动画的实现方法，主要利用像素差逐帧动画，剔除掉前后帧中相同或者相似的部分得到像素差，然后根据前一帧和像素差还原出后一帧，既不会丢失数据又能大幅减少加载所需的资源体积，大幅减少Web逐帧动画所需的资源体积，可以在网络环境较差的情况下依然保持良好的用户体验。下面结合附图和具体实施例对本发明作进一步描述。【附图说明】图1为现阶段Web逐帧动画的主要实现方法的最终精灵图片输出示意图；图2为本发明实施例提供的基于Canvas和WebWorker的像素差逐帧动画的实现方法的结构示意图；图3为本发明实施例提供的基于Canvas和WebWorker的像素差逐帧动画的实现方法的最终精灵图片输出示意图。【具体实施方式】为了更充分理解本发明的技术内容，下面结合具体实施例对本发明的技术方案进一步介绍和说明，但不局限于此。如图2-图3所示的具体实施例，本实施例提供的基于Canvas和WebWorker的像素差逐帧动画的实现方法，会剔除掉前后帧图片中的相同或者相似的部分，大幅减少Web逐帧动画所需的资源体积，可以在网络环境较差的情况下依然保持良好的用户体验。在本实施例中，逐帧动画又名定格动画，是一种动画技术，其原理即将每帧不同的图像连续播放，从而产生动画效果。精灵图又名CSSSprites，是一种网页图片应用处理方式，它允许你将一些零星图片合并成一张大图。HTML5:是HTML最新的修订版本，2014年10月由万维网联盟(W3C)完成标准制定。Canvas:是HTML5的一部分，允许脚本语言动态渲染位图像。CSS3:是层叠样式表(CascadingStyleSheets)语言的最新进展。GetImageData:Canvas2DAPI，返回一个ImageData对象，用来描述Canvas区域的像素数据。PutImageData:Canvas2DAPI，将ImageData对象中的像素数据绘制到位图。PNG:便携式网络图形(PortableNetworkGraphics，PNG)是一种无损压缩的位图图形格式，支持索引、灰度、RGB三种颜色方案以及Alpha通道等特性。Alpha通道:又名阿尔法通道，是一个8位的灰度通道，该通道用256级灰度来记录图像中透明信息，定义透明、不透明和半透明区域。浏览器:是指可以显示网页服务器或者文件系统的HTML文件内容，并让给用户与这些文件交互的一种软件。JAVASCRIPT:—种直译式脚本语言，是一种动态类型、基于原型的语言，内置支持类。数组:是电脑编程语言上对于Array的中文称呼，主要作用是使用单独的变量名来存储一系列的值。双向链表:也叫双链表，是链表的一种，它的每个数据节点中都有两个指针，分别指向直接后继和直接前驱JebWorker:是HTML5的一部分，是运行在后台的JAVASCRIPT，独立于其它脚本，不会影响页面的性能。基于Canvas和WebWorker的像素差逐帧动画的实现方法，主要分为两个部分:第一部分为计算像素差部分，第二部分为实现部分。具体如下:步骤1.计算像素差部分，首先加载前后帧图片然后通过canvas获得前后帧类数组形式的像素数据接着设置允许误差和最小截取长度，参数设置完成之后根据设置的允许误差值计算像素差数组;根据最小截取长度截取像素差数组并获得位置信息数组;为了避免当前浏览器的canvas实现机制导致的数据丢失，还需要在获取的数据中插入255alpha值;为了方便把像素差数据存储为png图片，在像素数据后补充无效颜色点并记录到位置信息数据中，最后根据得到的数据反向操作得到后帧还原图，对比还原图和原图，如果不符合预期则重新设置参数直至还原图符合预期；另外当所有图片计算完毕后进入第二部分，否则计算一下帧并把当前还原图当成原图充当下一次计算像素差的前帧。步骤2.实现部分，先整理数据把所有像素差图片合成一张精灵图同时把所有位置信息数组放到js文件中，加载整理后的精灵图和相关位置信息数据文件，开启webworker并根据像素差图片和对应的位置信息还原出原始图片并根据实际情况采用不同的方法实现逐帧动画。上述的基于Canvas和WebWorker的像素差逐帧动画的实现方法，主要利用像素差逐帧动画，剔除掉前后帧中相同或者相似的部分得到像素差，然后根据前一帧和像素差还原出后一帧，既不会丢失数据又能大幅减少加载所需的资源体积，大幅减少Web逐帧动画所需的资源体积，可以在网络环境较差的情况下依然保持良好的用户体验。更近一步，对于步骤I，计算像素差主要是利用HTML5的新特性Canvas，Canvas提供了getlmageData方法，可以得到类数组形式的图片的像素数据，通过计算前后帧图片的类数组形式像素数据的差异就可以得到类数组形式的像素差。另外，对于步骤I中的像素差数据存储为png图片，由于PNG格式是一种优秀的图片存储格式，为了保证得到的像素差数据存储之后不能大于原图，这里依然考虑用Canvas提供的PUtImageData方法，把像素差数据进行一些优化后存储为PNG格式并得到相关的位置信息，得到相关的位置信息的主要优化方法有如下:首先需要剔除掉像素差类数组中的连续无效像素点，并记录剔除点起始位置和剔除点位数得到相关位置信息。然后由于现阶段浏览器对Canvas的实现出于性能的考虑，在像素点的AIpha值小于255的时候，getImageData和putlmageData之间存在数据丢失，为了防止数据丢失对逐帧动画产生影响，这里需要在每个像素点的Alpha值前边手动插入255，从而让原Alpha值后退一位成为下一个像素点的R值;最后还需要在像素差类数组尾部增加一些连续无效像素点，从而让所有输出的像素差PNG图片具有相同的高度或宽度，方便最终精灵图片的合成。以上优化操作主要是基于影响PNG图片大小的因素有，PNG图片的宽度和高度、PNG图片中颜色的分布规律、PNG图片中非完全透明像素点的个数更近一步，对于步骤I，通过像素差还原原始图片其实就是存储像素差的反向操作，不过需要注意的是由于还原像素差操作是用户访问网页时在用户浏览器中进行的，所以和计算以及存储这两个操作不同的是，还原像素差操作需要考虑时间因素，必须尽可能的提高性能；而浏览器中的JAVASCRIPT数组类型的插入和删除操作效率很低，不适合还原像素差这种需要大量计算的操作，所以这里需要实现一种自定义双向链表结构，同时还要优化该链表的查询效率(因为还原像素差操作也涉及到大量查询操作)；最后为了防止大量计算导致页面卡顿，这里还需要利用HTML5的新特性WebWorker，实现多线程编程。另外，对于步骤2中，像素差逐帧动画的实现方式:需要在一定位置存储原图片，然后在原图片中间位置存储像素差，还原出所有动画帧之后再按普通的方式实现逐帧动画，这种方法的优点是能精确控制时间间隔。于其他实施例，对于步骤2中，像素差逐帧动画的实现方式为只需要存储像素差数据，然后按照先后顺序还原一帧显示一帧，这种方法的优点是加载资源少。另外，本发明使用简单数据模拟流程实现如下:[0001]通过前后帧图片路径加载前后帧图片；[0002]设置允许的误差值和最小截取长度；[0003]在前后帧图片都加载完毕之后使用Canvas的getlmageData获得图片的类数组结构的像素数据也就是JAVASCRIPT的ImageData对象；[0004]此时记录后一帧数组中和前一帧数组中相同位置的差值绝对值大于预设误差值的颜色点的值到新的像素数组中，如果不符合条件则新的像素数组中的同一位置记录O，如果在后一帧被记录的颜色点的颜色值等于0(该颜色点也就是无效颜色点)，此时应该记录前一帧的颜色值(用来区分无效颜色点)；[0005]接着按预设的截取位数从新像素数组的开始位置删除无效像素点并记录被截取无效像素点的起始位置得到过渡像素差数组；[0006]由于浏览器对Canvas的实现在alpha值小于255的时候会出现数据丢失的现象，所以在过渡像素差数组的所有alpha位置前手动插入颜色值255，原alpha值向后移动一位成为下一个像素点的R值，得到新的过渡像素差数组；[0007]在新的过渡像素差数组尾部补充一些多余的无效像素点，新补充的无效颜色点也需要记录到位置信息数组中从而得到最终的像素差数组和最终的位置信息数组；[0008]计算像素差数组和位置信息数组的全部流程；[0009]用Canvas的putImageData方法把得到的像素差数组用png形式存储，而得到的位置信息数组直接放置到JAVASCRIPT代码中；[0010]由于计算像素差时允许设置一定的误差值，如果始终使用原图会导致很多帧之后本来肉眼无法分辨的误差被放大以至于能用肉眼分辨，所以进行完一次计算之后需要用这次还原的后帧图片充当下一次计算的前帧图片，以保证不管有多少帧始终只有在最后一帧存在肉眼无法分辨的误差；[0011]根据合适的误差值以及截取长度计算每一帧的像素差之后，把得到的像素差png图片合成一张大的精灵图；[0012]实现像素差逐帧动画时，需要先加载像素差png精灵图，以及位置信息JS文件；[0013]资源加载完毕之后，分别根据像素差数据和对应的位置信息按照计算像素差的反向操作还原出原始图片，然后采取不同的方式实现逐帧动画。本发明的基于Canvas和WebWorker的像素差逐帧动画的实现方法，主要利用像素差逐帧动画，剔除掉前后帧中相同或者相似的部分得到像素差，然后根据前一帧和像素差还原出后一帧，既不会丢失数据又能大幅减少加载所需的资源体积，大幅减少Web逐帧动画所需的资源体积，可以在网络环境较差的情况下依然保持良好的用户体验。上述仅以实施例来进一步说明本发明的技术内容，以便于读者更容易理解，但不代表本发明的实施方式仅限于此，任何依本发明所做的技术延伸或再创造，均受本发明的保护。本发明的保护范围以权利要求书为准。【主权项】1.基于Canvas和WebWorker的像素差逐帧动画的实现方法，其特征在于，包括以下具体步骤:步骤1.计算像素差部分，首先加载前后帧图片然后通过canvas获得前后帧类数组形式的像素数据接着设置允许误差和最小截取长度，参数设置完成之后根据设置的允许误差值计算像素差数组;根据最小截取长度截取像素差数组并获得位置信息数组;在获取的数据中插入255alpha值;把像素差数据存储为png图片，在像素数据后补充无效颜色点并记录到位置信息数据中，最后根据得到的数据反向操作得到后帧还原图，对比还原图和原图，如果不符合预期则重新设置参数直至还原图符合预期；另外当所有图片计算完毕后进入第二部分，否则计算一下帧并把当前还原图当成原图充当下一次计算像素差的前帧；步骤2.实现部分，先整理数据把所有像素差图片合成一张精灵图同时把所有位置信息数组放到js文件中，加载整理后的精灵图和相关位置信息数据文件，开启webworker并根据像素差图片和对应的位置信息还原出原始图片并根据实际情况采用不同的方法实现逐帧动画。2.根据权利要求1所述的基于Canvas和WebWorker的像素差逐帧动画的实现方法，其特征在于，所述步骤I中计算像素差是利用HTML5的新特性Canvas，Canvas提供了getlmageData方法，可以得到类数组形式的图片的像素数据，通过计算前后帧图片的类数组形式像素数据的差异就可以得到类数组形式的像素差。3.根据权利要求1所述的基于Canvas和WebWorker的像素差逐帧动画的实现方法，其特征在于，所述步骤I中的像素差数据存储为png图片用Canvas提供的putImageData方法，把像素差数据进行一些优化后存储为PNG格式并得到相关的位置信息。4.根据权利要求3所述的基于Canvas和WebWorker的像素差逐帧动画的实现方法，其特征在于，所述步骤I中得到相关的位置信息，首先需要剔除掉像素差类数组中的连续无效像素点，并记录剔除点起始位置和剔除点位数得到相关位置信息;然后在每个像素点的Alpha值前边手动插入255，从而让原Alpha值后退一位成为下一个像素点的R值;最后在像素差类数组尾部增加一些连续无效像素点，让所有输出的像素差PNG图片具有相同的高度或宽度，合成最终精灵图片。5.根据权利要求4所述的基于Canvas和WebWorker的像素差逐帧动画的实现方法，其特征在于，所述步骤I中通过像素差还原原始图片是存储像素差的反向操作。6.根据权利要求1所述的基于Canvas和WebWorker的像素差逐帧动画的实现方法，其特征在于，所述步骤2中像素差逐帧动画的实现方式是需要在一定位置存储原图片，然后在原图片中间位置存储像素差，还原出所有动画帧之后再按普通的方式实现逐帧动画。7.根据权利要求1所述的基于Canvas和WebWorker的像素差逐帧动画的实现方法，其特征在于，所述步骤2中像素差逐帧动画的实现方式是只需要存储像素差数据，然后按照先后顺序还原一帧显不一帧。【文档编号】G06T13/80GK105844683SQ201610169268【公开日】2016年8月10日【申请日】2016年3月23日【发明人】李洋,李华,易郑超,温正东【申请人】深圳市富途网络科技有限公司