CN112100540A

CN112100540A - 基于canvas的图片交叉镜像平铺方法、存储介质

Info

Publication number: CN112100540A
Application number: CN202010812441.7A
Authority: CN
Inventors: 刘德建; 陈铭; 陈耀灿; 郭玉湖; 陈宏�
Original assignee: Fujian Tianquan Educational Technology Ltd
Current assignee: Fujian Tianquan Educational Technology Ltd
Priority date: 2020-08-13
Filing date: 2020-08-13
Publication date: 2020-12-18
Anticipated expiration: 2040-08-13
Also published as: CN112100540B

Abstract

本发明提供基于CANVAS的图片交叉镜像平铺方法、存储介质，方法包括：新建一Canvas DOM，并设置其宽高为图像的宽高；获取预设的一组交叉镜像排列图案中各个平铺图像的翻转信息和对应排列顺序的标识；关联标识和对应的翻转信息；依据图像的宽高、平铺图像的宽高以及横向平铺间隔和纵向平铺间隔，计算得到横向平铺数量和纵向平铺数量；以横向平铺数量为第一层，纵向平铺数量为第二层，对照图案，以关联、平铺图像及其宽高为参数，调用Canvas DOM的2D图像绘制工具集执行嵌套循环操作，在所述Canvas DOM中绘制所述平铺图像。本发明利用Canvas提供绘制2D图形图像的特点，将对应预设交叉镜像排列图案，全自动地将各个平铺图像绘制到一个Canvas DOM中。

Description

基于CANVAS的图片交叉镜像平铺方法、存储介质

技术领域

本发明涉及图片绘制领域，具体涉及基于canvas的图片交叉镜像平铺方法、存储介质。

背景技术

很多和图像有关的在线产品，例如在线图片编辑器、在线产品个性Logo定制等，在很多情况下都有提供图片平铺功能的需求，特别是图片交叉镜像平铺的需求。图片平铺效果如图1所示。

现有的平铺方案，是将一个原图的Image DOM，根据平铺尺寸克隆出长*宽的个数的Image DOM，对照图1，就是克隆出5*7＝35个Image Dom，然后依据需求决定每个DOM的位置和方向。这种实现方法由于存在大量的Image Dom，将占用大量内存，从而导致浏览器的渲染性能非常低下，数量多的时候，将大概率出现用户无法操作的卡顿或无响应情况。

因此，有需求提供全新的图片平铺方法以解决上述问题。

发明内容

本发明所要解决的技术问题是：提供基于canvas的图片交叉镜像平铺方法、存储介质，能够提高图片平铺效率，同时优化系统性能，提升用户体验。

为了解决上述技术问题，本发明采用的技术方案为：

基于canvas的图片平铺方法，包括：

分别设置横向平铺间隔和纵向平铺间隔；

新建一Canvas DOM，并设置其宽高为图像的宽高；

获取预设的一组交叉镜像排列图案中各个平铺图像的翻转信息和对应排列顺序的标识；

关联所述标识和对应的翻转信息；

依据图像的宽高、平铺图像的宽高以及所述横向平铺间隔和纵向平铺间隔，计算得到横向平铺数量和纵向平铺数量；

以所述横向平铺数量为第一层，所述纵向平铺数量为第二层，对照所述图案，以所述关联、平铺图像及其宽高为参数，调用所述Canvas DOM的2D图像绘制工具集执行嵌套循环操作，在所述Canvas DOM中绘制所述平铺图像。

本发明提供的另一个技术方案为：

一种计算机可读存储介质，其上存储有计算机程序，所述程序在被处理器执行时，能够实现上述基于canvas的图片交叉镜像平铺方法所包含的步骤。

本发明的有益效果在于：本发明利用Canvas提供绘制2D图形图像的特点，将多个平铺图像，绘制到一个Canvas DOM中，并且无需创建多个Image DOM，进而解决了过多DOM导致浏览器渲染性能低下的问题，从而使得系统性能得到优化，不管是内存还是CPU利用率上都优于现有技术，提高了用户体验；进一步地，由于平铺过程全自动执行，且有效避免了卡顿问题，因此还能显著提高平铺效率；再进一步的，还支持自定义交叉镜像排列方式以及灵活设定平铺图像之间的间隔，实现自定义平铺效果，更符合实际使用的需求，实用性更强。

附图说明

图1为一平铺效果示意图；

图2为本发明一实施例一种基于canvas的图片交叉镜像平铺方法的流程示意图；

图3为本发明一实施例中预设的一组交叉镜像排列图案的示例图；

图4为本发明实施例一的一种基于canvas的图片交叉镜像平铺方法的流程示意图；

图5为本发明实施例三中源图像的Image DOM的示意图；

图6为本发明实施例三中嵌套循环过程遍历到的第一个位置的定位效果图；

图7为本发明实施例三中嵌套循环过程遍历到的第二个位置的定位效果图；

图8为本发明实施例三中嵌套循环过程遍历到的第三个位置的定位效果图；

图9为本发明实施例三中嵌套循环过程遍历到的第四个位置的定位效果图；

图10为本发明实施例三中嵌套循环过程遍历到的第五个位置的定位效果图；

图11为本发明实施例三中嵌套循环过程遍历到的第六个位置的定位效果图。

具体实施方式

为详细说明本发明的技术内容、所实现目的及效果，以下结合实施方式并配合附图予以说明。

本发明最关键的构思在于：利用Canvas提供绘制2D图形图像的特点，将对应预设交叉镜像排列图案，全自动地将各个平铺图像绘制到一个Canvas DOM中。

本发明涉及的技术术语解释:

请参照图2，本发明提供基于canvas的图片交叉镜像平铺方法，包括：

分别设置横向平铺间隔和纵向平铺间隔；

新建一Canvas DOM，并设置其宽高为图像的宽高；

关联所述标识和对应的翻转信息；

从上述描述可知，本发明的有益效果在于：不论需要平铺多少次，都只有一个DOM，所以性能得到了极大优化，不管是内存还是CPU利用率上都优于现有技术，提高了用户体验；同时，还支持自定义交叉镜像排列方式以及灵活设定平铺图像之间的间隔，实现自定义平铺效果，更符合实际使用的需求，实用性更强。

进一步地，还包括：

将所述Canvas DOM中绘制的内容以图片格式进行存储；

新建一Image DOM，并设置其路径为所述存储的路径；

将所述Image DOM挂载到DOM树中。

由上述描述可知，不管需要将平铺图像平铺多少次，在DOM树中，都只有一个ImageDOM，相较于现有技术需要克隆出大量Image DOM的方式，极大优化了浏览器的渲染性能。

进一步地，所述在所述Canvas DOM中绘制所述平铺图像，包括：

计算当前遍历到的对应第一层第x个，第二层第y个位置的平铺图像对应所述Canvas DOM的偏移量；

依据所述图案，计算当前遍历到的对应第一层第x个，第二层第y个位置所对应的排列顺序的标识；

依据所述关联确定计算得到的标识对应的翻转信息；

调用所述Canvas DOM的2D图像绘制工具集，以所述偏移量、所述翻转信息、平铺图像及其宽高为参数，将所述平铺图像绘制到所述Canvas DOM中的对应位置；

继续遍历，直至嵌套循环操作结束。

由上述描述可知，利用嵌套循环操作，结合预设的一组交叉镜像排列图案中平铺图案的规则分布特点，能够快速且准确地在canvas中绘制好平铺图像的平铺效果，因此显著提高了绘制效率。

进一步地，所述获取预设的一组交叉镜像排列图案中各个平铺图像的翻转信息和对应排列顺序的标识，包括：

创建一getMirrorImage函数；

依据预设的一组交叉镜像排列图案，依次调用所述getMirrorImage函数对原始平铺图像进行翻转，获取所述图案中的各个平铺图像；

记录所述各个平铺图像的当前原点坐标相对于翻转前的平铺图像的原点坐标的变化和缩放比例；

以所述变化作为各个平铺图像的翻转信息；以所述缩放比例作为各个平铺图像对应排列顺序的标识。

由上述描述可知，直接利用getMirrorImage函数能高效且准确地获取平铺结果中各个平铺图像的翻转信息和排列顺序标识，从而建立准确的关联关系，为后续结合嵌套循环操作进行高效平铺提供准确的技术支持。

进一步地，还包括：

每次调用所述getMirrorImage函数对原始平铺图像进行翻转，获取对应的平铺图像，并记录对应的所述变化和所述缩放比例之后，将清空Canvas DOM。

由上述描述可知，在确定各个平铺图像的翻转角度和缩放比例阶段，清空画布后再进行下一个平铺图像的绘制，能够避免有效避免出错，同时起到节约内存和优化效率的作用。

本发明提供的另一个技术方案为：

一种计算机可读存储介质，其上存储有计算机程序，所述程序在被处理器执行时，能够实现下述基于canvas的图片交叉镜像平铺方法所包含的步骤：

分别设置横向平铺间隔和纵向平铺间隔；

新建一Canvas DOM，并设置其宽高为图像的宽高；

关联所述标识和对应的翻转信息；

进一步地，还包括：

将所述Canvas DOM中绘制的内容以图片格式进行存储；

新建一Image DOM，并设置其路径为所述存储的路径；

将所述Image DOM挂载到DOM树中。

进一步地，所述在所述Canvas DOM中绘制所述平铺图像，包括：

依据所述关联确定计算得到的标识对应的翻转信息；

继续遍历，直至嵌套循环操作结束。

创建一getMirrorImage函数；

进一步地，还包括：

从上述描述可知，对应本领域普通技术人员可以理解实现上述技术方案中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来实现的，所述的程序可存储于一计算机可读取的存储介质中，该程序在执行时，可包括如上述各方法的流程。所述程序在被处理器执行后，同样能够实现对应各方法的有益效果。

其中，所述的存储介质可以是磁盘、光碟、只读存储记忆体(Read-Only Memory，ROM)或随机存储记忆体(Random Access Memory，RAM)等。

实施例一

请参照图3，本实施例提供基于canvas的图片交叉镜像平铺方法，能够更高效、操作更便捷，更顺利地完成所需的图片平铺效果。

本实施例的方法包括：

S1：获取用来平铺的平铺图像Image DOM；

S2：获取用户设置的横向平铺间隔和纵向平铺间隔；

S3：新建一个Canvas DOM，并依据用户设置的整体图像尺寸设置其宽高；

S4：获取Canvas DOM的context 2d的对象，即Canvas DOM的2D图像绘制工具集；

S5：获取预设的一组交叉镜像排列图案；如图3所示，所述图案由至少三个平铺图像以交叉镜像的排列方式而成。

S6：获取上述图案中的各个平铺图像各自对应的翻转信息和对应排列顺序的标识；优选以第一个平铺图像为参照，获取其它各个平铺图像对应的翻转信息和排列顺序的标识。

S7：关联所述标识和对应的翻转信息；优选以键值对方式存储所述关联关系，更不易出错，查询效率更高。

S8：依据整体图像的宽高、平铺图像的宽高以及所述横向平铺间隔和纵向平铺间隔，计算得到横向平铺数量和纵向平铺数量；

S9：以所述横向平铺数量为第一层，所述纵向平铺数量为第二层，对照所述图案，以所述关联、平铺图像及其宽高为参数，调用所述Canvas DOM的2D图像绘制工具集执行嵌套循环操作，在所述Canvas DOM中绘制出横向平铺数量×纵向平铺数量个平铺图像。

其中，所述在所述Canvas DOM中绘制出横向平铺数量×纵向平铺数量个平铺图像，具体可以通过以下步骤实现：

计算当前遍历到的对应第一层第x个，第二层第y个位置的平铺图像对应所述Canvas DOM的偏移量；依据所述图案，计算当前遍历到的这个位置所对应的排列顺序的标识；依据所述关联确定计算得到的标识对应的翻转信息；调用所述Canvas DOM的2D图像绘制工具集，以所述偏移量、所述关联、平铺图像及其宽高为参数，将所述平铺图像绘制到所述Canvas DOM中的对应位置；继续遍历，直至嵌套循环操作结束。

S10：将所述Canvas DOM中绘制的内容以图片格式进行存储，优选存储在本地；

S11：新建一Image DOM，并设置其路径为所述存储的路径，即用来显示上述存储在本地的图片；

S12：将所述Image DOM挂载到DOM树中。

可以看出，不论平铺的面积多大，需要平铺多少次，在DOM中都只需要增加了一个Image DOM，因此在内存上优于现有技术；在计算上，预先将一组交叉镜像排列图案中各个平铺图像的翻转信息和对应排列顺序的标识的关联关系记录在哈希数据结构中，然后判断遍历过程中当前绘制平铺图像对应的哈希位置，实现上比现有实现方案更加简单；在CPU利用率也优于现有技术，所以性能得到了极大优化。

实施例二

本实施例对应实施例一，做进一步扩展：

1、获取用来平铺的原图像Image DOM(取名image)，读取其宽高，分别取名image_width和image_height；

2、获取横向平铺的间隔和纵向平铺的间隔，分别取名x_space和y_space；

3、新建一个Canvas DOM(为方便说明，本实施例中取名canvas)，设置其宽、高为需要平铺的尺寸，即最终效果图的尺寸，分别取名canvas_width和canvas_height；

4、获取canvas的context 2d的对象(为方便说明，将其取名为context)；

5、创建一个函数resetCanvas，该函数的功能是清空之前所有在canvas上绘制的图片；

6、获取预设的一组由4个平铺图像以交叉镜像排列的图案，如图3所示；

7、创建一个函数getMirrorImage，该函数的功能是，根据一个原始图片，生成一个新的被水平或者垂直翻转后的图片；

函数getMirrorImage接收以下参数：

hor，表示是否需要水平翻转，true表示需要，false表示不需要；

ver，表示是否需要垂直翻转，true表示需要，false表示不需要；

依据步骤6的图像，本实施例中的getMirrorImage的具体执行流程如下：

7.1如果hor＝false并且ver＝false，表示不需要任何翻转，直接返回image，执行结束；

7.2调用resetCanvas方法，清空画布；

7.3如果hor＝true并且ver＝false(表示需要水平翻转)，那么将context的原点坐标移动到x＝image_width,y＝0的位置，然后设置缩放比例x＝-1，y＝0。

这一步的目的，是让context进行水平翻转。参考代码为：

context.translate(image_width,0)；context.scale(-1,1)；

7.4如果hor＝false并且ver＝true(表示需要垂直翻转)，那么将context的原点坐标移动到x＝0，y＝image_height的位置，然后设置缩放比例x＝0，y＝-1。

这一步的目的，是让context进行垂直翻转。参考代码为：

context.translate(0,image_height)；context.scale(1,-1)；

7.5调用resetCanvas方法，清空画布；

7.6如果hor＝true并且ver＝true(表示需要同时进行水平和垂直翻转)，那么将context的原点坐标移动到x＝image_width,y＝image_height的位置，然后设置缩放比例x＝-1，y＝-1。这一步的目的，是对context进行竖屏垂直翻转。

参考代码为：

context.translate(image_width,image_height)；context.scale(-1,-1)；

7.7将原图像Image绘制到被翻转过的context中，参考代码为：

context.drawImage(image,0,0,image_width,image_height)；

7.8新建一个Image DOM，取名mirrorImage；

7.9将canvas的内容保存到mirrorImage中；

7.10返回mirror_image，执行结束。

8、创建一个哈希表，取名mirrorMap，用于记录上述翻转过程中相对于原图像的缩放比例(即对应预设图案的排列顺序)和翻转信息，结构如下：

键：“0-0”，值：getImage(false,false)；

键：“1-0”，值：getImage(true,false)；

键：“0-1”，值：getImage(false,true)；

键：“1-1”，值：getImage(true,true)；

9、调用resetCanvas清空canvas；

10、分别计算出横向x_count和纵向y_count需要平铺的数量；

其中，x_count＝向上取整(canvas_width/(image_width+x_space))；

y_count＝向上取整(canvas_height/(image_height+y_space))；

11、做嵌套循环操作，第一层是x_count，第二层是y_count；

11.1假设当前循环到的位置标记是(x_index，y_index)，其中0<＝x_index<x_count，0<＝y_index<y_count；

为了方便理解，在此以一个简单例子说明“嵌套循环操作”中x_count、y_count以及(x_index，y_index)之间的关系：x_count表示有多少条香烟，y_count表示每条香烟中具体有几包香烟；x_index表示目前抽(遍历到)的是哪条烟，y_index表示目前抽的(遍历到的)是x_index这条烟里面的哪包；

11.2计算当前循环位置对应平铺图片的偏移量x_offset,y_offset，其中x_offset＝x_index*(image_width+x_space)；y_offset＝y_index*(image_height+y_space)；

11.3计算当前遍历到的对应第一层第x个，第二层第y个位置所对应的排列顺序的标识，即计算该位置需要绘制的平铺图像对应上述哈希表的哈希键；计算方式如下：

“x_index％2”-“y_index％2”；其中，％表示取余数的数学运算；

在此，通过利用简单的取余计算，即可准确判断当前位置对应的哈希值，明确翻转信息，因此，针对交叉镜像复杂排列的平铺过程，本实施例的实现方式更简单、准确率更高。

11.4根据上一步计算的键，从mirrorMap哈希表中获取本次循环到的位置需要绘制的平铺图像，取名mirror_image，这里获取的平铺图像，是已经按照对应的翻转信息进行翻转后得到的平铺图像。

11.5调用context绘制图片的api，参数分别是：image、x_offset、y_offset、image_width以及image_height；

表示通知api绘制图片(mirror_image)到canvas中，起始位置是[x_offset,y_offset]，绘制图片的宽度是[image_width,image_height]；

11.6当循环结束后，已经在canvas上绘制好了所需的平铺效果。

12、调用canvas的api：toDataURL，参数是’image/png’；

表示将之前在canvas中绘制的内容，以png图片的形式保存到本地(取名target_url)；

13、新建一个Image DOM，取名TileImage，设置其需要显示的图片路径为target_url；

14、将TileImage挂在到DOM树中。

实施例三

本实施例对应实施例一和实施例二，提供一具体运用场景：

假设要将一张100*100的图片平铺到230*350的环境中，以下对应实施例一和实施例二的步骤，进行说明：

1、获取源图像的Image DOM，取名image，其中image_width＝100，image_height＝100；如图5所示；

2、假设横向平铺时每个图片间隔10，纵向平铺时每个图片间隔20，则设置：x_space＝10,y_space＝20；

3、新建一个Canvas DOM，取名canvas，设置平铺尺寸canvas_width＝230，canvas_height＝350；

4、从上一步创建的canvas中获取2d context，取名context；

5、生成哈希表：mirrorMap，结果如下：

键：“0-0”，值：getImage(false,false)；得到图5中的左上第一个图像；

键：“1-0”，值：getImage(true,false)；得到图5中的左上第二个图像；

键：“0-1”，值：getImage(false,true)；得到图5中的左下第一个图像；

键：“1-1”，值：getImage(true,true)；得到图5中的左下第二个图像；

6、调用resetCanvas清空canvas；

7、计算平铺数量：

x_count＝向上取整(canvas_width/(image_width+x_space))＝floor(230/100+10)≈2；

y_count＝向上取整(canvas_height/(iamge_height+y_space))＝floor(350/100+20)≈3；

所以需要在横方向平铺2次，纵方向平铺3次；

8、做嵌套循环，第一层是x_count，第二层是y_count，用(x_index,y_index)表示当前循环到的位置，其中0<＝x_index<2，0<＝y_index<3；

①当x_index＝0,y_index＝0时；

x_offset＝x_index*(image_width+x_space)＝0；

y_offset＝y_index*(image_height+y_space)＝0；

x_index％2＝0；y_index％2＝0，所以哈希键是0-0；

mirror_image表示mirrorMap中键是0-0的图像；

调用context.drawImage(mirror_image,0,0,100,100)，

表示将0-0对应的图像image绘制到坐标0，0，宽高100,100的区域；定位效果如图6所示。

②当x_index＝0,y_index＝1时；

x_offset＝x_index*(image_width+x_space)＝0；

y_offset＝y_index*(image_height+y_space)＝120；

x_index％2＝0；y_index％2＝1，所以哈希键是0-1；

mirror_image表示mirrorMap中键是0-1的图像；

调用context.drawImage(mirror_image,0,100,120,100)，表示将0-1对应的图像image绘制到坐标0，100，宽高100,100的区域；定位效果如图7所示。

③当x_index＝0,y_index＝2时；

x_offset＝x_index*(image_width+x_space)＝0；

y_offset＝y_index*(image_height+y_space)＝240；

x_index％2＝0；y_index％2＝0，所以哈希键是0-0；

mirror_image表示mirrorMap中键是0-0的图像；

调用context.drawImage(mirror_image,0,200,100,100)，表示将0-0对应的图像image绘制到坐标0，200，宽高100,100的区域，定位效果如图8所示。

④当x_index＝1,y_index＝0时；

x_offset＝x_index*(image_width+x_space)＝110；

y_offset＝y_index*(image_height+y_space)＝0；

x_index％2＝1；y_index％2＝0，所以哈希键是1-0；

mirror_image表示mirrorMap中键是1-0的图像；

调用context.drawImage(mirror_image,100,0,100,100)，表示将1-0对应的图像image绘制到坐标100，0，宽高100,100的区域，定位效果如图9所示。

⑤当x_index＝1,y_index＝1时；

x_offset＝x_index*(image_width+x_space)＝110；

y_offset＝y_index*(image_height+y_space)＝120；

x_index％2＝1；y_index％2＝1，所以哈希键是1-1；

mirror_image表示mirrorMap中键是1-1的图像；

调用context.drawImage(mirror_image,100,100,100,100)，表示将1-1对应的图像image绘制到坐标100，100，宽高100,100的区域，定位效果如图10所示。

⑥当x_index＝1,y_index＝2时；

x_offset＝x_index*(image_width+x_space)＝110；

y_offset＝y_index*(image_height+y_space)＝240；

x_index％2＝1；y_index％2＝0，所以哈希键是1-0；

mirror_image表示mirrorMap中键是1-0的图像；

调用context.drawImage(mirror_image,100,200，100,100)，

调用context.drawImage(image,100,200,100,100)，表示将1-0对应的图像image图片image绘制到坐标100，200，宽高100,100的区域，定位效果如图11所示。

9、将上一步绘制的内容保存到本地target_url＝canvas.toDataURL(‘image/png’)；

10、新建一个ImageDOM：tileImage，将其数据来源属性(src)设置为target_url；

11、将tileImage挂在到Dom树，通知浏览器进行显示。

实施例四

本实施例对应实施例一至实施例三，提供一种计算机可读存储介质，其上存储有计算机程序，所述程序在被处理器执行时，能够实现上述实施例一至实施例三任意一项所述的基于canvas的图片交叉镜像平铺方法所包含的步骤。具体的步骤内容在此不进行复述，详情请参阅实施例一至实施例三的记载。

综上所述，本发明提供的基于canvas的图片交叉镜像平铺方法、存储介质，解决了过多DOM导致浏览器渲染性能低下的问题，从而使得系统性能得到大大优化，特别是在内存和CPU利用率上明显优于现有技术，同时也优化了用户体验；进一步地，通过利用简单的取余计算，即可准确判断当前位置对应的哈希值，明确翻转信息，因此实现方式更简单、准确率更高。进一步地，由于平铺过程全自动执行，且有效避免了卡顿问题，因此还能显著提高平铺效率；再进一步的，还支持自定义交叉镜像排列方式以及灵活设定平铺图像之间的间隔，实现自定义平铺效果，更符合实际使用的需求，实用性更强。

以上所述仅为本发明的实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等同变换，或直接或间接运用在相关的技术领域，均同理包括在本发明的专利保护范围内。

Claims

1.基于canvas的图片交叉镜像平铺方法，其特征在于，包括：

分别设置横向平铺间隔和纵向平铺间隔；

新建一Canvas DOM，并设置其宽高为图像的宽高；

关联所述标识和对应的翻转信息；

2.如权利要求1所述的基于canvas的图片交叉镜像平铺方法，其特征在于，还包括：

将所述Canvas DOM中绘制的内容以图片格式进行存储；

新建一Image DOM，并设置其路径为所述存储的路径；

将所述Image DOM挂载到DOM树中。

3.如权利要求1所述的基于canvas的图片交叉镜像平铺方法，其特征在于，所述在所述Canvas DOM中绘制所述平铺图像，包括：

计算当前遍历到的对应第一层第x个，第二层第y个位置的平铺图像对应所述CanvasDOM的偏移量；

依据所述关联确定计算得到的标识对应的翻转信息；

继续遍历，直至嵌套循环操作结束。

4.如权利要求1所述的基于canvas的图片交叉镜像平铺方法，其特征在于，所述获取预设的一组交叉镜像排列图案中各个平铺图像的翻转信息和对应排列顺序的标识，包括：

创建一getMirrorImage函数；

5.如权利要求4所述的基于canvas的图片交叉镜像平铺方法，其特征在于，还包括：

6.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述程序在被处理器执行时，能够实现上述权利要求1-5任意一项所述的基于canvas的图片交叉镜像平铺方法所包含的步骤。