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

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

【技术实现步骤摘要】
基于CANVAS的图片交叉镜像平铺方法、存储介质
本专利技术涉及图片绘制领域，具体涉及基于canvas的图片交叉镜像平铺方法、存储介质。
技术介绍
很多和图像有关的在线产品，例如在线图片编辑器、在线产品个性Logo定制等，在很多情况下都有提供图片平铺功能的需求，特别是图片交叉镜像平铺的需求。图片平铺效果如图1所示。现有的平铺方案，是将一个原图的ImageDOM，根据平铺尺寸克隆出长*宽的个数的ImageDOM，对照图1，就是克隆出5*7＝35个ImageDom，然后依据需求决定每个DOM的位置和方向。这种实现方法由于存在大量的ImageDom，将占用大量内存，从而导致浏览器的渲染性能非常低下，数量多的时候，将大概率出现用户无法操作的卡顿或无响应情况。因此，有需求提供全新的图片平铺方法以解决上述问题。
技术实现思路
本专利技术所要解决的技术问题是：提供基于canvas的图片交叉镜像平铺方法、存储介质，能够提高图片平铺效率，同时优化系统性能，提升用户体验。为了解决上述技术问题，本专利技术采用的技术方案为：本文档来自技高网...

【技术保护点】
1.基于canvas的图片交叉镜像平铺方法，其特征在于，包括：/n分别设置横向平铺间隔和纵向平铺间隔；/n新建一Canvas DOM，并设置其宽高为图像的宽高；/n获取预设的一组交叉镜像排列图案中各个平铺图像的翻转信息和对应排列顺序的标识；/n关联所述标识和对应的翻转信息；/n依据图像的宽高、平铺图像的宽高以及所述横向平铺间隔和纵向平铺间隔，计算得到横向平铺数量和纵向平铺数量；/n以所述横向平铺数量为第一层，所述纵向平铺数量为第二层，对照所述图案，以所述关联、平铺图像及其宽高为参数，调用所述Canvas DOM的2D图像绘制工具集执行嵌套循环操作，在所述Canvas DOM中绘制所述平铺图像。...

【技术特征摘要】
1.基于canvas的图片交叉镜像平铺方法，其特征在于，包括：
分别设置横向平铺间隔和纵向平铺间隔；
新建一CanvasDOM，并设置其宽高为图像的宽高；
获取预设的一组交叉镜像排列图案中各个平铺图像的翻转信息和对应排列顺序的标识；
关联所述标识和对应的翻转信息；
依据图像的宽高、平铺图像的宽高以及所述横向平铺间隔和纵向平铺间隔，计算得到横向平铺数量和纵向平铺数量；
以所述横向平铺数量为第一层，所述纵向平铺数量为第二层，对照所述图案，以所述关联、平铺图像及其宽高为参数，调用所述CanvasDOM的2D图像绘制工具集执行嵌套循环操作，在所述CanvasDOM中绘制所述平铺图像。


2.如权利要求1所述的基于canvas的图片交叉镜像平铺方法，其特征在于，还包括：
将所述CanvasDOM中绘制的内容以图片格式进行存储；
新建一ImageDOM，并设置其路径为所述存储的路径；
将所述ImageDOM挂载到DOM树中。


3.如权利要求1所述的基于canvas的图片交叉镜像平铺方法，其特征在于，所述在所述CanvasDOM中绘制所述平铺图像，包括：
计算当前遍历到的对应第一层第x个，第二层第y个位置的平铺图像对应所述CanvasDOM的偏移量；
依据所述图案，计算当前遍历到的对应第一层第x个，第二层第y个位置所对应的排列顺序的标识；
依据所述关...

【专利技术属性】
技术研发人员：刘德建，陈铭，陈耀灿，郭玉湖，陈宏，
申请(专利权)人：福建天泉教育科技有限公司，
类型：发明
国别省市：福建;35