切图方法和装置、电子设备及存储介质

技术领域

本申请涉及人工智能技术领域，尤其涉及一种切图方法和装置、电子设备及存储介质。

背景技术

随着互联网多元化的发展，在许多场景下会有对于长图渲染的需求，但是长图不同于常见的页面元素，一般的页面元素为解决大量数据渲染问题会采用懒加载，按需加载，销毁无效内存等方式来及时清理内存，以提高用户访问速度。但是长图本身已经是一个最小加载单元，即使懒加载也无法对大图长图进行有效的性能提升，所以往往才有多图拼接的方式来进行页面渲染，而切图往往需要人工去操作进行。

目前，市面上有一些可以使用的切图工具，但是这些切图工具还是摆脱不了人的操作范畴，需要人工调试、生成，且多数一次也是能切割一张，也只能切割一块图片，效率低下，不能满足企业生产中流水线式大批量以及快速快捷的切图需求场景。

发明内容

本申请实施例的主要目的在于提出一种切图方法和装置、电子设备及存储介质，能够实现大批量的快速切图，且切图用户无感知，可以优化用户操作体验，提高页面渲染速度，简化业务逻辑。

为实现上述目的，本申请实施例的第一方面提出了一种切图方法，所述方法包括：

获取目标图像的URL以及由用户输入的切图配置参数；

根据所述目标图像的URL在页面创建canvas画布标签；

通过所述canvas画布标签渲染出所述目标图像；

根据所述切图配置参数对所述目标图像进行切割，得到多个切图。

在一些实施例，所述根据所述切图配置参数对所述目标图像进行切割，得到多个切图，包括：

根据所述切图配置参数遍历出每个所述切图的切割点；

获取所述目标图像的完整高度；

根据所述切割点和所述完整高度确定每个所述切图的切割长度范围；

根据每个所述切图的切割长度范围确定切割结果；

基于所述切割结果对每个所述切图重新生成独立的canvas并渲染于页面之上。

在一些实施例，在所述根据所述切图配置参数对所述目标图像进行切割，得到多个切图之后，还包括：

将每个所述切图的DOM克隆一份并附上DOM的样式style，以转换成虚拟DOM对象；

递归所述虚拟DOM对象，通过虚拟DOM树计算出每个所述切图的渲染顺序；

根据所述渲染顺序调用ctx附上DOM的样式style，以生成每个所述切图的图片。

在一些实施例，在所述根据所述渲染顺序调用ctx附上DOM的样式style，以生成每个所述切图的图片之后，还包括：

对生成每个所述切图的图片的过程都返回一个promise对象；

收集所有的所述切图的所述promise对象，直至得到所有的切图文件。

在一些实施例，在所述收集所有的所述切图的所述promise对象，直至得到所有的切图文件之后，还包括：

当得到所有的切图文件后，将所述切图文件上传至指定的资源桶中；

生成从资源桶下载所述切图文件的图片路径。

在一些实施例，所述收集所有的所述切图的所述promise对象，直至得到所有的切图文件，包括：

调用Promise.all()方法收集所有的所述切图的所述promise对象，直至得到所有的切图文件。

在一些实施例，所述切图配置参数包括如下：

所述目标图像的宽度参数；

所述目标图像的高度参数。

为实现上述目的，本申请实施例的第二方面提出了一种切图装置，所述装置包括：

获取模块，用于获取目标图像的URL以及由用户输入的切图配置参数；

创建模块，用于根据所述目标图像的URL在页面创建canvas画布标签；

渲染模块，用于通过所述canvas画布标签渲染出所述目标图像；

切割模块，用于根据所述切图配置参数对所述目标图像进行切割，得到多个切图。

为实现上述目的，本申请实施例的第三方面提出了一种电子设备，所述电子设备包括存储器和处理器，所述存储器存储有计算机程序，所述处理器执行所述计算机程序时实现上述第一方面所述的方法。

为实现上述目的，本申请实施例的第四方面提出了一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序被处理器执行时实现上述第一方面所述的方法。

本申请提出的切图方法和装置、电子设备及存储介质,获取目标图像的URL以及由用户输入的切图配置参数；根据目标图像的URL在页面创建canvas画布标签；通过canvas画布标签渲染出目标图像；根据切图配置参数对目标图像进行切割，得到多个切图。基于此，本申请通过获取目标图像的URL，并根据目标图像的URL在页面创建canvas画布标签，再通过canvas画布标签渲染出目标图像，根据由用户输入的切图配置参数对目标图像进行切割，得到多个切图。与现有的切图方法相比，本申请具有无需人工操作的优势，只需输入用户设置的切图配置参数，便可以实现大批量的快速切图，整个切图过程用户无感知，可以优化用户操作体验，提高页面渲染速度，简化业务逻辑。

附图说明

图1是本申请实施例提供的切图方法的流程图；

图2是图1中的步骤S104的流程图；

图3是图1中的在步骤S104之后的流程图；

图4是图3中的在步骤S303之后的流程图；

图5是图4中的在步骤S402之后的流程图；

图6是图4中的步骤S402的流程图；

图7是本申请实施例提供的切图装置的结构示意图；

图8是本申请实施例提供的电子设备的硬件结构示意图。

具体实施方式

为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行进一步详细说明。应当理解，此处所描述的具体实施例仅用以解释本申请，并不用于限定本申请。

需要说明的是，虽然在装置示意图中进行了功能模块划分，在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于装置中的模块划分，或流程图中的顺序执行所示出或描述的步骤。说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。

除非另有定义，本文所使用的所有的技术和科学术语与属于本申请的技术领域的技术人员通常理解的含义相同。本文中所使用的术语只是为了描述本申请实施例的目的，不是旨在限制本申请。

首先，对本申请中涉及的若干名词进行解析：

人工智能(artificial intelligence，AI)：是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学；人工智能是计算机科学的一个分支，人工智能企图了解智能的实质，并生产出一种新的能以人类智能相似的方式做出反应的智能机器，该领域的研究包括机器人、语言识别、图像识别、自然语言处理和专家系统等。人工智能可以对人的意识、思维的信息过程的模拟。人工智能还是利用数字计算机或者数字计算机控制的机器模拟、延伸和扩展人的智能，感知环境、获取知识并使用知识获得最佳结果的理论、方法、技术及应用系统。

切图：是指将设计稿切成便于制作成页面的图片。切图用于完成html+css布局的静态页面，有利于交互，形成良好的视觉感。通俗来讲，把一张设计图利用到切片工具把自己所需的切成一张张小图，然后前端开发用DIV+CSS完成静态页面书写，完成CSS布局。

渲染：是CG的最后一道工序，也是最终使图像符合的3D场景的阶段。英文为Render，也有的把它称为着色，但一般把Shade称为着色，把Render称为渲染。因为Render和Shade这两个词在三维软件中是截然不同的两个概念，虽然它们的功能很相似，但却有不同。Shade是一种显示方案，一般出现在三维软件的主要窗口中，和三维模型的线框图一样起到辅助观察模型的作用。很明显，着色模式比线框模式更容易让我们理解模型的结构，但它只是简单的显示而已，数字图像中把它称为明暗着色法。在像Maya这样的高级三维软件中，还可以用Shade显示出简单的灯光效果、阴影效果和表面纹理效果，当然，高质量的着色效果是需要专业三维图形显示卡来支持的，它可以加速和优化三维图形的显示。但无论怎样优化，它都无法把显示出来的三维图形变成高质量的图像，这是因为Shade采用的是一种实时显示技术，硬件的速度限制它无法实时地反馈出场景中的反射、折射等光线追踪效果。而现实工作中我们往往要把模型或者场景输出成图像文件、视频信号或者电影胶片，这就必须经过Render程序。

懒加载(Load On Demand)：是一种独特而又强大的数据获取方法,它能够在用户滚动页面的时候自动获取更多的数据,而新得到的数据不会影响原有数据的显示,同时最大程度上减少服务器端的资源耗用。懒加载也叫做延迟加载、按需加载，指的是在长网页中延迟加载图片数据，是一种较好的网页性能优化的方式。在比较长的网页或应用中，如果图片很多，所有的图片都被加载出来，而用户只能看到可视窗口的那一部分图片数据，这样就浪费了性能。如果使用图片的懒加载就可以解决以上问题。在滚动屏幕之前，可视化区域之外的图片不会进行加载，在滚动屏幕时才加载。这样使得网页的加载速度更快，减少了服务器的负载。懒加载适用于图片较多，页面列表较长(长列表)的场景中。

统一资源定位符(Uniform Resource Locator，URL)：是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示，是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。它最初是由蒂姆·伯纳斯·李发明用来作为万维网的地址。现在它已经被万维网联盟编制为互联网标准。

画布(Canvas)：是在HTML5中新增的标签用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用JavaScript操作的位图(bitmap)。Canvas对象表示一个HTML画布元素-。它没有自己的行为，但是定义了一个API支持脚本化客户端绘图操作。直接在该对象上指定宽度和高度，但是，其大多数功能都可以通过CanvasRenderingContext2D对象获得。这是通过Canvas对象的getContext()方法并且把直接量字符串"2d"作为唯一的参数传递给它而获得的。

样式(style)：在代码中是对各个标签的修饰。应用在头部(head)的标签在Excel中，Style对象代表区域的样式说明。Style对象包含样式的所有属性(字体、数字格式、对齐方式等)。有若干内置样式，包括“常规”、“货币”和“百分比”。同时对若干单元格修改单元格格式属性时，使用Style对象是迅速而高效的方法。

虚拟DOM(Virtual DOM)：也就是虚拟节点，它通过JS的Object对象模拟DOM中的节点，然后再通过特定的render方法将其渲染成真实的DOM节点。

遍历：是计算机领域中的一个重要的研究方向，一个问题的求解就是从最开始的状态，利用已经存在的规则和条件改变当前状态，直到把当前状态变为最终目的状态，把中间出现的状态全部连接起来，变成一条遍历路径的过程。通过图的遍历，可以找到这条径。图的遍历算法主要有两种，一种是按照深度优先的顺序展开遍历的算法，也就是深度优先遍历；另一种是按照宽度优先的顺序展开遍历的算法，也就是宽度优先遍历。深度优先遍历是沿着图的深度遍历图的所有节点，每次遍历都会沿着当前节点的邻接点遍历，直到所有点全部遍历完成。如果当前节点的所有邻接点都遍历过了，则回溯到上一个节点，重复这一过程一直到已访问从源节点可达的所有节点为止。如果还存在没有被访问的节点，则选择其中一个节点作为源节点并重复以上过程，直到所有节点都被访问为止。利用图的深度优先搜索可以获得很多额外的信息，也可以解决很多图论的问题。宽度优先遍历又名广度优先遍历。通过沿着图的宽度遍历图的节点，如果所有节点均被访问，算法随即终止。宽度优先遍历的实现一般需要一个队列来辅助完成。宽度优先遍历和深度优先遍历一样也是一种盲目的遍历方法。也就是说，宽度遍历算法并不使用经验法则算法，并不考虑结果的可能地址，只是彻底地遍历整张图，直到找到结果为止。

Promise.all()：接受一个由promise任务组成的数组，可以同时处理多个promise任务，当所有的任务都执行完成时，Promise.all()返回resolve，但当有一个失败(reject)，则返回失败的信息，即使其他promise执行成功，也会返回失败。可以用一句话来说Promise.all()，要么全有要么全无。

浏览器：是用来检索、展示以及传递Web信息资源的应用程序。Web信息资源由统一资源标识符(Uniform Resource Identifier，URI)所标记，它是一张网页、一张图片、一段视频或者任何在Web上所呈现的内容。使用者可以借助超级链接(Hyperlinks)，通过浏览器浏览互相关联的信息。

基于此，本申请实施例提供了一种切图方法和装置、电子设备及存储介质，通过获取目标图像的URL以及由用户输入的切图配置参数；根据目标图像的URL在页面创建canvas画布标签；通过canvas画布标签渲染出目标图像；根据切图配置参数对目标图像进行切割，得到多个切图。基于此，本申请通过获取目标图像的URL，并根据目标图像的URL在页面创建canvas画布标签，再通过canvas画布标签渲染出目标图像，根据由用户输入的切图配置参数对目标图像进行切割，得到多个切图。与现有的切图方法相比，本申请具有无需人工操作的优势，只需输入用户设置的切图配置参数，便可以实现大批量的快速切图，整个切图过程用户无感知，可以优化用户操作体验，提高页面渲染速度，简化业务逻辑。

本申请实施例提供的切图方法和装置、电子设备及存储介质，具体通过如下实施例进行说明，首先描述本申请实施例中的切图方法。

本申请实施例可以基于人工智能技术对相关的数据进行获取和处理。其中，人工智能(Artificial Intelligence，AI)是利用数字计算机或者数字计算机控制的机器模拟、延伸和扩展人的智能，感知环境、获取知识并使用知识获得最佳结果的理论、方法、技术及应用系统。

人工智能基础技术一般包括如传感器、专用人工智能芯片、云计算、分布式存储、大数据处理技术、操作/交互系统、机电一体化等技术。人工智能软件技术主要包括计算机视觉技术、机器人技术、生物识别技术、语音处理技术、自然语言处理技术以及机器学习/深度学习等几大方向。

本申请实施例提供的切图方法，涉及人工智能技术领域。本申请实施例提供的切图方法可应用于终端中，也可应用于服务器端中，还可以是运行于终端或服务器端中的软件。在一些实施例中，终端可以是智能手机、平板电脑、笔记本电脑、台式计算机等；服务器端可以配置成独立的物理服务器，也可以配置成多个物理服务器构成的服务器集群或者分布式系统，还可以配置成提供云服务、云数据库、云计算、云函数、云存储、网络服务、云通信、中间件服务、域名服务、安全服务、CDN以及大数据和人工智能平台等基础云计算服务的云服务器；软件可以是实现切图方法的应用等，但并不局限于以上形式。

本申请可用于众多通用或专用的计算机系统环境或配置中。例如：个人计算机、服务器计算机、手持设备或便携式设备、平板型设备、多处理器系统、基于微处理器的系统、置顶盒、可编程的消费电子设备、网络PC、小型计算机、大型计算机、包括以上任何系统或设备的分布式计算环境等等。本申请可以在由计算机执行的计算机可执行指令的一般上下文中描述，例如程序模块。一般地，程序模块包括执行特定任务或实现特定抽象数据类型的例程、程序、对象、组件、数据结构等等。也可以在分布式计算环境中实践本申请，在这些分布式计算环境中，由通过通信网络而被连接的远程处理设备来执行任务。在分布式计算环境中，程序模块可以位于包括存储设备在内的本地和远程计算机存储介质中。

需要说明的是，在本申请的各个具体实施方式中，当涉及到需要根据用户信息、用户行为数据，用户历史数据以及用户位置信息等与用户身份或特性相关的数据进行相关处理时，都会先获得用户的许可或者同意，而且，对这些数据的收集、使用和处理等，都会遵守相关国家和地区的相关法律法规和标准。此外，当本申请实施例需要获取用户的敏感个人信息时，会通过弹窗或者跳转到确认页面等方式获得用户的单独许可或者单独同意，在明确获得用户的单独许可或者单独同意之后，再获取用于使本申请实施例能够正常运行的必要的用户相关数据。

图1是本申请实施例提供的切图方法的一个可选的流程图，图1中的方法可以包括但不限于包括步骤S101至步骤S104。

步骤S101，获取目标图像的URL以及由用户输入的切图配置参数；

步骤S102，根据目标图像的URL在页面创建canvas画布标签；

步骤S103，通过canvas画布标签渲染出目标图像；

步骤S104，根据切图配置参数对目标图像进行切割，得到多个切图。

在一些实施例的步骤S101中，获取目标图像的URL以及切图配置参数，其中，切图配置参数由用户输入。需要说明的是，目标图像的URL为需要切割的长图的互联网地址。切图配置参数由用户根据切图的需要进行输入，切图配置参数包括但不限于目标图像的宽度参数和目标图像的高度参数。

在一些实施例的步骤S102中，根据目标图像的URL在页面创建canvas画布标签。在用户配置所需切图结果的宽度参数和高度参数之后，根据用户输入的切图配置参数，在浏览器页面创建canvas标签。其中，Canvas标签用于在互联网的网页实时生成图像，并且可以操作图像内容。

在一些实施例的步骤S103中，通过canvas画布标签渲染出目标图像。通过采用在浏览器页面创建的canvas标签，在canvas的现有方法的基础上，使用多个canvas的功能，渲染生成虚拟DOM，并生成为独立的切图，将canvas的方法进行封装，适配于不同的使用场景，配置对应的配置项，提高请求效率，同时还将每个图片文件的上传请求同步进行，并且顺序排位，能确保不会由于网络的原因导致图片的顺序错乱，提高了切图的稳定性。

在一些实施例的步骤S104中，根据切图配置参数对目标图像进行切割，得到多个切图。对通过canvas画布标签渲染出来的图像，根据用户输入的切图配置参数对图像进行切割，得到多个切图。与现有的切图方法相比，本申请具有无需人工操作的优势，只需输入用户设置的切图配置参数，便可以实现大批量的快速切图，整个切图过程用户无感知，可以优化用户操作体验，提高页面渲染速度，简化业务逻辑。

在一些实施例中，以一个长图自动化切图为例，配置所需切图结果的宽度和高度，以及图片的URL。根据用户所输入的切图配置参数，在页面创建canvas标签，并通过URL渲染生成图片对象。根据所配置的宽度参数和高度参数height，遍历出每个单图的切割点，并且获取长图的完整高度，用ImgHeihgt/height向下取整计算出一共需要切出完整图片的数量ImgNum，同样的用ImgHeihgt％height取余函数计算出最后一张不完整的图需要切割的长度范围，循环ImgNum，乘上height，计算出每张图片的切割起点，切割终点则为起点高度+height，这样整张图片的切割轮廓便清晰。根据计算出来的切割线结果，通过canvas的getContext(‘2d’).drawImage方法，将每一张的切割图，重新生成一个独立的canvas并渲染于页面之上。将每个独立的切割图片的dom克隆一份，并附上style，然后转化为VirtualDom对象。递归渲染DOM对象，通过虚拟DOM树计算出一个个的renderQueue Item，并调用ctx附上样式并生成图片，每个生成图片的过程都返回一个promise对象。收集所有的切图的promise对象，调用Promise.all()方法，当完成所有切图的文件后，将文件上传至指定资源桶中，生成具体的图片路径。相比于传统的切图方法，本方法具有免操作，只需传入用户预期的值，便可以实现大批量的快速切图，切图用户无感知，优化用户操作体验，提高页面渲染速度，简化业务逻辑。

本申请实施例所示意的步骤S101至步骤S104，获取目标图像的URL以及由用户输入的切图配置参数；根据目标图像的URL在页面创建canvas画布标签；通过canvas画布标签渲染出目标图像；根据切图配置参数对目标图像进行切割，得到多个切图。基于此，本申请通过获取目标图像的URL，并根据目标图像的URL在页面创建canvas画布标签，再通过canvas画布标签渲染出目标图像，根据由用户输入的切图配置参数对目标图像进行切割，得到多个切图。与现有的切图方法相比，本申请具有无需人工操作的优势，只需输入用户设置的切图配置参数，便可以实现大批量的快速切图，整个切图过程用户无感知，可以优化用户操作体验，提高页面渲染速度，简化业务逻辑。此外，采用在浏览器页面创建的canvas标签，在canvas的现有方法的基础上，使用多个canvas的功能，渲染生成虚拟DOM，并生成为独立的切图，将canvas的方法进行封装，适配于不同的使用场景，配置对应的配置项，提高请求效率，同时还将每个图片文件的上传请求同步进行，并且顺序排位，能确保不会由于网络的原因导致图片的顺序错乱，提高了切图的稳定性。

请参阅图2，在一些实施例中，步骤S104可以包括但不限于包括步骤S201至步骤S205：

步骤S201，根据切图配置参数遍历出每个切图的切割点；

步骤S202，获取目标图像的完整高度；

步骤S203，根据切割点和完整高度确定每个切图的切割长度范围；

步骤S204，根据每个切图的切割长度范围确定切割结果；

步骤S205，基于切割结果对每个切图重新生成独立的canvas并渲染于页面之上。

在一些实施例中，首先根据切图配置参数遍历出每个切图的切割点，并获取目标图像的完整高度，根据切割点和完整高度确定每个切图的切割长度范围，并根据每个切图的切割长度范围确定切割结果，基于切割结果对每个切图重新生成独立的canvas并渲染于页面之上。

在一些实施例中，根据用户输入的需要切图的宽度参数和高度参数height，遍历出每个单图的切割点，并且获取长图的完整高度ImgHeihgt，用ImgHeihgt/height向下取整计算出一共需要切出完整图片的数量ImgNum，同样的用ImgHeihgt％height取余函数计算出最后一张不完整的图需要切割的长度范围，循环ImgNum，乘上height，计算出每张图片的切割起点，切割终点则为起点高度+height，这样整张图片的切割轮廓便清晰。根据计算出来的切割线结果，通过canvas的getContext(‘2d’).drawImage方法，将每一张的切割图，重新生成一个独立的canvas并渲染于页面之上。

请参阅图3，在一些实施例中，在步骤S104之后还可以包括但不限于包括步骤S301至步骤S303：

步骤S301，将每个切图的DOM克隆一份并附上DOM的样式style，以转换成虚拟DOM对象；

步骤S302，递归虚拟DOM对象，通过虚拟DOM树计算出每个切图的渲染顺序；

步骤S303，根据渲染顺序调用ctx附上DOM的样式style，以生成每个切图的图片。

在一些实施例中，将每个独立的切割图片的DOM克隆一份，并附上DOM的样式style，然后转化为虚拟Dom对象。递归渲染虚拟DOM对象，通过虚拟DOM树计算出一个个的渲染顺序renderQueue Item，并调用ctx附上DOM的样式style并生成切图图片。其中，ctx是canvas标签自带的一个图片绘制的属性。

在一些实施例中，通过采用在浏览器页面创建的canvas标签，在canvas的现有方法的基础上，使用多个canvas的功能，渲染生成虚拟DOM，并生成为独立的切图，将canvas的方法进行封装，适配于不同的使用场景，配置对应的配置项，提高请求效率，同时还将每个图片文件的上传请求同步进行，并且顺序排位，能确保不会由于网络的原因导致图片的顺序错乱，提高了切图的稳定性。

请参阅图4，在一些实施例中，在步骤S303之后还可以包括但不限于包括步骤S401至步骤S402：

步骤S401，对生成每个切图的图片的过程都返回一个promise对象；

步骤S402，收集所有的切图的promise对象，直至得到所有的切图文件。

在一些实施例中，对生成每个切图的图片的过程都返回一个promise对象，通过收集所有的切图的promise对象，可以快速收集切图文件，直至得到所有的切图文件，以免出现遗漏某个切图的情形，从而进一步提高了切图的稳定性。

请参阅图5，在一些实施例中，在步骤S402之后还可以包括但不限于包括步骤S501至步骤S502：

步骤S501，当得到所有的切图文件后，将切图文件上传至指定的资源桶中；

步骤S502，生成从资源桶下载切图文件的图片路径。

在一些实施例中，当得到所有的切图文件后，将切图文件上传至指定的资源桶中，生成从资源桶下载切图文件的图片路径，基于此，相比于传统的切图方法，本方法具有免操作，只需传入用户预期的值，便可以实现大批量的快速切图，切图用户无感知，优化用户操作体验，提高页面渲染速度，简化业务逻辑。

请参阅图6，在一些实施例中，步骤S402可以包括但不限于包括步骤S601：

步骤S601，调用Promise.all()方法收集所有的切图的promise对象，直至得到所有的切图文件。

在一些实施例中，通过调用Promise.all()方法收集所有的切图的promise对象，直至得到所有的切图文件。其中，Promise.all()该方法用于将多个Promise实例，包装成一个新的Promise实例。同时，成功和失败的返回值是不同的，成功的时候返回的是一个结果数组，而失败的时候则返回最先被reject失败状态的值。因此，当返回的是一个结果数组，则表示成功得到所有的切图文件。

以下结合具体实施例进一步说明本申请的切图方法。

以一个长图自动化切图为例，配置所需切图结果的宽度和高度，以及图片的URL。根据用户所输入的切图配置参数，在页面创建canvas标签，并通过URL渲染生成图片对象。根据所配置的宽度参数和高度参数height，遍历出每个单图的切割点，并且获取长图的完整高度，用ImgHeihgt/height向下取整计算出一共需要切出完整图片的数量ImgNum，同样的用ImgHeihgt％height取余函数计算出最后一张不完整的图需要切割的长度范围，循环ImgNum，乘上height，计算出每张图片的切割起点，切割终点则为起点高度+height，这样整张图片的切割轮廓便清晰。根据计算出来的切割线结果，通过canvas的getContext(‘2d’).drawImage方法，将每一张的切割图，重新生成一个独立的canvas并渲染于页面之上。将每个独立的切割图片的dom克隆一份，并附上style，然后转化为VirtualDom对象。递归渲染DOM对象，通过虚拟DOM树计算出一个个的renderQueue Item，并调用ctx附上样式并生成图片，每个生成图片的过程都返回一个promise对象。收集所有的切图的promise对象，调用Promise.all()方法，当完成所有切图的文件后，将文件上传至指定资源桶中，生成具体的图片路径。相比于传统的切图方法，本方法具有免操作，只需传入用户预期的值，便可以实现大批量的快速切图，切图用户无感知，优化用户操作体验，提高页面渲染速度，简化业务逻辑。此外，采用在浏览器页面创建的canvas标签，在canvas的现有方法的基础上，使用多个canvas的功能，渲染生成虚拟DOM，并生成为独立的切图，将canvas的方法进行封装，适配于不同的使用场景，配置对应的配置项，提高请求效率，同时还将每个图片文件的上传请求同步进行，并且顺序排位，能确保不会由于网络的原因导致图片的顺序错乱，提高了切图的稳定性。

基于此，本申请通过获取目标图像的URL以及由用户输入的切图配置参数；根据目标图像的URL在页面创建canvas画布标签；通过canvas画布标签渲染出目标图像；根据切图配置参数对目标图像进行切割，得到多个切图。基于此，本申请通过获取目标图像的URL，并根据目标图像的URL在页面创建canvas画布标签，再通过canvas画布标签渲染出目标图像，根据由用户输入的切图配置参数对目标图像进行切割，得到多个切图。与现有的切图方法相比，本申请具有无需人工操作的优势，只需输入用户设置的切图配置参数，便可以实现大批量的快速切图，整个切图过程用户无感知，可以优化用户操作体验，提高页面渲染速度，简化业务逻辑。此外，采用在浏览器页面创建的canvas标签，在canvas的现有方法的基础上，使用多个canvas的功能，渲染生成虚拟DOM，并生成为独立的切图，将canvas的方法进行封装，适配于不同的使用场景，配置对应的配置项，提高请求效率，同时还将每个图片文件的上传请求同步进行，并且顺序排位，能确保不会由于网络的原因导致图片的顺序错乱，提高了切图的稳定性。

请参阅图7，本申请实施例还提供一种切图装置，可以实现上述切图方法，该装置包括：

获取模块710，用于获取目标图像的URL以及由用户输入的切图配置参数；

创建模块720，用于根据目标图像的URL在页面创建canvas画布标签；

渲染模块730，用于通过canvas画布标签渲染出目标图像；

切割模块740，用于根据切图配置参数对目标图像进行切割，得到多个切图。

在本申请的一些实施例中，获取模块710获取目标图像的URL以及由用户输入的切图配置参数，创建模块720根据目标图像的URL在页面创建canvas画布标签，渲染模块730通过canvas画布标签渲染出目标图像，切割模块740根据切图配置参数对目标图像进行切割，得到多个切图。

在本申请的一些实施例中，获取模块710获取目标图像的URL以及切图配置参数，其中，切图配置参数由用户输入。需要说明的是，目标图像的URL为需要切割的长图的互联网地址。切图配置参数由用户根据切图的需要进行输入，切图配置参数包括但不限于目标图像的宽度参数和目标图像的高度参数。

在本申请的一些实施例中，创建模块720根据目标图像的URL在页面创建canvas画布标签。在用户配置所需切图结果的宽度参数和高度参数之后，根据用户输入的切图配置参数，在浏览器页面创建canvas标签。其中，Canvas标签用于在互联网的网页实时生成图像，并且可以操作图像内容。

在本申请的一些实施例中，渲染模块730通过canvas画布标签渲染出目标图像。通过采用在浏览器页面创建的canvas标签，在canvas的现有方法的基础上，使用多个canvas的功能，渲染生成虚拟DOM，并生成为独立的切图，将canvas的方法进行封装，适配于不同的使用场景，配置对应的配置项，提高请求效率，同时还将每个图片文件的上传请求同步进行，并且顺序排位，能确保不会由于网络的原因导致图片的顺序错乱，提高了切图的稳定性。

在本申请的一些实施例中，切割模块740根据切图配置参数对目标图像进行切割，得到多个切图。对通过canvas画布标签渲染出来的图像，根据用户输入的切图配置参数对图像进行切割，得到多个切图。与现有的切图方法相比，本申请具有无需人工操作的优势，只需输入用户设置的切图配置参数，便可以实现大批量的快速切图，整个切图过程用户无感知，可以优化用户操作体验，提高页面渲染速度，简化业务逻辑。

基于此，本申请实施例的切图装置，获取模块710获取目标图像的URL以及由用户输入的切图配置参数，创建模块720根据目标图像的URL在页面创建canvas画布标签，渲染模块730通过canvas画布标签渲染出目标图像，切割模块740根据切图配置参数对目标图像进行切割，得到多个切图。基于此，本申请通过获取目标图像的URL以及由用户输入的切图配置参数；根据目标图像的URL在页面创建canvas画布标签；通过canvas画布标签渲染出目标图像；根据切图配置参数对目标图像进行切割，得到多个切图。基于此，本申请通过获取目标图像的URL，并根据目标图像的URL在页面创建canvas画布标签，再通过canvas画布标签渲染出目标图像，根据由用户输入的切图配置参数对目标图像进行切割，得到多个切图。与现有的切图方法相比，本申请具有无需人工操作的优势，只需输入用户设置的切图配置参数，便可以实现大批量的快速切图，整个切图过程用户无感知，可以优化用户操作体验，提高页面渲染速度，简化业务逻辑。此外，采用在浏览器页面创建的canvas标签，在canvas的现有方法的基础上，使用多个canvas的功能，渲染生成虚拟DOM，并生成为独立的切图，将canvas的方法进行封装，适配于不同的使用场景，配置对应的配置项，提高请求效率，同时还将每个图片文件的上传请求同步进行，并且顺序排位，能确保不会由于网络的原因导致图片的顺序错乱，提高了切图装置的稳定性。还可以降低切图装置各模块的耦合度，封装为一个独立的装置来降低开发风险实现自动切割，自动上传，提高了开发效率，同时也提高了用户的使用体验。

该切图装置的具体实施方式与上述切图方法的具体实施例基本相同，在此不再赘述。

本申请实施例还提供了一种电子设备，电子设备包括存储器和处理器，存储器存储有计算机程序，处理器执行计算机程序时实现上述切图方法。该电子设备可以为包括平板电脑、车载电脑等任意智能终端。

请参阅图8，图8示意了另一实施例的电子设备的硬件结构，电子设备包括：

处理器801，可以采用通用的CPU(CentralProcessingUnit，中央处理器)、微处理器、应用专用集成电路(ApplicationSpecificIntegratedCircuit，ASIC)、或者一个或多个集成电路等方式实现，用于执行相关程序，以实现本申请实施例所提供的技术方案。

存储器802，可以采用只读存储器(ReadOnlyMemory，ROM)、静态存储设备、动态存储设备或者随机存取存储器(RandomAccessMemory，RAM)等形式实现。存储器802可以存储操作系统和其他应用程序，在通过软件或者固件来实现本说明书实施例所提供的技术方案时，相关的程序代码保存在存储器802中，并由处理器801来调用执行本申请实施例的切图方法，即通过获取目标图像的URL以及由用户输入的切图配置参数；根据目标图像的URL在页面创建canvas画布标签；通过canvas画布标签渲染出目标图像；根据切图配置参数对目标图像进行切割，得到多个切图。基于此，本申请通过获取目标图像的URL，并根据目标图像的URL在页面创建canvas画布标签，再通过canvas画布标签渲染出目标图像，根据由用户输入的切图配置参数对目标图像进行切割，得到多个切图。与现有的切图方法相比，本申请具有无需人工操作的优势，只需输入用户设置的切图配置参数，便可以实现大批量的快速切图，整个切图过程用户无感知，可以优化用户操作体验，提高页面渲染速度，简化业务逻辑。此外，采用在浏览器页面创建的canvas标签，在canvas的现有方法的基础上，使用多个canvas的功能，渲染生成虚拟DOM，并生成为独立的切图，将canvas的方法进行封装，适配于不同的使用场景，配置对应的配置项，提高请求效率，同时还将每个图片文件的上传请求同步进行，并且顺序排位，能确保不会由于网络的原因导致图片的顺序错乱，提高了切图的稳定性。

输入/输出接口803，用于实现信息输入及输出。

通信接口804，用于实现本设备与其他设备的通信交互，可以通过有线方式(例如USB、网线等)实现通信，也可以通过无线方式(例如移动网络、WIFI、蓝牙等)实现通信。

总线，在设备的各个组件(例如处理器801、存储器802、输入/输出接口803和通信接口804)之间传输信息。

其中处理器801、存储器802、输入/输出接口803和通信接口804通过总线实现彼此之间在设备内部的通信连接。

本申请实施例还提供了一种计算机可读存储介质，该计算机可读存储介质存储有计算机程序，该计算机程序被处理器执行时实现上述切图方法。

存储器作为一种非暂态计算机可读存储介质，可用于存储非暂态软件程序以及非暂态性计算机可执行程序。此外，存储器可以包括高速随机存取存储器，还可以包括非暂态存储器，例如至少一个磁盘存储器件、闪存器件、或其他非暂态固态存储器件。在一些实施方式中，存储器可选包括相对于处理器远程设置的存储器，这些远程存储器可以通过网络连接至该处理器。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。

本申请实施例提供的切图方法、切图装置、电子设备及存储介质，通过获取目标图像的URL以及由用户输入的切图配置参数；根据目标图像的URL在页面创建canvas画布标签；通过canvas画布标签渲染出目标图像；根据切图配置参数对目标图像进行切割，得到多个切图。基于此，本申请通过获取目标图像的URL，并根据目标图像的URL在页面创建canvas画布标签，再通过canvas画布标签渲染出目标图像，根据由用户输入的切图配置参数对目标图像进行切割，得到多个切图。与现有的切图方法相比，本申请具有无需人工操作的优势，只需输入用户设置的切图配置参数，便可以实现大批量的快速切图，整个切图过程用户无感知，可以优化用户操作体验，提高页面渲染速度，简化业务逻辑。此外，采用在浏览器页面创建的canvas标签，在canvas的现有方法的基础上，使用多个canvas的功能，渲染生成虚拟DOM，并生成为独立的切图，将canvas的方法进行封装，适配于不同的使用场景，配置对应的配置项，提高请求效率，同时还将每个图片文件的上传请求同步进行，并且顺序排位，能确保不会由于网络的原因导致图片的顺序错乱，提高了切图的稳定性。

本领域普通技术人员可以理解，上文中所公开方法中的全部或某些步骤、系统可以被实施为软件、固件、硬件及其适当的组合。某些物理组件或所有物理组件可以被实施为由处理器，如中央处理器、数字信号处理器或微处理器执行的软件，或者被实施为硬件，或者被实施为集成电路，如专用集成电路。这样的软件可以分布在计算机可读介质上，计算机可读介质可以包括计算机存储介质(或非暂时性介质)和通信介质(或暂时性介质)。如本领域普通技术人员公知的，术语计算机存储介质包括在用于存储信息(诸如计算机可读程序、数据结构、程序模块或其他数据)的任何方法或技术中实施的易失性和非易失性、可移除和不可移除介质。计算机存储介质包括但不限于RAM、ROM、EEPROM、闪存或其他存储器技术、CD-ROM、数字多功能盘(DVD)或其他光盘存储、磁盒、磁带、磁盘存储或其他磁存储装置、或者可以用于存储期望的信息并且可以被计算机访问的任何其他的介质。此外，本领域普通技术人员公知的是，通信介质通常包含计算机可读程序、数据结构、程序模块或者诸如载波或其他传输机制之类的调制数据信号中的其他数据，并且可包括任何信息递送介质。

本申请实施例描述的实施例是为了更加清楚的说明本申请实施例的技术方案，并不构成对于本申请实施例提供的技术方案的限定，本领域技术人员可知，随着技术的演变和新应用场景的出现，本申请实施例提供的技术方案对于类似的技术问题，同样适用。

本领域技术人员可以理解的是，图中示出的技术方案并不构成对本申请实施例的限定，可以包括比图示更多或更少的步骤，或者组合某些步骤，或者不同的步骤。

以上所描述的装置实施例仅仅是示意性的，其中作为分离部件说明的单元可以是或者也可以不是物理上分开的，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。

本领域普通技术人员可以理解，上文中所公开方法中的全部或某些步骤、系统、设备中的功能模块/单元可以被实施为软件、固件、硬件及其适当的组合。

本申请的说明书及上述附图中的术语“第一”、“第二”、“第三”、“第四”等(如果存在)是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本申请的实施例能够以除了在这里图示或描述的那些以外的顺序实施。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。

应当理解，在本申请中，“至少一个(项)”是指一个或者多个，“多个”是指两个或两个以上。“和/或”，用于描述关联对象的关联关系，表示可以存在三种关系，例如，“A和/或B”可以表示：只存在A，只存在B以及同时存在A和B三种情况，其中A，B可以是单数或者复数。字符“/”一般表示前后关联对象是一种“或”的关系。“以下至少一项(个)”或其类似表达，是指这些项中的任意组合，包括单项(个)或复数项(个)的任意组合。例如，a，b或c中的至少一项(个)，可以表示：a，b，c，“a和b”，“a和c”，“b和c”，或“a和b和c”，其中a，b，c可以是单个，也可以是多个。

在本申请所提供的几个实施例中，应该理解到，所揭露的装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，上述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。

上述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外，在本申请各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。

集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括多指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本申请各个实施例的方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(Read-Only Memory，简称ROM)、随机存取存储器(Random Access Memory，简称RAM)、磁碟或者光盘等各种可以存储程序的介质。

以上参照附图说明了本申请实施例的优选实施例，并非因此局限本申请实施例的权利范围。本领域技术人员不脱离本申请实施例的范围和实质内所作的任何修改、等同替换和改进，均应在本申请实施例的权利范围之内。