本技术涉及图像处理的领域，尤其是涉及一种基于canvas的2d图像渲染方法、系统及介质。
背景技术：
1、随着计算机图形学和显示技术的发展，越来越多的图形产品的产品性能得到快速提升，例如canvas。canvas作为一种基础的2d图形渲染技术，仍然在当前技术发展中扮演着重要角色。随着硬件、浏览器和相关技术的不断进步，canvas渲染技术在图形性能、渲染效果和开发体验方面都取得了显著的提升。
2、使用canvas渲染复杂的图形和动画可能会导致性能瓶颈，特别是在处理大量对象或复杂的绘图操作时。处理位图时，对位图的像素点逐点进行处理，处理矢量图时，对每个描述图形的形状进行解释，两种类型的图片之间不能切换。若是处理放大到设定倍数的位图，会导致位图放大后失真，若是处理缩小至一定倍数的矢量图形时，会产生不必要计算损耗。
技术实现思路
1、为了让提升canvas中2d图像处理对位图与矢量图切换过程的兼容性，本技术提供一种基于canvas的2d图像渲染方法、系统及介质。
2、一方面，本技术提供一种基于canvas的2d图像渲染方法，采用如下的技术方案：
3、一种基于canvas的2d图像渲染方法，包括如下步骤：
4、获取第一目标图片；
5、读取所述第一目标图片的图像格式为第一格式；
6、基于获取的放大图片指令，匹配出与所述放大图片指令对应的放大格式；
7、比较所述第一格式与所述放大格式，若所述第一格式与所述放大格式适配，则直接对所述第一目标图片执行所述放大图片指令；
8、若所述第一格式与所述放大格式不适配，则提取所述第一目标图片的轮廓形状，根据所述轮廓形状生成轮廓图片，所述轮廓图片的图像格式为所述放大格式；
9、将所述第一目标图片按照所述轮廓形状分割成多个边缘尺寸不同的分块图片，所述分块图片的图像格式为所述第一格式，将所述分块图片与所述轮廓图片结合成显示图片，将所述显示图片显示在所述第一目标图片的位置并对所述显示图片执行所述放大图片指令。
10、通过采用上述技术方案，对第一格式即位图格式的第一目标图片进行放大处理，若放大处理后产生不适配的问题，则将第一目标图片的格式转换为放大格式即矢量图格式，能够降低不适配带来的兼容性影响，尤其是将单个图片分割成多个分块图片的格式转换过程，能够降低放大后产生的图像失真的程度；提升了canvas中2d图像处理对位图与矢量图切换过程的兼容性。
11、可选地，方法还包括如下步骤：
12、获取第二目标图片；
13、读取所述第二目标图片的图像格式为第二格式；
14、基于获取的缩小图片指令，匹配出与所述缩小图片指令对应的缩小格式；
15、比较所述第二格式与所述缩小格式，若所述第一格式与所述缩小格式适配，则直接对所述第二目标图片执行所述缩小图片指令；
16、若所述第二格式与所述缩小格式不适配，则截图提取所述第一目标图片的显示内容，根据所述显示内容生成内容图片，所述内容图片的图像格式为所述缩小格式；
17、将所述内容图片显示在所述第一目标图片的位置并对所述内容图片执行所述缩小图片指令。
18、通过采用上述技术方案，对第二格式即矢量图格式的第二目标图片进行缩小处理，若缩小处理后产生不适配或图像计算资源浪费的问题，则将第二目标图片的格式转换为缩小格式即位图格式，能够降低不适配带来的兼容性影响，尤其是截图提取的格式转换过程，能够降低矢量图缩小后产生的图像计算资源浪费；进一步提升了canvas中2d图像处理对位图与矢量图切换过程的兼容性。
19、可选地，所述将所述分块图片与所述轮廓图片结合成显示图片的步骤中，还包括如下子步骤：
20、所述分块图片具有边缘特征，所述轮廓图片中具有形状特征；
21、将所述分块图片的边缘特征与所述轮廓图片中的形状特征进行对应；
22、将对应的边缘特征与所述形状特征进行拼接得到所述显示图片。
23、通过采用上述技术方案，根据边缘尺寸不同的分块图片的边缘特征与轮廓图片的形状特征进行拼接，能够快速地得到所需的显示图片，无需对分块图片的内容进行分析。
24、可选地，所述将所述显示图片显示在所述第一目标图片的位置并对所述显示图片执行放大图片指令的步骤中，还包括如下子步骤：
25、在所述显示图片所在的区域外设置放大基点；
26、基于所述放大基点对所述边缘特征与所述形状特征进行同比例放大。
27、通过采用上述技术方案，通过设置放大基点并基于放大基点对显示图片进行放大，能够让显示图片边变换位置边进行放大，从而提升动态变换的效果，降低图片格式兼容性对显示效果的影响。
28、可选地，所述对所述边缘特征与所述形状特征进行同比例放大的步骤中，还包括如下子步骤：
29、若所述显示图片的边缘与显示区域的边缘产生碰撞，则停止放大，并将所述放大基点的位置向所述显示图片偏移；
30、其中，产生碰撞的边缘范围越大，所述放大基点偏移的距离越大。
31、通过采用上述技术方案，当显示图片放大至一定程度时，显示的部分会超过所需要的显示区域，因此根据碰撞检测来调节放大基点的位置，能够让显示图片的显示位置保持在所需要的显示区域中，还能够实现显示图片位置的动态调节。
32、可选地，方法还包括如下步骤：
33、对所述第一目标图片执行所述放大图片指令后生成第一放大数据，所述第一放大数据的值与所述放大图片指令对应的放大倍数正相关设置；
34、若获取到所述缩小图片指令，则根据所述第一放大数据，生成第一过渡数据，所述第一过渡数据与所述第一放大数据反相关设置；
35、执行所述缩小图片指令后生成第一缩小数据，所述第一缩小数据的值与所述缩小图片指令对应的缩小倍数正相关设置；
36、当所述第一缩小数据小于所述第一过渡数据时，截图提取所述第一目标图片的显示内容，根据所述显示内容生成内容图片，所述内容图片的图像格式为所述缩小格式；
37、将所述内容图片显示在所述第一目标图片的位置并对所述内容图片执行所述缩小图片指令。
38、通过采用上述技术方案，先执行放大图片指令，然后生成第一放大数据，根据第一放大数据，生成第一过渡数据，然后根据第一过渡数据来判断是否进行格式转换，从而在放大时形成图片格式变换的条件，当满足形成条件时，才能在下次缩小时进行格式变换，提升图片格式之间转换的兼容性。
39、可选地，方法还包括如下步骤：
40、对所述第二目标图片执行所述缩小图片指令后生成第二缩小数据，所述第二缩小数据的值与所述缩小图片指令对应的缩小倍数正相关设置；
41、若获取到所述放大图片指令，则根据所述第二缩小数据，生成第二过渡数据，所述第二过渡数据与所述第二缩小数据反相关设置；
42、执行所述放大图片指令后生成第二放大数据，所述第二放大数据的值与所述放大图片指令对应的放大倍数正相关设置；
43、当所述第二放大数据大于所述第二过渡数据时，提取所述第一目标图片的轮廓形状，根据所述轮廓形状生成轮廓图片，所述轮廓图片的图像格式为所述放大格式；
44、将所述第一目标图片按照所述轮廓形状分割成多个分块图片，所述分块图片为所述第一格式，将所述分块图片与所述轮廓图片结合成显示图片，将所述显示图片显示在所述第一目标图片的位置并对所述显示图片执行所述放大图片指令。
45、通过采用上述技术方案，先执行缩小图片指令，然后生成第二缩小数据，根据第二缩小数据，生成第二过渡数据，然后根据第二过渡数据来判断是否进行格式转换，从而在缩小时形成图片格式变换的条件，当满足形成条件时，才能在下次放大时进行格式变换，提升图片格式之间转换的兼容性。
46、可选地，方法还包括如下步骤：
47、根据所述第一过渡数据正相关调整所述第二过渡数据。
48、通过采用上述技术方案，先执行放大图片指令，然后生成第一放大数据，根据第一放大数据，生成第一过渡数据，然后根据第一过渡数据来判断是否进行格式转换，然后再执行缩小图片指令，然后生成第二缩小数据，根据第二缩小数据，生成第二过渡数据，根据第一过渡数据调整第二过渡数据，再根据第二过渡数据来判断是否进行格式转换，进一步提升图片格式之间转换的兼容性。
49、另一方面，本技术提供一种基于canvas的2d图像渲染系统，采用如下的技术方案：
50、一种基于canvas的2d图像渲染系统，包括处理器，所述处理器中运行有上述中任意一项所述的基于canvas的2d图像渲染方法的程序。
51、另一方面，本技术提供一种存储介质，采用如下的技术方案：
52、一种存储介质，存储有上述中任意一项所述的基于canvas的2d图像渲染方法的程序。
53、综上所述，本技术包括以下至少一种有益技术效果：
54、(1)对第一格式即位图格式的第一目标图片进行放大处理，若放大处理后产生不适配的问题，则将第一目标图片的格式转换为放大格式即矢量图格式，尤其是将单个图片分割成多个分块图片的格式转换过程，能够降低放大后产生的图像失真的程度；提升了canvas中2d图像处理对位图与矢量图切换过程的兼容性；
55、(2)对第二格式即矢量图格式的第二目标图片进行缩小处理，若缩小处理后产生不适配或图像计算资源浪费的问题，则将第二目标图片的格式转换为缩小格式即位图格式，尤其是截图提取的格式转换过程，能够降低矢量图缩小后产生的图像计算资源浪费；
56、(3)先执行放大图片指令，然后生成第一放大数据，根据第一放大数据，生成第一过渡数据，然后根据第一过渡数据来判断是否进行格式转换，然后再执行缩小图片指令，然后生成第二缩小数据，根据第二缩小数据，生成第二过渡数据，根据第一过渡数据调整第二过渡数据，再根据第二过渡数据来判断是否进行格式转换，进一步提升图片格式之间转换的兼容性。
1.一种基于canvas的2d图像渲染方法，其特征在于，包括如下步骤：
2.根据权利要求1所述的基于canvas的2d图像渲染方法，其特征在于，方法还包括如下步骤：
3.根据权利要求1或2所述的基于canvas的2d图像渲染方法，其特征在于，所述将所述分块图片与所述轮廓图片结合成显示图片的步骤中，还包括如下子步骤：
4.根据权利要求3所述的基于canvas的2d图像渲染方法，其特征在于，所述将所述显示图片显示在所述第一目标图片的位置并对所述显示图片执行放大图片指令的步骤中，还包括如下子步骤：
5.根据权利要求4所述的基于canvas的2d图像渲染方法，其特征在于，所述对所述边缘特征与所述形状特征进行同比例放大的步骤中，还包括如下子步骤：
6.根据权利要求2所述的基于canvas的2d图像渲染方法，其特征在于，方法还包括如下步骤：
7.根据权利要求6所述的基于canvas的2d图像渲染方法，其特征在于，方法还包括如下步骤：
8.根据权利要求7所述的基于canvas的2d图像渲染方法，其特征在于，方法还包括如下步骤：
9.一种基于canvas的2d图像渲染系统，其特征在于，包括处理器，所述处理器中运行有如权利要求1-8中任意一项所述的基于canvas的2d图像渲染方法的程序。
10.一种存储介质，其特征在于，存储有如权利要求1-8中任意一项所述的基于canvas的2d图像渲染方法的程序。
