CN112100538A - 基于canvas的图片交错平铺方法、存储介质 - Google Patents
基于canvas的图片交错平铺方法、存储介质 Download PDFInfo
- Publication number
- CN112100538A CN112100538A CN202010811951.2A CN202010811951A CN112100538A CN 112100538 A CN112100538 A CN 112100538A CN 202010811951 A CN202010811951 A CN 202010811951A CN 112100538 A CN112100538 A CN 112100538A
- Authority
- CN
- China
- Prior art keywords
- image
- canvas
- dom
- width
- height
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Granted
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9574—Browsing optimisation, e.g. caching or content distillation of access to content, e.g. by caching
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
Landscapes
- Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Theoretical Computer Science (AREA)
- Data Mining & Analysis (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Processing Or Creating Images (AREA)
Abstract
本发明提供基于canvas的图片交错平铺方法、存储介质，方法包括：分别设置是否横向交错的标识和是否纵向交错的标识；新建一Canvas DOM，并设置其宽高为图像的宽高；依据图像的宽高和平铺图像的宽高，计算得到横向平铺数量和纵向平铺数量；以所述横向平铺数量为第一层，所述纵向平铺数量为第二层，参照所述是否横向交错的标识和是否纵向交错的标识，以平铺图像及其宽高为参数，调用所述Canvas DOM的2D图像绘制工具集执行嵌套循环操作，在所述Canvas DOM中绘制所述平铺图像。
Description
技术领域
本发明涉及图片绘制领域，具体涉及基于canvas的图片交错平铺方法、存储介质。
背景技术
很多和图像有关的在线产品，例如在线图片编辑器、在线产个性Logo定制等，在很多情况下都有提供图片交错平铺功能的需求。图片交错平铺效果如图1(纵向交错平铺)和图2(横向交错平铺)所示。
现有的平铺方案，是将一个原图的Image DOM，根据平铺尺寸克隆出长*宽的个数的Image DOM，对照图1，就是克隆出5*7＝35个Image Dom来实现。这种实现方法由于存在大量的Image Dom，将导致浏览器的渲染性能非常低下，数量多的时候，将大概率出现用户无法操作的卡顿或无响应情况。
因此，有需求提供全新的图片交错平铺方法以解决上述问题。
发明内容
本发明所要解决的技术问题是：提供基于canvas的图片交错平铺方法、存储介质，能够提高图片交错平铺效率，同时优化***性能，提升用户体验。
为了解决上述技术问题，本发明采用的技术方案为：
基于canvas的图片交错平铺方法，包括：
分别设置是否横向交错的标识和是否纵向交错的标识；
新建一Canvas DOM，并设置其宽高为图像的宽高；
依据图像的宽高和平铺图像的宽高，计算得到横向平铺数量和纵向平铺数量；
以所述横向平铺数量为第一层，所述纵向平铺数量为第二层，参照所述是否横向交错的标识和是否纵向交错的标识，以平铺图像及其宽高为参数，调用所述Canvas DOM的2D图像绘制工具集执行嵌套循环操作，在所述Canvas DOM中绘制所述平铺图像。
本发明提供的另一个技术方案为：
一种计算机可读存储介质，其上存储有计算机程序，所述程序在被处理器执行时，能够实现上述基于canvas的图片交错平铺方法所包含的步骤。
本发明的有益效果在于：本发明利用Canvas提供绘制2D图形图像的特点，将多个交叉排列的平铺图像，依序绘制到一个Canvas DOM中，并且无需创建多个Image DOM，进而解决了过多DOM导致浏览器渲染性能低下的问题，特别是内存和CPU利用率上的优化，能够使得***性能得到大大优化，同时也优化了用户体验；进一步地，由于平铺过程全自动执行，且有效避免了卡顿问题，因此还能显著提高平铺效率；再进一步的，还支持灵活设定平铺图像的交错方式，实现自定义平铺效果，更符合实际使用的需求，实用性更强。
附图说明
图1为一纵向交错平铺效果示意图；
图2为一横向交错平铺效果示意图；
图3为本发明一实施例一种基于canvas的图片交错平铺方法的流程示意图；
图4为本发明实施例一的一种基于canvas的图片交错平铺方法的流程示意图；
图5为本发明实施例三中源图像的Image DOM的示意图；
图6为本发明实施例三中嵌套循环过程遍历到的第一个位置的定位效果图；
图7为本发明实施例三中嵌套循环过程遍历到的第二个位置的定位效果图；
图8为本发明实施例三中嵌套循环过程遍历到的第三个位置的定位效果图；
图9为本发明实施例三中嵌套循环过程遍历到的第四个位置的定位效果图；
图10为本发明实施例三中嵌套循环过程遍历到的第五个位置的定位效果图；
图11为本发明实施例三中嵌套循环过程遍历到的第六个位置的定位效果图。
具体实施方式
为详细说明本发明的技术内容、所实现目的及效果，以下结合实施方式并配合附图予以说明。
本发明最关键的构思在于：利用Canvas提供绘制2D图形图像的特点，将多个交叉排列的平铺图像，依序全自动地绘制到一个Canvas DOM中，无需创建多个Image DOM。
本发明涉及的技术术语解释:
请参照图3，本发明提供基于canvas的图片交错平铺方法，包括：
分别设置是否横向交错的标识和是否纵向交错的标识；
新建一Canvas DOM，并设置其宽高为图像的宽高；
依据图像的宽高和平铺图像的宽高，计算得到横向平铺数量和纵向平铺数量；
以所述横向平铺数量为第一层，所述纵向平铺数量为第二层，参照所述是否横向交错的标识和是否纵向交错的标识，以平铺图像及其宽高为参数，调用所述Canvas DOM的2D图像绘制工具集执行嵌套循环操作，在所述Canvas DOM中绘制所述平铺图像。
从上述描述可知，本发明的有益效果在于：不论需要平铺多少次，都只有一个DOM，所以性能得到了极大优化；同时，还支持灵活设定平铺图像的交错方式，实现自定义平铺效果，更符合实际使用的需求，实用性更强。
进一步地，还包括：
将所述Canvas DOM中绘制的内容以图片格式进行存储；
新建一Image DOM，并设置其路径为所述存储的路径；
将所述Image DOM挂载到DOM树中。
由上述描述可知，不管需要将平铺图像平铺多少次，在DOM树中，都只有一个ImageDOM，相较于现有技术需要克隆出大量Image DOM的方式，极大优化了浏览器的渲染性能。
进一步地，所述在所述Canvas DOM中绘制所述平铺图像，包括：
参照所述是否横向交错的标识和是否纵向交错的标识，计算当前遍历到的对应第一层第x个，第二层第y个位置的平铺图像对应所述Canvas DOM的偏移量；
调用所述Canvas DOM的2D图像绘制工具集，以所述偏移量、平铺图像及其宽高为参数，将所述平铺图像绘制到所述Canvas DOM中的对应位置；
继续遍历，直至嵌套循环操作结束。
由上述描述可知，利用嵌套循环操作，结合具体的交错平铺方式，能够快速、准确且全自动地在canvas中绘制好平铺图像的平铺效果，因此显著提高了绘制效率。
进一步地，所述标识为1则对应是；所述标识为0则对应否。
由上述描述可知，采用0或1的二进制形式能标识是否进行纵向交错和横向交错，对于计算机内部而言，更直观，更不易出错。
进一步地，设当前遍历到的位置为(x_index，y_index)；所述是否横向交错的标识为horStagger；所述是否纵向交错的标识为verStagger；所述平铺图像的宽高为image_width和image_height；
则所述参照所述是否横向交错的标识和是否纵向交错的标识，计算当前遍历到的对应第一层第x个，第二层第y个位置的平铺图像对应所述Canvas DOM的偏移量，包括：
依据公式：
x_index*image_width+horStagger*(Math.abs(y_index)％2)*image_width/2，以及
y_index*image_height+verStagger*(Math.abs(x_index)％2)*image_height/2，计算得到当前遍历到的位置的平铺图像对应所述Canvas DOM的偏移量。
由上述描述可知，直接使用数学公式计算每次遍历到的位置的偏移量，更高效、更准确、更简单。
本发明提供的另一个技术方案为：
一种计算机可读存储介质，其上存储有计算机程序，所述程序在被处理器执行时，能够实现下述基于canvas的图片交错平铺方法所包含的步骤：
分别设置是否横向交错的标识和是否纵向交错的标识；
新建一Canvas DOM，并设置其宽高为图像的宽高；
依据图像的宽高和平铺图像的宽高，计算得到横向平铺数量和纵向平铺数量；
以所述横向平铺数量为第一层，所述纵向平铺数量为第二层，参照所述是否横向交错的标识和是否纵向交错的标识，以平铺图像及其宽高为参数，调用所述Canvas DOM的2D图像绘制工具集执行嵌套循环操作，在所述Canvas DOM中绘制所述平铺图像。
进一步地，还包括：
将所述Canvas DOM中绘制的内容以图片格式进行存储；
新建一Image DOM，并设置其路径为所述存储的路径；
将所述Image DOM挂载到DOM树中。
进一步地，所述在所述Canvas DOM中绘制所述平铺图像，包括：
参照所述是否横向交错的标识和是否纵向交错的标识，计算当前遍历到的对应第一层第x个，第二层第y个位置的平铺图像对应所述Canvas DOM的偏移量；
调用所述Canvas DOM的2D图像绘制工具集，以所述偏移量、平铺图像及其宽高为参数，将所述平铺图像绘制到所述Canvas DOM中的对应位置；
继续遍历，直至嵌套循环操作结束。
进一步地，所述标识为1则对应是；所述标识为0则对应否。
进一步地，设当前遍历到的位置为(x_index，y_index)；所述是否横向交错的标识为horStagger；所述是否纵向交错的标识为verStagger；所述平铺图像的宽高为image_width和image_height；
则所述参照所述是否横向交错的标识和是否纵向交错的标识，计算当前遍历到的对应第一层第x个，第二层第y个位置的平铺图像对应所述Canvas DOM的偏移量，包括：
依据公式：
x_index*image_width+horStagger*(Math.abs(y_index)％2)*image_width/2，以及
y_index*image_height+verStagger*(Math.abs(x_index)％2)*image_height/2，计算得到当前遍历到的位置的平铺图像对应所述Canvas DOM的偏移量。
从上述描述可知，对应本领域普通技术人员可以理解实现上述技术方案中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来实现的，所述的程序可存储于一计算机可读取的存储介质中，该程序在执行时，可包括如上述各方法的流程。所述程序在被处理器执行后，同样能够实现对应各方法的有益效果。
其中，所述的存储介质可以是磁盘、光碟、只读存储记忆体(Read-Only Memory，ROM)或随机存储记忆体(Random Access Memory，RAM)等。
实施例一
请参照图4，本实施例提供基于canvas的图片交错平铺方法，能够更高效、操作更便捷，更顺利地完成图片交错平铺效果。
本实施例的方法包括：
S1：获取用来平铺的平铺图像Image DOM；
S2：分别设置是否横向交错的标识和是否纵向交错的标识；
S3：新建一个Canvas DOM，并依据用户设置的整体图像尺寸设置其宽高；
S4：获取Canvas DOM的context 2d的对象，即Canvas DOM的2D图像绘制工具集；
S5：计算出横向平铺数量和纵向平铺数量；
S6：以所述横向平铺数量为第一层，所述纵向平铺数量为第二层，参照所述是否横向交错的标识和是否纵向交错的标识，以平铺图像和平铺图像的宽高为参数，调用所述Canvas DOM的2D图像绘制工具集执行嵌套循环操作，在所述Canvas DOM中绘制出横向平铺数量×纵向平铺数量个平铺图像。
其中，所述在所述Canvas DOM中绘制出横向平铺数量×纵向平铺数量个平铺图像，具体为：参照所述是否横向交错的标识和是否纵向交错的标识，计算当前遍历到的对应第一层第x个，第二层第y个位置的平铺图像对应所述Canvas DOM的偏移量；调用所述Canvas DOM的2D图像绘制工具集，以所述偏移量、平铺图像及其宽高为参数，将所述平铺图像绘制到所述Canvas DOM中的对应位置；继续遍历下一个位置，直至嵌套循环操作结束。
S7：将所述Canvas DOM中绘制的内容以图片格式进行存储，优选存储在本地；
S8：新建一Image DOM，并设置其路径为所述存储的路径，即用来显示上述存储在本地的图片；
S9：将所述Image DOM挂载到DOM树中。
可以看出，在本实施例中，不论需要平铺多少次，由于DOM中都只需要增加了一个Image DOM，所以性能得到了极大优化。
实施例二
本实施例对应实施例一，做进一步扩展：
1、获取用来平铺的原图像Image DOM(取名image)，读取其宽高，分别取名image_width和image_height；
2、新建一个Canvas DOM(为方便说明，本实施例中取名canvas)，设置其宽、高为需要平铺的尺寸，即最终效果图的尺寸，分别取名canvas_width和canvas_height；
3、分别用变量存储是否横向交错(horStagger)、纵向交错(verStagger)；如果值是1表示是，0表示否；
4、获取canvas的context 2d的对象(为方便说明，将其取名为context)；
5、分别计算出横向x_count和纵向y_count需要平铺的数量；
其中，x_count＝向上取整(canvas_width/(image_width+x_space))；
y_count＝向上取整(canvas_height/(image_height+y_space))；
6、做嵌套循环操作，第一层是x_count，第二层是y_count；
6.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这条烟里面的哪包；
6.2计算当前循环位置对应平铺图片的偏移量x_offset,y_offset，计算公式分别为：
x_offset＝x_index*image_width+horStagger*(Math.abs(y_index)％2)*image_width/2，以及
y_offset＝y_index*image_height+verStagger*(Math.abs(x_index)％2)*image_height/2。
6.3调用context绘制图片的api，参数分别是：image、x_offset、y_offset、image_width以及image_height；
表示通知api绘制图片(image)到canvas中，起始位置是[x_offset,y_offset]，绘制图片的宽度是[image_width,image_height]；
6.4当循环结束后，已经在canvas上绘制好了所需的平铺效果。
7、调用canvas的api：toDataURL，参数是’image/png’；
表示将之前在canvas中绘制的内容，以png图片的形式保存到本地(取名target_url)；
8、新建一个Image DOM，取名TileImage，设置其需要显示的图片路径为target_url；
9、将TileImage挂在到DOM树中。
实施例三
本实施例对应实施例一和实施例二，提供一具体运用场景：
假设要将一张100*100的图片“横向交错”平铺到200*300的环境中，以下对应实施例一和实施例二的步骤，进行说明：
1、获取源图像的Image DOM，取名image，其中image_width＝100，image_height＝100；如图5所示；
2、新建一个Canvas DOM，取名canvas，设置平捕尺寸canvas_width＝200，canvas_height＝300；
3、依据“横向交错”的需求，设置horStagger＝1；verStagger＝0；
4、从上一步创建的canvas中获取2d context，取名context；
5、计算平铺数量：
x_count＝向上取整(canvas_width/image_width)＝floor(200/100)＝2；
y_count＝向上取整(canvas_height/(iamge_height)＝floor(300/100)＝3。
所以需要在横方向平铺2次，纵方向平铺3次；
6、做嵌套循环，第一层是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+horStagger*(Math.abs(y_index)％2)*image_width/2＝0；
y_offset＝y_index*image_height+verStagger*(Math.abs(x_index)％2)*image_height/2＝0；
调用context.drawImage(mirror_image,0,0,100,100)，表示图片image绘制到坐标0，0，宽高100,100的区域；定位效果如图6所示。
②当x_index＝0,y_index＝1时；
x_offset＝x_index*image_width+horStagger*(Math.abs(y_index)％2)*image_width/2＝50；
y_offset＝y_index*image_height+verStagger*(Math.abs(x_index)％2)*image_height/2＝100；
调用context.drawImage(mirror_image,50,100,100,100)，表示图片image绘制到坐标50，100，宽高100,100的区域；定位效果如图7所示。
③当x_index＝0,y_index＝2时；
x_offset＝x_index*image_width+horStagger*(Math.abs(y_index)％2)*image_width/2＝0；
y_offset＝y_index*image_height+verStagger*(Math.abs(x_index)％2)*image_height/2＝200；
调用context.drawImage(mirror_image,0,200,100,100)，表示图片image绘制到坐标0，200，宽高100,100的区域，定位效果如图8所示。
④当x_index＝1,y_index＝0时；
x_offset＝x_index*image_width+horStagger*(Math.abs(y_index)％2)*image_width/2＝100；
y_offset＝y_index*image_height+verStagger*(Math.abs(x_index)％2)*image_height/2＝0；
调用context.drawImage(mirror_image,100,0,100,100)，表示图片image绘制到坐标100，0，宽高100,100的区域，定位效果如图9所示。
⑤当x_index＝1,y_index＝1时；
x_offset＝x_index*image_width+horStagger*(Math.abs(y_index)％2)*image_width/2＝1 50；
y_offset＝y_index*image_height+verStagger*(Math.abs(x_index)％2)*image_height/2＝100；
调用context.drawImage(mirror_image,150,10 0,100,100)，表示图片image绘制到坐标150，100，宽高100,100的区域，定位效果如图10所示。
⑥当x_index＝1,y_index＝2时；
x_offset＝x_index*image_width+horStagger*(Math.abs(y_index)％2)*image_width/2＝100；
y_offset＝y_index*image_height+verStagger*(Math.abs(x_index)％2)*image_height/2＝100；
调用context.drawImage(mirror_image,100,100,100,100)，表示图片image绘制到坐标100，100，宽高100,100的区域，定位效果如图11所示。
7、将上一步绘制的内容保存到本地target_url＝canvas.toDataURL(‘image/png’)；
8、新建一个ImageDOM：tileImage，将其数据来源属性(src)设置为target_url；
9、将tileImage挂在到Dom树，通知浏览器进行显示。
实施例四
本实施例对应实施例一至实施例三，提供一种计算机可读存储介质，其上存储有计算机程序，所述程序在被处理器执行时，能够实现上述实施例一至实施例三任意一项所述的基于canvas的图片交错平铺方法所包含的步骤。具体的步骤内容在此不进行复述，详情请参阅实施例一至实施例三的记载。
综上所述，本发明提供的基于canvas的图片交错平铺方法、存储介质，解决了过多DOM导致浏览器渲染性能低下的问题，从而使得***性能得到大大优化，同时也优化了用户体验；进一步地，由于平铺过程全自动执行，且有效避免了卡顿问题，因此还能显著提高平铺效率；再进一步的，还支持灵活设定交叉平铺图像的样式，实现自定义平铺效果，更符合实际使用的需求，实用性更强。
以上所述仅为本发明的实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等同变换，或直接或间接运用在相关的技术领域，均同理包括在本发明的专利保护范围内。
Claims (6)
1.基于canvas的图片交错平铺方法，其特征在于，包括：
分别设置是否横向交错的标识和是否纵向交错的标识；
新建一Canvas DOM，并设置其宽高为图像的宽高；
依据图像的宽高和平铺图像的宽高，计算得到横向平铺数量和纵向平铺数量；
以所述横向平铺数量为第一层，所述纵向平铺数量为第二层，参照所述是否横向交错的标识和是否纵向交错的标识，以平铺图像及其宽高为参数，调用所述Canvas DOM的2D图像绘制工具集执行嵌套循环操作，在所述Canvas DOM中绘制所述平铺图像。
2.如权利要求1所述的基于canvas的图片交错平铺方法，其特征在于，还包括：
将所述Canvas DOM中绘制的内容以图片格式进行存储；
新建一Image DOM，并设置其路径为所述存储的路径；
将所述Image DOM挂载到DOM树中。
3.如权利要求1所述的基于canvas的图片交错平铺方法，其特征在于，所述在所述Canvas DOM中绘制所述平铺图像，包括：
参照所述是否横向交错的标识和是否纵向交错的标识，计算当前遍历到的对应第一层第x个，第二层第y个位置的平铺图像对应所述Canvas DOM的偏移量；
调用所述Canvas DOM的2D图像绘制工具集，以所述偏移量、平铺图像及其宽高为参数，将所述平铺图像绘制到所述Canvas DOM中的对应位置；
继续遍历，直至嵌套循环操作结束。
4.如权利要求3所述的基于canvas的图片交错平铺方法，其特征在于，所述标识为1则对应是；所述标识为0则对应否。
5.如权利要求4所述的基于canvas的图片交错平铺方法，其特征在于，设当前遍历到的位置为(x_index，y_index)；所述是否横向交错的标识为horStagger；所述是否纵向交错的标识为verStagger；所述平铺图像的宽高为image_width和image_height；
则所述参照所述是否横向交错的标识和是否纵向交错的标识，计算当前遍历到的对应第一层第x个，第二层第y个位置的平铺图像对应所述Canvas DOM的偏移量，包括：
依据公式：
x_index*image_width+horStagger*(Math.abs(y_index)％2)*image_width/2，以及
y_index*image_height+verStagger*(Math.abs(x_index)％2)*image_height/2，计算得到当前遍历到的位置的平铺图像对应所述Canvas DOM的偏移量。
6.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述程序在被处理器执行时，能够实现上述权利要求1-5任意一项所述的基于canvas的图片交错平铺方法所包含的步骤。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010811951.2A CN112100538B (zh) | 2020-08-13 | 2020-08-13 | 基于canvas的图片交错平铺方法、存储介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010811951.2A CN112100538B (zh) | 2020-08-13 | 2020-08-13 | 基于canvas的图片交错平铺方法、存储介质 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN112100538A true CN112100538A (zh) | 2020-12-18 |
| CN112100538B CN112100538B (zh) | 2022-04-12 |
Family
ID=73752930
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010811951.2A Active CN112100538B (zh) | 2020-08-13 | 2020-08-13 | 基于canvas的图片交错平铺方法、存储介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112100538B (zh) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113312569A (zh) * | 2021-05-17 | 2021-08-27 | 浪潮金融信息技术有限公司 | 一种伪随机展示网页背景的方法、***及介质 |
Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110442820A (zh) * | 2019-07-24 | 2019-11-12 | 上海易点时空网络有限公司 | 用于网页的图片合成方法以及装置 |
| CN111078035A (zh) * | 2019-11-29 | 2020-04-28 | 交通银行股份有限公司 | 一种基于HTML5 Canvas的绘图方法 |
-
2020
- 2020-08-13 CN CN202010811951.2A patent/CN112100538B/zh active Active
Patent Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110442820A (zh) * | 2019-07-24 | 2019-11-12 | 上海易点时空网络有限公司 | 用于网页的图片合成方法以及装置 |
| CN111078035A (zh) * | 2019-11-29 | 2020-04-28 | 交通银行股份有限公司 | 一种基于HTML5 Canvas的绘图方法 |
Non-Patent Citations (2)
| Title |
|---|
| AFARLIU: ""HTML5 Canvas的内容保存为图片toDataURL()"", 《HTTPS://BLOG.CSDN.NET/YAOYUAN_DIFANG/ARTICLE/DETAILS/38581307》 * |
| 陈爽，贺荣: "《HTML5与JavaScript程序设计》", 30 November 2012 * |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113312569A (zh) * | 2021-05-17 | 2021-08-27 | 浪潮金融信息技术有限公司 | 一种伪随机展示网页背景的方法、***及介质 |
| CN113312569B (zh) * | 2021-05-17 | 2023-10-03 | 浪潮金融信息技术有限公司 | 一种伪随机展示网页背景的方法、***及介质 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN112100538B (zh) | 2022-04-12 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN102549544B (zh) | 动态图像呈现 | |
| US7911465B2 (en) | Techniques for displaying information for collection hierarchies | |
| CN107798715B (zh) | 立体图形的对齐吸附方法、装置、计算机设备及存储介质 | |
| CN103176688B (zh) | 分类应用的方法和装置 | |
| EP2464093B1 (en) | Image file generation device, image processing device, image file generation method, and image processing method | |
| US20060209085A1 (en) | Providing 1D and 2D connectors in a connected diagram | |
| CN104216976A (zh) | 一种移动终端图片分组查看方法及*** | |
| CN112100538B (zh) | 基于canvas的图片交错平铺方法、存储介质 | |
| US8830251B2 (en) | Method and system for creating an image | |
| US9898842B2 (en) | Method and system for generating data-efficient 2D plots | |
| CN113010252A (zh) | 应用页面的展示方法、电子设备及存储介质 | |
| CN112100539A (zh) | 基于canvas的图片平铺方法、存储介质 | |
| CN114648603A (zh) | 一种基于canvas与echarts实现飞线动效的方法及*** | |
| CN109499067B (zh) | 一种地形纹理的绘制方法及装置、电子设备、存储介质 | |
| US9875555B2 (en) | Partitioning an image | |
| CN110956584A (zh) | 一种病理显微图像交互显示方法、介质及设备 | |
| US8250480B2 (en) | Interactive navigation of a dataflow process image | |
| WO2018176843A1 (zh) | 一种焦点越界搜索方法、装置、智能设备及可读存储介质 | |
| CN107526576B (zh) | 页面的视图组件的展示方法和装置 | |
| WO2023236465A1 (zh) | 一种地质分析的显示处理方法、装置、设备及介质 | |
| CN112100540B (zh) | 基于canvas的图片交叉镜像平铺方法、存储介质 | |
| CN116010510A (zh) | 层次化数据的可视化方法、装置、设备及存储介质 | |
| CN103366635B (zh) | 一种电子地图上移动对象的动态标注方法 | |
| CN112767419B (zh) | 一种图集九宫格切割的方法及*** | |
| US20120069001A1 (en) | Electronic album generating apparatus, stereoscopic image pasting apparatus, and methods and programs for controlling operation of same |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |