CN106204693B - 基于图片检测的动画生成方法和装置 - Google Patents

Abstract

本申请公开了一种基于图片检测的动画生成方法和装置，其中该方法包括：获取图片数据，其中，图片数据中包括多个图片；获取图片数据对应的空色值；根据空色值对多个图片进行填充检测以获取多个图片的边缘；根据多个图片的边缘对多个图片进行校准；以及根据校准之后的多个图片生成逐帧序列，并根据逐帧序列生成动画。该方法通过一个图片经过边缘检测来获取该图片中的子图片的区域，并根据该区域得到逐帧序列，之后可根据逐帧序列自动生成动画，在动画的生成过程中，大大减少了人工操作，从而最大程度上降低了开发制作成本，降低了工作效率。

Description

基于图片检测的动画生成方法和装置

技术领域

本申请涉及图像处理技术领域，尤其涉及一种基于图片检测的动画生成方法和装置。

背景技术

随着Web和整个互联网大环境的发展，互联网富应用和多媒体交互发挥着越来越大的作用，例如营销互动、动画、游戏等形式层出不穷，也越来越为大众用户所青睐。特别是在国内更是被成规模的互联网公司广泛使用在网导购路径和营销路径上，如在特别的节日时通过动画互动的方式来表现优惠活动，从而能够吸引更多的用户来关注等。

相关技术中，生成动画的通常做法是技术人员通过使用制图工具人工对齐、制作动画等。但是，这种做法比较依赖人工操作，导致成本高且效率低。

发明内容

本申请的目的旨在至少在一定程度上解决相关技术中的技术问题之一。

为此，本申请的第一个目的在于提出一种基于图片检测的动画生成方法。该方法通过一张图片经过边缘检测来获取该图片中的子图片的区域，并根据该区域得到逐帧序列，之后可根据逐帧序列自动生成动画，在动画的生成过程中，大大减少了人工操作，从而最大程度上降低了开发制作成本，降低了工作效率。

本申请的第二个目的在于提出一种基于图片检测的动画生成装置。

为了实现上述目的，本申请第一方面实施例的基于图片检测的动画生成方法，包括：获取图片数据，其中，所述图片数据中包括多个图片；获取所述图片数据对应的空色值；根据所述空色值对所述多个图片进行填充检测以获取所述多个图片的边缘；根据所述多个图片的边缘对所述多个图片进行校准；以及根据校准之后的多个图片生成逐帧序列，并根据所述逐帧序列生成动画。

本申请实施例的基于图片检测的动画生成方法，可先获取图片数据，图片数据中包括多个图片，之后可获取图片数据对应的空色值，并根据空色值对多个图片进行填充检测以获取多个图片的边缘，并根据多个图片的边缘对多个图片进行校准，以及根据校准之后的多个图片生成逐帧序列，并根据逐帧序列生成动画，即通过一个图片经过边缘检测来获取该图片中的子图片的区域，并根据该区域得到逐帧序列，之后可根据逐帧序列自动生成动画，在动画的生成过程中，大大减少了人工操作，从而最大程度上降低了开发制作成本，降低了工作效率。

为了实现上述目的，本申请第二方面实施例的基于图片检测的动画生成装置，包括：第一获取模块，用于获取图片数据，其中，所述图片数据中包括多个图片；第二获取模块，用于获取所述图片数据对应的空色值；检测模块，用于根据所述空色值对所述多个图片进行填充检测以获取所述多个图片的边缘；校准模块，用于根据所述多个图片的边缘对所述多个图片进行校准；以及生成模块，用于根据校准之后的多个图片生成逐帧序列，并根据所述逐帧序列生成动画。

本申请实施例的基于图片检测的动画生成装置，可通过第一获取模块获取图片数据，图片数据中包括多个图片，第二获取模块获取图片数据对应的空色值，检测模块根据空色值对多个图片进行填充检测以获取多个图片的边缘，校准模块根据多个图片的边缘对多个图片进行校准，生成模块根据校准之后的多个图片生成逐帧序列，并根据逐帧序列生成动画，即通过一个图片经过边缘检测来获取该图片中的子图片的区域，并根据该区域得到逐帧序列，之后可根据逐帧序列自动生成动画，在动画的生成过程中，大大减少了人工操作，从而最大程度上降低了开发制作成本，降低了工作效率。

本申请附加的方面和优点将在下面的描述中部分给出，部分将从下面的描述中变得明显，或通过本申请的实践了解到。

附图说明

本申请上述的和/或附加的方面和优点从下面结合附图对实施例的描述中将变得明显和容易理解，其中，

图1是根据本申请一个实施例的基于图片检测的动画生成方法的流程图；

图2是根据本申请一个实施例的校准工具对图片进行预览校准的示例图；

图3是根据本申请一个实施例的生成逐帧序列的效果示例图；以及

图4是根据本申请一个实施例的基于图片检测的动画生成装置的结构示意图。

具体实施方式

下面详细描述本申请的实施例，所述实施例的示例在附图中示出，其中自始至终相同或类似的标号表示相同或类似的元件或具有相同或类似功能的元件。下面通过参考附图描述的实施例是示例性的，旨在用于解释本申请，而不能理解为对本申请的限制。

下面参考附图描述本申请实施例的基于图片检测的动画生成方法和装置。

图1是根据本申请一个实施例的基于图片检测的动画生成方法的流程图。需要说的是，本申请实施例的基于图片检测的动画生成方法不仅限于适用于终端(如PC端、或移动终端)的浏览器端，也可以使用服务端来实现。

如图1所示，该基于图片检测的动画生成方法可以包括：

S101，获取图片数据，其中，图片数据中包括多个图片。

例如，假设本申请实施例的基于图片检测的动画生成方法适用于终端(如PC端、或移动终端)的浏览器端，则可通过浏览器中的图片标签提供的Onload事件获取加载的图片，并通过FileReader()对象的readAsDataURL()方法来读取该加载图片中的图片数据或直接将该加载的图片载入到CANVAS(HTML5中的图形容器，定义了一个API(应用程序编程接口)支持脚本化客户端绘图操作)元素中，以得到图片数据，其中，该图片数据中可包括多个图片。

又如，假设本申请实施例的基于图片检测的动画生成方法使用服务端来实现，则可通过Nodejs加载node-canvas模块以找到图片对应的绝对路径，并根据该绝对路径将对应的图片载入到CANVAS元素中，得到图片数据，其中，该图片数据可包括多个图片。

S102，获取图片数据对应的空色值。

具体而言，在本申请的实施例中，获取图片数据对应的空色值的具体实现过程可如下：可先获取图片中各个像素点的RGBA(代表Red(红色)、Green(绿色)、Blue(蓝色)和Alpha的色彩空间)值，并进行统计，之后，可将比重最大的RGBA值作为空色值。更具体地，在本步骤中，可通过采集来获取图片数据对应的空色值，即可先计算图片数据中多个图片的各个像素点的RGBA值，并通过概率统计的方法对得到的RGBA值进行统计，之后可将比重最大的RGBA值设定为空色值。

在本申请的另一个具体实施例中，空色值可为透明值。也就是说，图片数据对应的空色值还可通过指定来获得，例如，可直接将透明的RGBA值指定为空色值，其中，透明的RGBA值可为(0,0,0,0)。

S103，根据空色值对多个图片进行填充检测以获取多个图片的边缘。

具体而言，在本申请的实施例中，可通过矩形填充检测方法或深度填充检测方法根据空色值对多个图片进行填充检测以获取多个图片的边缘。

其中，在本申请的实施例中，通过矩形填充检测方法获取多个图片的边缘的具体实现过程可包括以下步骤：获取图片中的非空点；根据起始方向和扩展范围依次进行扩展填充直至像素点的四个方向的边界像素点的像素值均为空色值。具体地，可先选定图片中的任意非空点，以该非空点的上部为起始方向(可以理解，还可以以其他如下左右任何方向均可为起始方向)，以单位像素(1px)为扩展范围，顺时针(或逆时针)一次扩展填充，直到四个方向的边界像素值均为空色值时，停止扩展填充，此时已得到图片的外接矩形边缘的四个点坐标，即得到了图片的位置和大小。例如，可通过以下代码程序来实现多个图片的边缘的获取：

需要说明的是，在本申请的实施例中，可通过以下步骤判断像素值是否为空色值：将像素值的RGBA值转换为字符串，并字符串与空色值对应的空色规则进行正则校验；以及如一致，则判断像素值为空色值。例如，可通过如下式子来实现检测值为(0,0,0,0)的RGBA值是否为空色值：/{\"0":0(,\"\d+\":0)+}/.test(JSON.stringify(data))。由此，由于在检测图片边缘时需要计算RGBA值，因此会造成大量的数据遍历和属性访问，为此通过采用字符正则方式替代属性值比较，即先将RGBA值转为字符串，之后使用正则校验是否符合空色规则，从而使得内存的用量和计算复杂度指数大大降低。

此外，在本申请的实施例中，通过深度填充检测方法获取多个图片的边缘的具体实现过程可如下：可先接收起始点、目标颜色和替换颜色三个参数，之后，可通过遍历算法对所有的节点进行遍历以寻找和起始节点相连的节点(如通过一条目标颜色的路径相连)，然后改变这些节点的颜色为替换颜色。其中，遍历的方式可以分为四路(即不考虑对角线方向)和八路(即考虑对角线方向)。例如，可通过以下代码程序来实现图片的边缘的获取：

function fill_sample(x,y,color){

area[x][y]＝color；

if(x>0&&area[x-1][y]＝＝0)flood_fill(x-1,y,color)；

if(y>0&&area[x][y-1]＝＝0)flood_fill(x,y-1,color)；

if(x<MAX_X&&area[x+1][y]＝＝0)flood_fill(x+1,y,color)；

if(y<MAX_Y&&area[x][y+1]＝＝0)flood_fill(x,y+1,color)；

}

需要说明的是，在本步骤中，图片的边缘的获取还可通过其他方式来实现，只要是以检测区域为目的的方式均可实现本步骤，因此本申请对其不做具体限定。

S104，根据多个图片的边缘对多个图片进行校准。

具体地，可根据多个图片的边缘通过预览对多个图片进行校准，即预览该多个图片，通过调节图片的坐标和在图片数据中的顺序来对该图片进行微调。例如，如图2所示，为校准工具对图片进行预览校准的示例图，该校准工具可对图片进行预览，并为用户提供调节按钮，以方便用户对该图片进行校准。

S105，根据校准之后的多个图片生成逐帧序列，并根据逐帧序列生成动画。

具体地，可将校准之后的图片生成对应的逐帧序列，该逐帧序列表达了该图片在整图上的位置、大小边缘和缩放比例，其中，逐帧序列的形式可为“[[86,186,56,55,122,122.5,56,55],[86,124,56,56,122,122,56,56],[86,49,56,54,122,123,56,54]]”。之后，可直接通过CANVAS drawImage方法绘制帧动画或通过node gif模块生成gif图片。本领域的技术人员可以理解，本步骤对动画的最终表达形式，可以是css(dom)动画，可以是canvas动画，也可以是gif动画，也或是其他展示形式。需要说明的是，本步骤的动画生成方式可概括所有使用帧序列生成动画的方式。例如，如图3所示，为生成逐帧序列的效果示例图。

需要说明的是，本申请实施例的基于图片检测的动画生成方法还可通过扩展逐帧序列中的每帧时间字段，以能够支持所有复杂的动画。

本申请实施例的基于图片检测的动画生成方法，可先获取图片数据，图片数据中包括多个图片，之后可获取图片数据对应的空色值，并根据空色值对多个图片进行填充检测以获取多个图片的边缘，并根据多个图片的边缘对多个图片进行校准，以及根据校准之后的多个图片生成逐帧序列，并根据逐帧序列生成动画，即通过一个图片经过边缘检测来获取该图片中的子图片的区域，并根据该区域得到逐帧序列，之后可根据逐帧序列自动生成动画，在动画的生成过程中，大大减少了人工操作，从而最大程度上降低了开发制作成本，降低了工作效率。

需要说明的是，在本申请的一个实施例中，还可通过统一的技术手段在各个平台(如)操作系统：window，mac，unix，l inux，各种版本各种终端设备浏览器)都可以运行且提供一致的API，即通过提供的API来实现统一的跨终端动画的解决方案。

为了实现上述实施例，本申请还提出了一种基于图片检测的动画生成装置。

图4是根据本申请一个实施例的基于图片检测的动画生成装置的结构示意图。需要说的是，本申请实施例的基于图片检测的动画生成装置不仅限于适用于终端(如PC端、或移动终端)的浏览器端，也可以使用服务端来实现。

如图4所示，该基于图片检测的动画生成装置可以包括：第一获取模块10、第二获取模块20、检测模块30、校准模块40和生成模块50。

具体地，第一获取模块10可用于获取图片数据，其中，图片数据中包括多个图片。例如，假设本申请实施例的基于图片检测的动画生成装置适用于终端(如PC端、或移动终端)的浏览器端，则第一获取模块10可通过浏览器中的图片标签提供的Onload事件获取加载的图片，并通过FileReader()对象的readAsDataURL()方法来读取该加载图片中的图片数据或直接将该加载的图片载入到CANVAS(HTML5中的图形容器，定义了一个API(应用程序编程接口)支持脚本化客户端绘图操作)元素中，以得到图片数据，其中，该图片数据中可包括多个图片。

又如，假设本申请实施例的基于图片检测的动画生成装置使用服务端来实现，则第一获取模块10可通过Nodejs加载node-canvas模块以找到图片对应的绝对路径，并根据该绝对路径将对应的图片载入到CANVAS元素中，得到图片数据，其中，该图片数据可包括多个图片。

第二获取模块20可用于获取图片数据对应的空色值。具体而言，在本申请的实施例中，第二获取模块20获取图片数据对应的空色值的具体实现过程可如下：可先获取图片中各个像素点的RGBA值，并进行统计，之后，可将比重最大的RGBA值作为空色值。更具体地，第二获取模块20可通过采集来获取图片数据对应的空色值，即可先计算图片数据中多个图片的各个像素点的RGBA值，并通过概率统计的方法对得到的RGBA值进行统计，之后可将比重最大的RGBA值设定为空色值。

在本申请的另一个具体实施例中，空色值可为透明值。也就是说，图片数据对应的空色值还可通过指定来获得，例如，第二获取模块20可直接将透明的RGBA值指定为空色值，其中，透明的RGBA值可为(0,0,0,0)。

检测模块30可用于根据空色值对多个图片进行填充检测以获取多个图片的边缘。具体而言，在本申请的实施例中，检测模块30可通过矩形填充检测方法或深度填充检测方法根据空色值对多个图片进行填充检测以获取多个图片的边缘。

其中，在本申请的实施例中，检测模块30通过矩形填充检测方法获取多个图片的边缘的具体实现过程可如下：获取图片中的非空点；根据起始方向和扩展范围依次进行扩展填充直至像素点的四个方向的边界像素点的像素值均为空色值。具体地，可先选定图片中的任意非空点，以该非空点的上部为起始方向(可以理解，还可以以其他如下左右任何方向均可为起始方向)，以单位像素(1px)为扩展范围，顺时针(或逆时针)一次扩展填充，直到四个方向的边界像素值均为空色值时，停止扩展填充，此时已得到图片的外接矩形边缘的四个点坐标，即得到了图片的位置和大小。

需要说明的是，在本申请的实施例中，可通过以下步骤判断像素值是否为空色值：将像素值的RGBA值转换为字符串，并字符串与空色值对应的空色规则进行正则校验；以及如一致，则判断像素值为空色值。例如，可通过如下式子来实现检测值为(0,0,0,0)的RGBA值是否为空色值：/{\"0":0(,\"\d+\":0)+}/.test(JSON.stringify(data))。由此，由于在检测图片边缘时需要计算RGBA值，因此会造成大量的数据遍历和属性访问，为此通过采用字符正则方式替代属性值比较，即先将RGBA值转为字符串，之后使用正则校验是否符合空色规则，从而使得内存的用量和计算复杂度指数大大降低。

此外，在本申请的实施例中，检测模块30通过深度填充检测方法获取多个图片的边缘的具体实现过程可如下：可先接收起始点、目标颜色和替换颜色三个参数，之后，可通过遍历算法对所有的节点进行遍历以寻找和起始节点相连的节点(如通过一条目标颜色的路径相连)，然后改变这些节点的颜色为替换颜色。其中，遍历的方式可以分为四路(即不考虑对角线方向)和八路(即考虑对角线方向)。

需要说明的是，图片的边缘的获取还可通过其他方式来实现，只要是以检测区域为目的的方式均可实现本步骤，因此本申请对其不做具体限定。

校准模块40可用于根据多个图片的边缘对多个图片进行校准。更具体地，校准模块40可根据多个图片的边缘通过预览对多个图片进行校准，即预览该多个图片，通过调节图片的坐标和在图片数据中的顺序来对该图片进行微调。例如，如图2所示，为校准工具对图片进行预览校准的示例图，该校准工具可对图片进行预览，并为用户提供调节按钮，以方便用户对该图片进行校准。

生成模块50可用于根据校准之后的多个图片生成逐帧序列，并根据逐帧序列生成动画。更具体地，生成模块50可将校准之后的图片生成对应的逐帧序列，该逐帧序列表达了该图片在整图上的位置、大小边缘和缩放比例，其中，逐帧序列的形式可为“[[86,186,56,55,122,122.5,56,55],[86,124,56,56,122,122,56,56],[86,49,56,54,122,123,56,54]]”。之后，可直接通过CANVAS drawImage方法绘制帧动画或通过node gif模块生成gif图片。本领域的技术人员可以理解，本步骤对动画的最终表达形式，可以是css(dom)动画，可以是canvas动画，也可以是gif动画，也或是其他展示形式。需要说明的是，本步骤的动画生成方式可概括所有使用帧序列生成动画的方式。例如，如图3所示，为生成逐帧序列的效果示例图。

本申请实施例的基于图片检测的动画生成装置，可通过第一获取模块获取图片数据，图片数据中包括多个图片，第二获取模块获取图片数据对应的空色值，检测模块根据空色值对多个图片进行填充检测以获取多个图片的边缘，校准模块根据多个图片的边缘对多个图片进行校准，生成模块根据校准之后的多个图片生成逐帧序列，并根据逐帧序列生成动画，即通过一个图片经过边缘检测来获取该图片中的子图片的区域，并根据该区域得到逐帧序列，之后可根据逐帧序列自动生成动画，在动画的生成过程中，大大减少了人工操作，从而最大程度上降低了开发制作成本，降低了工作效率。

在本申请的描述中，需要理解的是，术语“第一”、“第二”仅用于描述目的，而不能理解为指示或暗示相对重要性或者隐含指明所指示的技术特征的数量。由此，限定有“第一”、“第二”的特征可以明示或者隐含地包括至少一个该特征。在本申请的描述中，“多个”的含义是至少两个，例如两个，三个等，除非另有明确具体的限定。

在本说明书的描述中，参考术语“一个实施例”、“一些实施例”、“示例”、“具体示例”、或“一些示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本申请的至少一个实施例或示例中。在本说明书中，对上述术语的示意性表述不必须针对的是相同的实施例或示例。而且，描述的具体特征、结构、材料或者特点可以在任一个或多个实施例或示例中以合适的方式结合。此外，在不相互矛盾的情况下，本领域的技术人员可以将本说明书中描述的不同实施例或示例以及不同实施例或示例的特征进行结合和组合。

流程图中或在此以其他方式描述的任何过程或方法描述可以被理解为，表示包括一个或更多个用于实现特定逻辑功能或过程的步骤的可执行指令的代码的模块、片段或部分，并且本申请的优选实施方式的范围包括另外的实现，其中可以不按所示出或讨论的顺序，包括根据所涉及的功能按基本同时的方式或按相反的顺序，来执行功能，这应被本申请的实施例所属技术领域的技术人员所理解。

在流程图中表示或在此以其他方式描述的逻辑和/或步骤，例如，可以被认为是用于实现逻辑功能的可执行指令的定序列表，可以具体实现在任何计算机可读介质中，以供指令执行系统、装置或设备(如基于计算机的系统、包括处理器的系统或其他可以从指令执行系统、装置或设备取指令并执行指令的系统)使用，或结合这些指令执行系统、装置或设备而使用。就本说明书而言，"计算机可读介质"可以是任何可以包含、存储、通信、传播或传输程序以供指令执行系统、装置或设备或结合这些指令执行系统、装置或设备而使用的装置。计算机可读介质的更具体的示例(非穷尽性列表)包括以下：具有一个或多个布线的电连接部(电子装置)，便携式计算机盘盒(磁装置)，随机存取存储器(RAM)，只读存储器(ROM)，可擦除可编辑只读存储器(EPROM或闪速存储器)，光纤装置，以及便携式光盘只读存储器(CDROM)。另外，计算机可读介质甚至可以是可在其上打印所述程序的纸或其他合适的介质，因为可以例如通过对纸或其他介质进行光学扫描，接着进行编辑、解译或必要时以其他合适方式进行处理来以电子方式获得所述程序，然后将其存储在计算机存储器中。

应当理解，本申请的各部分可以用硬件、软件、固件或它们的组合来实现。在上述实施方式中，多个步骤或方法可以用存储在存储器中且由合适的指令执行系统执行的软件或固件来实现。例如，如果用硬件来实现，和在另一实施方式中一样，可用本领域公知的下列技术中的任一项或他们的组合来实现：具有用于对数据信号实现逻辑功能的逻辑门电路的离散逻辑电路，具有合适的组合逻辑门电路的专用集成电路，可编程门阵列(PGA)，现场可编程门阵列(FPGA)等。

本技术领域的普通技术人员可以理解实现上述实施例方法携带的全部或部分步骤是可以通过程序来指令相关的硬件完成，所述的程序可以存储于一种计算机可读存储介质中，该程序在执行时，包括方法实施例的步骤之一或其组合。

此外，在本申请各个实施例中的各功能单元可以集成在一个处理模块中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个模块中。上述集成的模块既可以采用硬件的形式实现，也可以采用软件功能模块的形式实现。所述集成的模块如果以软件功能模块的形式实现并作为独立的产品销售或使用时，也可以存储在一个计算机可读取存储介质中。

上述提到的存储介质可以是只读存储器，磁盘或光盘等。

尽管上面已经示出和描述了本申请的实施例，可以理解的是，上述实施例是示例性的，不能理解为对本申请的限制，本领域的普通技术人员在本申请的范围内可以对上述实施例进行变化、修改、替换和变型。

Claims (6)

1.一种基于图片检测的动画生成方法，其特征在于，包括以下步骤：

获取图片数据，其中，所述图片数据中包括均位于同一个整图上的多个图片；

获取所述图片数据对应的空色值，其中，所述获取所述图片数据对应的空色值具体包括：获取所述图片中各个像素点的RGBA值，并进行统计；将比重最大的RGBA值作为所述空色值；

根据所述空色值对所述多个图片进行填充检测以获取所述多个图片的边缘，其中，所述根据所述空色值对所述多个图片进行填充检测以获取所述多个图片的边缘具体包括：通过矩形填充检测方法或深度填充检测方法根据所述空色值对所述多个图片进行填充检测以获取所述多个图片的边缘，其中，所述矩形填充检测方法具体包括：获取所述图片中的非空点，根据起始方向和扩展范围依次进行扩展填充直至像素点的四个方向的边界像素点的像素值均为所述空色值；所述通过深度填充检测方法具体包括：接收起始点、目标颜色和替换颜色三个参数，通过遍历算法对所有的节点进行遍历以寻找和起始节点相连的节点，并改变这些节点的颜色为替换颜色；

根据所述多个图片的边缘对所述多个图片进行校准；以及

根据校准之后的多个图片生成表达多个图片在整图上的位置、大小边缘和缩放比例的逐帧序列，并根据所述逐帧序列生成动画。

2.如权利要求1所述的基于图片检测的动画生成方法，其特征在于，所述空色值为透明值。

3.如权利要求1所述的基于图片检测的动画生成方法，其特征在于，通过以下步骤判断像素值是否为所述空色值：

将所述像素值的RGBA值转换为字符串，并将所述字符串与所述空色值对应的空色规则进行正则校验；以及

如一致，则判断所述像素值为所述空色值。

4.一种基于图片检测的动画生成装置，其特征在于，包括：

第一获取模块，用于获取图片数据，其中，所述图片数据中包括均属于同一张整图的多个图片；

第二获取模块，用于获取所述图片数据对应的空色值，其中，所述第二获取模块具体用于：获取所述图片中各个像素点的RGBA值，并进行统计；将比重最大的RGBA值作为所述空色值；

检测模块，用于根据所述空色值对所述多个图片进行填充检测以获取所述多个图片的边缘，其中，所述检测模块具体用于：通过矩形填充检测方法或深度填充检测方法根据所述空色值对所述多个图片进行填充检测以获取所述多个图片的边缘，其中，所述矩形填充检测方法具体包括：获取所述图片中的非空点，根据起始方向和扩展范围依次进行扩展填充直至像素点的四个方向的边界像素点的像素值均为所述空色值；所述通过深度填充检测方法具体包括：接收起始点、目标颜色和替换颜色三个参数；通过遍历算法对所有的节点进行遍历以寻找和起始节点相连的节点，并改变这些节点的颜色为替换颜色；

校准模块，用于根据所述多个图片的边缘对所述多个图片进行校准；以及

生成模块，用于根据校准之后的多个图片生成表达多个图片在整图上的位置、大小边缘和缩放比例的逐帧序列，并根据所述逐帧序列生成动画。

5.如权利要求4所述的基于图片检测的动画生成装置，其特征在于，所述空色值为透明值。

6.如权利要求5所述的基于图片检测的动画生成装置，其特征在于，通过以下步骤判断像素值是否为所述空色值：

将所述像素值的RGBA值转换为字符串，并将所述字符串与所述空色值对应的空色规则进行正则校验；以及

如一致，则判断所述像素值为所述空色值。