CN114067028A - 图片编辑方法及装置 - Google Patents

Abstract

本申请提供图片编辑方法及装置，其中所述图片编辑方法包括：获取待编辑图片并创建可编辑画布层；根据所述待编辑图片创建所述可编辑画布层的背景元素；接收针对所述待编辑图片的图片编辑指令，并基于所述图片编辑指令在所述可编辑画布层中创建至少一个可编辑元素；基于所述可编辑画布层中的至少一个可编辑元素以及所述背景元素生成待展示图片。本申请的图片编辑方法，通过创建可编辑画布层实现对待编辑图片的编辑，避免了编辑图片时发生的操作卡顿等问题，提升了用户的图片编辑体验。

Description

图片编辑方法及装置

技术领域

本申请涉及互联网技术领域，特别涉及一种图片编辑方法。本申请同时涉及一种图片编辑装置，一种计算设备，以及一种计算机可读存储介质。

背景技术

随着计算机技术的不断发展，用户对图片的编辑需求不断增加。图片中插入文字是一种常用的图片处理手段，目前在线为图片中添加文本的方式为：创建DOM节点添加文本，通过css添加文本样式，并将文本和图片的层级位置设置在不同层级上，使文本DOM节点覆盖在图片DOM节点之上。

然而，上述通过DOM节点添加文本的方式会涉及大量DOM节点，DOM节点的增加、删除等操作均会造成浏览器的重新渲染，从而导致用户在编辑图片过程中会存在反应迟缓、操作卡顿等问题，影响用户体验；此外，上述方式的实现需要提前加载体积较大的字体文件、样式文件等，浪费用户的网络资源。

因此，如何动态加载编辑图片的文本字体，减小对前置文件的依赖，提升用户编辑图片的体验成为技术人员亟待解决的技术问题。

发明内容

有鉴于此，本申请实施例提供了一种图片编辑方法。本申请同时涉及一种图片编辑装置，一种计算设备，以及一种计算机可读存储介质，以解决现有技术中存在的图片编辑操作易发生卡顿，影响用户图片编辑体验的问题。

根据本申请实施例的第一方面，提供了一种图片编辑方法，包括：

获取待编辑图片并创建可编辑画布层；

根据所述待编辑图片创建所述可编辑画布层的背景元素；

接收针对所述待编辑图片的图片编辑指令，并基于所述图片编辑指令在所述可编辑画布层中创建至少一个可编辑元素；

基于所述可编辑画布层中的至少一个可编辑元素以及所述背景元素生成待展示图片。

根据本申请实施例的第二方面，提供了一种图片编辑装置，包括：

第一接收模块，被配置为获取待编辑图片并创建可编辑画布层；

创建模块，被配置为根据所述待编辑图片创建所述可编辑画布层的背景元素；

第二接收模块，被配置为接收针对所述待编辑图片的图片编辑指令，并基于所述图片编辑指令在所述可编辑画布层中创建至少一个可编辑元素；

生成模块，被配置为基于所述可编辑画布层中的至少一个可编辑元素以及所述背景元素生成待展示图片。

根据本申请实施例的第三方面，提供了一种计算设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机指令，所述处理器执行所述计算机指令时实现所述图片编辑方法的步骤。

根据本申请实施例的第四方面，提供了一种计算机可读存储介质，其存储有计算机指令，该计算机指令被处理器执行时实现所述图片编辑方法的步骤。

本申请提供的图片编辑方法，实现了根据图片上传指令确定待编辑图片并创建可编辑画布层，根据待编辑图片创建画布层的背景元素，便于后续用户在以待编辑图片为背景的画布层中对进行图的片编辑操作；基于对待编辑图片的图片编辑指令创建可编辑元素，便于后续基于画布层中的可编辑元素以及背景元素获得编辑完成的图片；本申请通过将图片作为背景元素添加至画布层中，使用户在画布层中调整可编辑元素即可，在编辑图片时仅对当前可编辑元素进行渲染并展示，从而避免了编辑操作中易发生的卡顿现象，提高了图片编辑效率以及用户体验。

附图说明

图1是本申请一实施例提供的一种图片编辑方法的流程图；

图2是本申请一实施例提供的一种图片编辑控件的示意图；

图3是本申请一实施例提供的一种元素样式控件的示意图；

图4是本申请一实施例提供的一种对比画布层的示意图；

图5是本申请一实施例提供的一种应用于视频封面图片的图片编辑方法的处理流程图；

图6是本申请一实施例提供的一种图片编辑装置的结构示意图；

图7是本申请一实施例提供的一种计算设备的结构框图。

具体实施方式

在下面的描述中阐述了很多具体细节以便于充分理解本申请。但是本申请能够以很多不同于在此描述的其它方式来实施，本领域技术人员可以在不违背本申请内涵的情况下做类似推广，因此本申请不受下面公开的具体实施的限制。

在本申请一个或多个实施例中使用的术语是仅仅出于描述特定实施例的目的，而非旨在限制本申请一个或多个实施例。在本申请一个或多个实施例和所附权利要求书中所使用的单数形式的“一种”、“所述”和“该”也旨在包括多数形式，除非上下文清楚地表示其他含义。还应当理解，本申请一个或多个实施例中使用的术语“和/或”是指包含一个或多个相关联的列出项目的任何或所有可能组合。

应当理解，尽管在本申请一个或多个实施例中可能采用术语第一、第二等来描述各种信息，但这些信息不应限于这些术语。这些术语仅用来将同一类型的信息彼此区分开。例如，在不脱离本申请一个或多个实施例范围的情况下，第一也可以被称为第二，类似地，第二也可以被称为第一。取决于语境，如在此所使用的词语“如果”可以被解释成为“在……时”或“当……时”或“响应于确定”。

首先，对本申请一个或多个实施例涉及的名词术语进行解释。

Canvas：Canvas提供了一个通过JavaScript和HTML的<Canvas>元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。

Fabric：Fabric.js是一个强大而简单的JS Canvas库，我们能通过使用它实现在Canvas上创建、填充图形、给图形填充渐变颜色。组合图形(包括组合图形、图形文字、图片等)等一系列功能。简单来说我们可以通过使用Fabric从而以较为简单的方式实现较为复杂的Canvas功能。

图片中插入文字是一种常用的图片处理手段，目前提供在线为图片中插入文字的方法主要是通过HTML+CSS的方式实现，具体为通过插入DOM节点的方式添加文字，为该DOM节点设置CSS样式控制文字的样式，将图片与文字设置为不同的z-index层级使文字覆盖于图片DOM节点之上。

然而，通过HTML+CSS的方式实现在线为图片中插入文存在诸多弊端，首先，这种实现方式往往涉及大量的DOM节点增加，删除及内联样式修改，而DOM节点的增加，删除及内联样式的修改都会造成浏览器的重新渲染，因此在用户操作时会有相应迟缓，操作卡顿等严重的体验问题；其次，该种方式的实现需要提前加载字体文件，样式文件等文件，而这类的文件往往体积较大从而浪费用户的网络资源。

为了解决目前在线插入图片方法中存在的问题，本申请采用HTML5提供的Canvasapi实现图片及文本的绘制。Canvas api具有图层分层的能力并转用于图像绘制，在绘制性能方面远超HTML+css的绘制方式，并且Canvas不依赖css样式，支持字体动态加载，对前置加载文件依赖极小；通过input file提供图片上传能力，获取到用户上传的图片创建Canvas画布并使用Canvas提供的绘制api将上传图片与文本内容绘制到不同图层，通过可交互的UI平台为用户提供对以绘制文本控制能力，响应于用户的操作事件对Canvas画布文本内容图层进行重新绘制以实现对图片中文本绘制的编辑操作。

在本申请中，提供了一种图片编辑方法，本申请同时涉及一种图片编辑装置，一种计算设备，以及一种计算机可读存储介质，在下面的实施例中逐一进行详细说明。

图1示出了根据本申请一实施例提供的一种图片编辑方法的流程图，具体包括以下步骤：

步骤102：获取待编辑图片并创建可编辑画布层。

其中，图片上传指令是指将待编辑图片上传至浏览器的指令，可以由用户点击浏览器中的图片上传按钮触发；待编辑图片是指基于图片上传指令确定的图片；在可编辑画布层中可以基于需求添加元素，其中，元素包括但不限于图片、文字等可以添加至画布层中的多媒体资源。实际应用中，可以采用HTML中的Canvas标签创建画布层，并基于javascript在创建的画布层中绘制元素，从而便于后续实现对待编辑图片的编辑。

具体的，响应于所述图片上传指令获取待编辑图片的方法包括：

确定所述图片上传指令中的图片路径信息；

基于所述图片路径信息获取待编辑图片。

其中，图片路径信息是指图片的存储路径信息；获取待编辑图片包括获取待编辑图片的属性信息，例如，获取待编辑图片的宽度信息、高度信息等；

待编辑图片可以来源于本地设备，也可以来源于在线数据库，例如，图片A存储于本地设备中，图片上传指令中的图片A的图片路径信息为“D:\案件\2021\图片”，再如，图片B存储于在线数据库，图片B的存储路径信息为图片B所在的在线数据库的URL地址；实际应用中，待编辑图片的图片路径信息可以基于用户的选择生成，也可以由系统自动推荐，本申请不做具体限定，例如，系统截取视频中的某一帧作为待编辑图片供用户进行编辑。

在本申请一具体实施方式中，以待编辑图片C为例，接收图片上传指令，获取图片上传指令中的图片路径信息“D:\2021\图片”；根据图片路径信息在本地D盘的文件中获取待编辑图片C。

具体的，响应于所述图片上传指令创建可编辑画布层的方法包括：

获取预设的画布层尺寸信息；

基于所述画布层尺寸信息创建可编辑画布层。

其中，画布层尺寸信息是指画布层宽度信息以及画布层长度信息；确定画布层尺寸信息后，可以根据预设的画布层尺寸信息创建可编辑画布层；实际应用中，用户还可以基于实际需求对画布层的尺寸进行调整。

在本申请一具体实施方式中，以创建可编辑画布层Q为例，获取预设的画布层尺寸信息，包括画布层长度值300px以及画布层宽度值200px，基于画布层的尺寸信息创建长度为300px宽度为200px的可编辑画布层Q。

通过响应于图片上传指令，获取待编辑图片并创建可编辑画布层，便于后续根据待编辑图片对可编辑画布层做进一步的处理，从而实现在可编辑画布层中对待编辑图片进行编辑。

在实际应用中，用户可根据浏览器页面展示的图片编辑控件触发图片上传指令，具体方法包括：

展示预设图片编辑控件；

基于对所述预设图片编辑控件的操作触发图片上传指令。

其中，预设图片编辑控件是指可以包含图片上传按钮、添加按钮、删除按钮等功能按钮的图片编辑控制台；图片编辑控件设定有监听事件，可以对图片编辑控件中的点击事件进行监听，例如，监听图片编辑控件的添加、删除、导出等功能按钮点击事件；用户可以通过点击图片编辑控件中的功能按钮在可编辑画布层中的图片编辑操作，例如，用户点击图片编辑控件中的图片上传按钮，触发图片上传指令，浏览器响应于触发的图片上传指令创建可编辑图层；预设图片编辑控件可以基于预先进行设置，或由用户基于需求自行设定，在接收到图片编辑请求后对预设图片编辑控件进行展示即可。

在本申请一具体实施方式中，以展示图片编辑控件a为例，响应于用户触发的针对视频封面图片的编辑指令，对预设的图片编辑控件a进行展示，如图2所示，图2是本申请一实施例提供的一种图片编辑控件的示意图，图片编辑控件a中包含上传图片按钮等功能按钮，用户点击图片上传按钮，触发图片上传指令，图片上传指令中包含视频封面图片的图片路径信息，根据图片路径信息获取视频封面图片，并在图片编辑控件a的画布区域中创建可编辑画布层。

步骤104：根据所述待编辑图片创建所述可编辑画布层的背景元素。

在确定待编辑图片后，为了实现基于可编辑画布层对待编辑图片进行编辑，则需要将待编辑图片作为待编辑画布层的背景进行展示，即根据待编辑图片创建可编辑画布层的背景元素。

具体的，确定待编辑图片后，基于待编辑图片创建第一图层并基于待编辑图片确定背景元素，在第一图层加载并展示背景元素。

其中，第一图层是指对绘制在可编辑画布层中的元素进行展示的图层，例如，基于可编辑图片生成背景元素，则第一图层可以对背景元素进行展示，再如，根据用户发送的在可编辑画布层中的绘制请求确定文本元素，则第一图层可以对文本元素进行展示。

在本申请一具体实施方式中，以风景图片为例，确定风景图片为待编辑图片，并根据风景图片确定背景元素以及创建元素图层，将基于风景图片确定的背景元素加载至元素图层进行展示。

实际应用中，根据所述待编辑图片创建所述可编辑画布层的背景元素的具体方法包括：

获取所述待编辑图片的图片尺寸信息以及所述可编辑画布层的画布层尺寸信息；

基于所述图片尺寸信息以及所述画布层尺寸信息计算图片缩放比值；

基于所述图片缩放比值、所述待编辑图片以及预设背景元素位置信息创建所述可编辑画布层的背景元素。

其中，图片尺寸信息是指待编辑图片的图片宽度信息以及图片长度信息；图片缩放比值包括图片宽度缩放比值以及图片长度缩放比值；图片宽度缩放比值是可编辑画布层的宽度与待编辑图片的宽度的比值，图片长度缩放比值是可编辑画布层的长度与待编辑图片的长度的比值；背景元素位置信息是指背景元素在可编辑画布层中展示时的位置信息，例如，背景元素位置信息为“Left：0，top：0”即将背景元素在距离可编辑画布层左边框0px，在距离可编辑画布层上边框0px的位置进行展示。

在实际应用中，可以将待编辑图片的图片尺寸信息调整至与可编辑画布层的画布层尺寸信息一致，或将待编辑图片的图片尺寸信息调整至小于可编辑画布层的尺寸信息，使待编辑图片可以在可编辑画布层中可以完整展示，便于后续基于可编辑画布层对待编辑图片进行处理；在本申请一具体实施例中，可采用Fabric中的内置方法快速创建可编辑画布层的背景元素。

在本申请一具体实施方式中，以根据待编辑图片D创建可编辑画布层的背景元素为例，基于用户需求确定对待编辑图片D进行编辑，获取待编辑图片D的图片尺寸信息：图片宽度100px、图片长度200px，获取可编辑画布层的画布层尺寸信息：画布宽度50px、画布长度100px；计算画布宽度与图片宽度的比值获得图片缩放长度比值1:2，计算画布长度与画布长度的比值获得图片缩放长度比值1:2；根据图片缩放长度比值以及图片缩放宽度比值对待编辑图片D进行缩放，获得与可编辑画布层的尺寸信息一致的待编辑图片D；确定预设背景元素位置信息“Right:0，top:0”，即基于距离可编辑画布层右边框0px、距离可编辑画布层上边框0px的位置信息在可编辑画布层对与可编辑画布层的尺寸信息一致的待编辑图片D进行展示。

通过基于待编辑图片，在可编辑画布层中创建与可编辑画布层大小一致或小于可编辑画布层的背景元素，使待编辑图片以背景元素的方式在可编辑画布层中完全展示，便于后续基于可编辑画布层实现对待编辑图片的编辑处理。

步骤106：接收针对所述待编辑图片的图片编辑指令，并基于所述图片编辑指令在所述可编辑画布层中创建至少一个可编辑元素。

在完成可编辑画布层的创建并创建可编辑画布层的背景元素后，则可以对待编辑图片进行编辑。

其中，图片编辑指令是指对待编辑图片进行编辑的指令，例如，在待编辑图片中新增文本的指令，再如，在待编辑图片中删除文本的指令；可编辑元素是指根据图片编辑指令在可编辑画布层中添加的元素，其中，元素可以是文字、图片等多媒体资源。

具体的，根据图片编辑指令确定至少一个可编辑元素并创建第二图层，将所述可编辑元素加载至对应的第二图层。

其中，第二图层是指对绘制在可编辑画布层中的元素进行展示，并且区别于第一图层的图层，例如，第一图层对文本元素“a”进行展示，第二图层对文本元素“b”进行展示；在实际应用中，可以基于用户需求创建多个图层并由每个图层加载对应的元素进行展示。

在本申请一具体实施方式中，以人物图片为例，在确定待编辑图片为人物图片后，根据人物图片确定背景元素并创建背景展示图层，由背景展示图层加载背景元素进行展示；接收文本添加指令，基于文本添加指令确定文本元素“a”和文本元素“b”，并创建对应文本元素“a”和文本元素“b”的文本图层1和文本图层2；由文本图层1加载文本元素“a”，并由文本图层2加载文本元素“b”进行展示。

实际应用中，用户点击图片编辑控件中的功能按钮触发图片编辑指令，例如，用户点击图片编辑控件中的添加文本功能按钮，触发在待编辑图片中新增文本指令；基于新增文本指令在可编辑画布层中添加文本，即在可编辑画布层中添加文本元素。

在本申请一具体实施方式中，以待编辑图片为视频封面图片为例，接收针对视频封面图片的添加文本指令，根据添加文本指令在可编辑画布层中创建基于添加文本指令确定的文本内容。

在实际应用中，基于所述图片编辑指令在所述可编辑画布层中创建至少一个可编辑元素的具体方法包括：

确定所述图片编辑指令中的编辑内容信息，基于所述编辑内容信息生成初始可编辑元素；

根据预设元素配置参数和所述初始可编辑元素生成可编辑元素。

其中，编辑内容信息可以是文本信息、图片信息等多媒体信息；初始可编辑元素是指为编辑内容信息添加标识后得到的可编辑元素；预设元素配置参数是指为元素预先配置的元素样式信息、元素位置信息以及元素渲染信息等与元素相关的信息；可编辑元素是指包含元素样式信息、元素位置信息等元素相关信息的元素。

在本申请一具体实施方式中，以针对视频封面图片的添加文本指令为例，确定添加文本指令中的编辑内容信息“早上”；为编辑内容信息添加唯一标识标识编辑内容信息的元素ID“1”，获得包含元素ID“1”的初始可编辑元素；根据预设元素配置参数以及初始可编辑元素生成可编辑元素。

在实际应用中，根据预设元素配置参数和所述初始可编辑元素生成可编辑元素的具体方法包括：

获取预设元素配置参数，并确定所述预设元素配置参数中的元素属性信息；

基于所述元素属性信息处理所述初始可编辑元素获得可编辑元素。

其中，元素属性信息是指元素的尺寸、颜色等信息；通过基于元素属性信息处理初始可编辑元素，获得可编辑元素，丰富了可编辑元素的展示形式，提升了用户的图片编辑体验。

实际应用中，预设元素配置参数中包含元素属性信息、元素位置信息、元素渲染信息等元素相关的配置信息；根据元素属性信息可以调整可编辑元素的元素样式、元素颜色等信息；根据元素位置信息可以确定将调整后的可编辑元素创建在可编辑画布层中的具体位置；根据元素渲染信息可以设置元素的渲染方式，例如，将元素的渲染方式设置为先渲染字体后渲染字体边框，根据字体渲染方式定义字体边框宽度与字体大小的渲染关系。

在本申请一具体实施方式中，以新增文本元素为例，获取元素配置参数中的元素属性信息“3号字、艺术字体1”，根据元素属性信息对默认样式的初始文本元素“中午”进行处理，将元素样式信息为“3号字、艺术字体1”的文本元素“中午”作为可编辑元素，并基于元素配置参数中的元素位置信息确定。

在实际应用中，为了使用户更方便的添加可编辑元素，可以基于用户上传的图片，即基于可编辑画布层的背景元素为用户推荐与待编辑图片对应的元素配置参数，为用户提供参考的元素样式等与元素相关的配置信息，具体获得推荐元素配置参数的方法包括：

获取所述背景元素的背景元素特征信息；

基于所述背景元素特征信息和预设元素配置参数分析算法生成推荐元素配置参数。

其中，背景元素特征信息是指背景元素的图像特征信息，例如，背景元素的颜色信息；预设元素配置参数分析算法是指基于待编辑图片的图像特征信息向用户推荐匹配的元素配置参数的算法，例如，预设元素配置参数分析算法可以根据红色的背景元素向用户推荐包含黑色字体、白色边框等推荐元素配置参数；实际应用中，若用户选择推荐元素配置参数，则可以根据推荐元素配置参数实现一键对可编辑画布层中的可编辑元素的样式进行调整的功能。

实际应用中，在创建可编辑画布层之后，可以为可编辑画布层添加点击事事件；通过点击事件可以获取到用户在可编辑画布层中的点击位置信息，获取的点击位置信息用于在可编辑画布层中的多个可编辑元素中确定用户点击的目标可编辑元素。

在基于所述图片编辑指令在所述可编辑画布层中创建至少一个可编辑元素之后，可对可编辑元素进行进一步的调整，具体方法包括：

接收元素编辑指令，并基于所述元素编辑指令在所述至少一个可编辑元素中确定目标可编辑元素；

基于所述元素编辑指令对所述目标可编辑元素进行调整。

其中，元素编辑指令是指对在可编辑画布层中创建的可编辑元素进行编辑的指令；目标可编辑元素是指在可编辑画布层中的至少一个可编辑元素中确定的可编辑元素。

具体的，根据接收的元素编辑指令，在可编辑画布层中确定目标可编辑元素，并根据元素编辑指令中的元素编辑信息对可编辑元素进行调整，例如，基于元素编辑指令确定可编辑文本元素，并删除可编辑文本元素中的某个文字、修改可编辑文本元素的文本字体等。

在本申请一具体实施方式中，以修改文本元素字体指令为例，接收元素编辑指令，并根据元素编辑指令确定目标可编辑元素为文本元素；根据元素编辑指令中的文本编辑信息“宋体”，将字体为“楷体”的文本元素的元素字体修改为“宋体”。

在实际应用中，基于所述元素编辑指令在所述至少一个可编辑元素中确定目标可编辑元素的具体方法包括：

基于所述元素编辑指令确定触发位置信息；

确定与所述触发位置信息存在重叠的所述可编辑元素的位置信息，并将所述可编辑元素作为目标可编辑元素。

其中，触发位置信息是指用户在可编辑画布层中触发的位置对应的位置信息；可编辑元素的位置信息是指可编辑元素在可编辑画布层中的位置信息。

实际应用中，为创建的可编辑画布层绑定了点击事件；在用户点击可编辑画布层的某个位置后，可编辑画布层可以基于点击事件获取到点击位置信息；将点击位置信息与可编辑画布层中每个可编辑元素的位置信息进行对比，在点击位置信息与可编辑元素的位置信息存在重叠时，即可确定目标可编辑元素。

具体的，在创建可编辑画布层后，可创建当前选择文本对象并赋值为空，即未选中文本对象的状态，当前文本选择对象用于标识用户在可编辑画布层中选中的文本；计算点击位置信息与可编辑元素的位置信息是否存在重叠，若是，则将当前选择文本对象赋值为目标可编辑元素，即目标可编辑元素为当前选择文本对象；若否，则当前选择文本对象的赋值仍然为空，即用户未选中可编辑画布层中的可编辑元素。

在实际应用中，如图3所示，图3是本申请一实施例提供的一种元素样式控件的示意图，若当前选择文本对象赋值为目标可编辑元素，则可将预设的元素样式控件进行展示，元素样式控件中可以包含提供字体、字体颜色、字体边框颜色、字体尺寸等元素样式的功能按妞，具体的，获取目标可编辑元素的预设元素配置参数，并基于预设元素配置参数中的元素属性信息对元素样式控件中的默认值进行调整，并在元素样式控件中对调整后的默认值进行展示，例如，当前选中对象为“早上好”文本元素，获取文本元素的元素属性信息为“绿色字体，4号字”，则根据元素属性信息将元素样式控件中的默认值“黑色字体，5号字”调整为“绿色字体，4号字”并展示。同时，在接收到用户触发元素样式控件生成的元素调整指令后，可以基于元素调整指令对当前选择文本对象的样式进行调整；若元素调整指令为删除选中的文本元素时，在删除文本元素的同时将当前选择文本对象赋值为空；实际应用中，还可以在当前选择文本对象外设置虚线框等选中效果提示，便于用户确定是否选中了目标可编辑元素。

步骤108：基于所述可编辑画布层中的至少一个可编辑元素以及所述背景元素生成待展示图片。

其中，待展示图片是指编辑完成的图片；在可编辑画布层中完成对待编辑图片的编辑后，可以对包含背景元素以及可编辑元素的可编辑画布层进行处理(如压缩处理等)，得到编辑完成的图片。

实际应用中，基于所述可编辑画布层中的至少一个可编辑元素以及所述背景元素生成待展示图片的具体方法包括：

获取预设画布层处理规则；

根据所述预设画布层处理规则对所述至少一个可编辑元素以及所述背景元素进行处理获得待展示图片。

其中，预设画布层处理规则是指处理编辑完成后的可编辑画布层的规则，例如，将编辑完成的可编辑画布层基于URL压缩方法进行压缩得到二进制存储形式的待展示图片，再如，将编辑完成的可编辑画布层基于jpg转换规则获得jpg格式的待展示图片等等。

在本申请一具体实施方式中，以待编辑图片为视频封面图片为例，用户对视频封面图片编辑完成后，点击图片编辑控件中的导出图片按钮，触发图片导出指令；响应于图片导出指令，通过Canvas.toDataURL压缩方法将编辑完成的可编辑画布层压缩并输出base-64编码的dataURL；基于导出的dataURL为二进制的图片文件，可以需求将二进制的图片文件以JPG格式等图片格式保存到本地或上传至服务器；通过将编辑完成的可编辑画布层压缩为二进制的图片格式，便于用户在浏览器中导出不同图片格式的图片。

在本申请另一具体实施方式中，以待编辑图片为风景图片为例，用户对风景图片编辑完成后，点击图片编辑控件中的导出图片按妞，触发图片导出指令；响应于图片导出指令，根据PNG图片转换规则将编辑完成的可编辑画布层进行转换并输出PNG格式的编辑完成的风景图片。

实际应用中，为了便于用户在图片的编辑过程中，可以随时对未编辑的图片进行查看，可以另外创建以待编辑图片为背景元素的对比画布层，具体方法包括：

响应于所述图片上传指令创建对比画布层。

具体的，在创建可编辑画布层后，可根据创建可编辑画布层的画布层尺寸信息创建对比画布层，并将对比画布层的画布层属性设置为不可编辑属性，例如，如图4所示，图4是本申请一实施例提供的一种对比画布层的示意图，在可编辑画布层之上创建与可编辑画布层大小一致的对比画布层，通过css的display属性将对比画布层设置为默认不展示以及不可编辑，在用户点击对比按钮后，才可对对比画布层进行展示。

根据所述待编辑图片创建所述可编辑画布层的背景元素之后，还包括：

根据所述待编辑图片创建所述对比画布层的对比背景元素。

具体的，在创建可编辑画布层的背景元素后，可以为对比画布层创建背景元素，以使对比画布层可以对待编辑图片进行展示，用户在对待编辑图片进行编辑的过程中，可点击图片编辑控件中的对比原图按钮，触发对比画布层展示指令，响应于对比画布层展示指令，即可对对比画布层进行展示。

通过创建不可编辑的对比画布层，使用户对上传的待编辑图片进行复杂编辑操作后，可以将编辑后的可编辑画布层与对比画布层进行对比，即将编辑后的图片效果与原图进行对比，从而直观的查看编辑效果。

本申请提供的图片编辑方法，实现了根据图片上传指令确定待编辑图片并创建可编辑画布层，根据待编辑图片创建画布的背景元素，便于后续用户在以待编辑图片为背景的画布层中对进行图的片编辑操作；基于对待编辑图片的图片编辑指令创建可编辑元素，便于后续基于画布中的可编辑元素以及背景元素获得编辑完成的图片；本申请通过将图片作为背景元素添加至画布中，使用户在画布中调整可编辑元素即可，在编辑图片时仅对当前可编辑元素进行渲染并展示即可，从而避免了编辑操作中易发生的卡顿现象，提高了图片编辑效率以及用户体验。

下述结合附图5，以本申请提供的图片方法在视频封面图片的应用为例，对所述图片编辑方法进行进一步说明。其中，图5示出了本申请一实施例提供的一种应用于视频封面图片的图片编辑方法的处理流程图，具体包括以下步骤：

步骤502：接收视频封面图片编辑开始指令，并响应于视频封面图片编辑开始指令展示预设的视频封面图片编辑控件。

具体的，用户点击视频封面编辑按钮生成图片编辑开始指令，响应于图片编辑开始指令对预设的视频封面图片编辑控件进行展示。

步骤504：接收视频封面图片上传指令，并响应于视频封面图片上传指令获取待编辑的视频封面图片以及创建可编辑画布层。

具体的，用户点击视频封面图片编辑控件中的图片上传按钮并选择待编辑的视频封面图片，生成图片上传指令；基于图片上传指令中的视频封面图片路径信息获取待编辑的视频封面图片；获取预设的画布层尺寸信息，并基于画布层尺寸信息创建可编辑画布层。

步骤506：根据所述待编辑的视频封面图片创建所述可编辑画布层的视频封面图片背景元素。

具体的，获取待编辑的视频封面图片的图片长度信息和图片宽度信息以及获取可编辑画布层的画布层长度信息和画布层宽度信息；根据视频封面图片创建与可编辑画布层尺寸信息一致的视频封面图片背景元素以及背景元素图层，并根据预设背景元素位置信息，将待编辑图片在可编辑画布层的背景元素图层中完全展示。

步骤508：接收针对所述待编辑的视频封面图片的视频封面图片编辑指令，并基于所述视频封面图片编辑指令在所述可编辑画布层中创建可编辑文本元素。

具体的，用户点击视频封面图片编辑控件中的添加按钮，并输入添加文字“上午”，生成视频封面图片编辑指令；响应于视频封面图片编辑指令，创建文本元素图层，并根据文字“上午”以及为文字设定的元素标识“2”创建初始可编辑文本元素；获取预设元素配置参数中的元素属性信息“字体：宋体，字体颜色：黑色”，根据元素属性信息对文字“上午”进行调整，获得可编辑文本元素；基于预设元素配置参数中的元素位置信息在可编辑画布层的文本元素图层中创建调整后的可编辑文本元素。

步骤510：接收元素编辑指令，并基于元素编辑指令确定可编辑文本元素。

具体的，根据用户点击可编辑画布层中的位置信息以及可编辑画布层中可编辑文本元素的位置信息，计算确定用户当前选择的可编辑元素为可编辑文本元素；基于用户选中可编辑文本元素，对文本样式控件进行展示，其中，文本样式控件中的默认值根据可编辑文本元素文字“上午”的元素属性信息进行了调整并展示；用户在文本样式控件中触发文字字体“楷体”按钮，生成元素编辑指令，并响应于元素编辑指令将可编辑文本元素文字“上午”的字体修改为“楷体”。

步骤512：基于所述可编辑画布层中可编辑文本元素以及视频封面背景元素生成待展示视频封面图片。

具体的，用户点击视频封面图片编辑控件中的导出按钮，生成图片导出指令；响应于图片导出指令，触发压缩方法对可编辑画布层中可编辑文本元素以及视频封面背景元素进行压缩，获得待展示视频封面图片；用户可将待展示视频封面图片上传至服务器或下载至本地进行存储。

本实施例中的图片编辑方法，实现了根据视频封面图片图片上传指令确定待编辑的视频封面图片并创建可编辑画布层，根据待编辑的视频封面图片创建可编辑画布层的视频封面图片背景元素，便于后续用户在以视频封面图片为背景的画布层中对进行视频封面图片进行编辑操作；基于对待编辑的视频封面图片的图片编辑指令创建可编辑元素，便于后续基于画布中的可编辑元素以及背景元素获得编辑完成的图片；通过将待编辑的视频封面图片作为背景元素添加至画布层中，使用户在画布层中绘制可编辑元素即可，在编辑图片时仅对当前可编辑元素进行渲染并展示，从而避免了编辑操作中易发生的卡顿现象，提高了图片编辑效率以及用户体验。

与上述方法实施例相对应，本申请还提供了图片编辑装置实施例，图6示出了本申请一实施例提供的一种图片编辑装置的结构示意图。如图6所示，该装置包括：

第一接收模块602，被配置为获取待编辑图片并创建可编辑画布层；

创建模块604，被配置为根据所述待编辑图片创建所述可编辑画布层的背景元素；

第二接收模块606，被配置为接收针对所述待编辑图片的图片编辑指令，并基于所述图片编辑指令在所述可编辑画布层中创建至少一个可编辑元素；

生成模块608，被配置为基于所述可编辑画布层中的至少一个可编辑元素以及所述背景元素生成待展示图片。

在本申请一具体实施例中，所述创建模块604，进一步被配置为：

根据所述待编辑图片确定背景元素，并在所述可编辑画布层中创建第一图层；

将所述背景元素加载至所述第一图层。

可选地，所述第二接收模块606，进一步被配置为：

根据所述图片编辑指令确定至少一个可编辑元素，并在所述可编辑画布层中创建至少一个第二图层；

将所述可编辑元素加载至对应的所述第二图层。

可选地，所述第一接收模块602，进一步被配置为：

确定所述图片上传指令中的图片路径信息；

基于所述图片路径信息获取待编辑图片。

可选地，所述第一接收模块602，进一步被配置为：

获取预设的画布层尺寸信息；

基于所述画布层尺寸信息创建可编辑画布层。

可选地，所述创建模块604，进一步被配置为：

获取所述待编辑图片的图片尺寸信息以及所述可编辑画布层的画布层尺寸信息；

基于所述图片尺寸信息以及所述画布层尺寸信息计算图片缩放比值；

基于所述图片缩放比值、所述待编辑图片以及预设背景元素位置信息创建所述可编辑画布层的背景元素。

可选地，所述装置，还包括展示模块，所述展示模块被配置为：

展示预设图片编辑控件；

基于对所述预设图片编辑控件的操作触发图片上传指令。

可选地，所述第二接收模块606，进一步被配置为：

确定所述图片编辑指令中的编辑内容信息，基于所述编辑内容信息生成初始可编辑元素；

根据预设元素配置参数和所述初始可编辑元素生成可编辑元素。

可选地，所述第二接收模块606，进一步被配置为：

获取预设元素配置参数，并确定所述预设元素配置参数中的元素属性信息；

基于所述元素属性信息处理所述初始可编辑元素获得可编辑元素。

可选地，所述装置还包括获取模块，所述获取模块被配置为：

获取所述背景元素的背景元素特征信息；

基于所述背景元素特征信息和预设元素配置参数分析算法生成推荐元素配置参数。

可选地，所述装置还包括接收子模块，所述接收子模块被配置为：

接收元素编辑指令，并基于所述元素编辑指令在所述至少一个可编辑元素中确定目标可编辑元素；

基于所述元素编辑指令对所述目标可编辑元素进行调整。

可选地，所述接收子模块，进一步被配置为：

基于所述元素编辑指令确定触发位置信息；

确定与所述触发位置信息存在重叠的所述可编辑元素的位置信息，并将所述可编辑元素作为目标可编辑元素。

可选地，所述生成模块608，进一步被配置为：

获取预设画布层处理规则；

根据所述预设画布层处理规则对所述至少一个可编辑元素以及所述背景元素进行处理获得待展示图片。

可选地，所述装置还包括创建子模块，所述创建子模块被配置为：

响应于所述图片上传指令创建对比画布层。

可选地，所述对比画布层的画布层属性为不可编辑属性。

可选地，所述创建子模块，进一步被配置为：

根据所述待编辑图片创建所述对比画布层的对比背景元素。

可选地，所述装置还包括添加子模块，所述添加子模块被配置为：

接收点击事件添加指令，为所述可编辑画布层添加点击事件。

本申请的图片编辑装置，第一接收模块，获取待编辑图片并创建可编辑画布层；创建模块，根据所述待编辑图片创建所述可编辑画布层的背景元素；第二接收模块，接收针对所述待编辑图片的图片编辑指令，并基于所述图片编辑指令在所述可编辑画布层中创建至少一个可编辑元素；生成模块，基于所述可编辑画布层中的至少一个可编辑元素以及所述背景元素生成待展示图片。本申请的图片编辑装置通过将图片作为背景元素添加至画布层中，使用户在画布层中调整可编辑元素即可，在编辑图片时仅对当前可编辑元素进行渲染并展示，从而避免了编辑操作中易发生的卡顿现象，提高了图片编辑效率以及用户体验。

上述为本实施例的一种图片编辑装置的示意性方案。需要说明的是，该图片编辑装置的技术方案与上述的图片编辑方法的技术方案属于同一构思，图片编辑装置的技术方案未详细描述的细节内容，均可以参见上述图片编辑方法的技术方案的描述。

图7示出了根据本申请一实施例提供的一种计算设备700的结构框图。该计算设备700的部件包括但不限于存储器710和处理器720。处理器720与存储器710通过总线730相连接，数据库750用于保存数据。

计算设备700还包括接入设备740，接入设备740使得计算设备700能够经由一个或多个网络760通信。这些网络的示例包括公用交换电话网(PSTN)、局域网(LAN)、广域网(WAN)、个域网(PAN)或诸如因特网的通信网络的组合。接入设备740可以包括有线或无线的任何类型的网络接口(例如，网络接口卡(NIC))中的一个或多个，诸如IEEE802.11无线局域网(WLAN)无线接口、全球微波互联接入(Wi-MAX)接口、以太网接口、通用串行总线(USB)接口、蜂窝网络接口、蓝牙接口、近场通信(NFC)接口，等等。

在本申请的一个实施例中，计算设备700的上述部件以及图7中未示出的其他部件也可以彼此相连接，例如通过总线。应当理解，图7所示的计算设备结构框图仅仅是出于示例的目的，而不是对本申请范围的限制。本领域技术人员可以根据需要，增添或替换其他部件。

计算设备700可以是任何类型的静止或移动计算设备，包括移动计算机或移动计算设备(例如，平板计算机、个人数字助理、膝上型计算机、笔记本计算机、上网本等)、移动电话(例如，智能手机)、可佩戴的计算设备(例如，智能手表、智能眼镜等)或其他类型的移动设备，或者诸如台式计算机或PC的静止计算设备。计算设备700还可以是移动式或静止式的服务器。

其中，处理器720执行所述计算机指令时实现所述的图片编辑方法的步骤。

上述为本实施例的一种计算设备的示意性方案。需要说明的是，该计算设备的技术方案与上述的图片编辑方法的技术方案属于同一构思，计算设备的技术方案未详细描述的细节内容，均可以参见上述图片编辑方法的技术方案的描述。

本申请一实施例还提供一种计算机可读存储介质，其存储有计算机指令，该计算机指令被处理器执行时实现如前所述图片编辑方法的步骤。

上述为本实施例的一种计算机可读存储介质的示意性方案。需要说明的是，该存储介质的技术方案与上述的图片编辑方法的技术方案属于同一构思，存储介质的技术方案未详细描述的细节内容，均可以参见上述图片编辑方法的技术方案的描述。

上述对本申请特定实施例进行了描述。其它实施例在所附权利要求书的范围内。在一些情况下，在权利要求书中记载的动作或步骤可以按照不同于实施例中的顺序来执行并且仍然可以实现期望的结果。另外，在附图中描绘的过程不一定要求示出的特定顺序或者连续顺序才能实现期望的结果。在某些实施方式中，多任务处理和并行处理也是可以的或者可能是有利的。

所述计算机指令包括计算机程序代码，所述计算机程序代码可以为源代码形式、对象代码形式、可执行文件或某些中间形式等。所述计算机可读介质可以包括：能够携带所述计算机程序代码的任何实体或装置、记录介质、U盘、移动硬盘、磁碟、光盘、计算机存储器、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、电载波信号、电信信号以及软件分发介质等。需要说明的是，所述计算机可读介质包含的内容可以根据司法管辖区内立法和专利实践的要求进行适当的增减，例如在某些司法管辖区，根据立法和专利实践，计算机可读介质不包括电载波信号和电信信号。

需要说明的是，对于前述的各方法实施例，为了简便描述，故将其都表述为一系列的动作组合，但是本领域技术人员应该知悉，本申请并不受所描述的动作顺序的限制，因为依据本申请，某些步骤可以采用其它顺序或者同时进行。其次，本领域技术人员也应该知悉，说明书中所描述的实施例均属于优选实施例，所涉及的动作和模块并不一定都是本申请所必须的。

在上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见其它实施例的相关描述。

以上公开的本申请优选实施例只是用于帮助阐述本申请。可选实施例并没有详尽叙述所有的细节，也不限制该发明仅为所述的具体实施方式。显然，根据本申请的内容，可作很多的修改和变化。本申请选取并具体描述这些实施例，是为了更好地解释本申请的原理和实际应用，从而使所属技术领域技术人员能很好地理解和利用本申请。本申请仅受权利要求书及其全部范围和等效物的限制。

Claims (20)

1.一种图片编辑方法，其特征在于，应用于浏览器，包括：

获取待编辑图片并创建可编辑画布层；

根据所述待编辑图片创建所述可编辑画布层的背景元素；

接收针对所述待编辑图片的图片编辑指令，并基于所述图片编辑指令在所述可编辑画布层中创建至少一个可编辑元素；

基于所述可编辑画布层中的至少一个可编辑元素以及所述背景元素生成待展示图片。

2.如权利要求1所述的图片编辑方法，其特征在于，根据所述待编辑图片创建所述可编辑画布层的背景元素，包括：

根据所述待编辑图片确定背景元素，并在所述可编辑画布层中创建第一图层；

将所述背景元素加载至所述第一图层。

3.如权利要求1所述的图片编辑方法，其特征在于，基于所述图片编辑指令在所述可编辑画布层中创建至少一个可编辑元素，包括：

根据所述图片编辑指令确定至少一个可编辑元素，并在所述可编辑画布层中创建至少一个第二图层；

将所述可编辑元素加载至对应的所述第二图层。

4.如权利要求1所述的图片编辑方法，其特征在于，响应于所述图片上传指令获取待编辑图片，包括：

确定所述图片上传指令中的图片路径信息；

基于所述图片路径信息获取待编辑图片。

5.如权利要求1所述的图片编辑方法，其特征在于，响应于所述图片上传指令创建可编辑画布层，包括：

获取预设的画布层尺寸信息；

基于所述画布层尺寸信息创建可编辑画布层。

6.如权利要求1所述的图片编辑方法，其特征在于，根据所述待编辑图片创建所述可编辑画布层的背景元素，包括：

获取所述待编辑图片的图片尺寸信息以及所述可编辑画布层的画布层尺寸信息；

基于所述图片尺寸信息以及所述画布层尺寸信息计算图片缩放比值；

基于所述图片缩放比值、所述待编辑图片以及预设背景元素位置信息创建所述可编辑画布层的背景元素。

7.如权利要求1所述的图片编辑方法，其特征在于，接收图片上传指令之前，还包括：

展示预设图片编辑控件；

基于对所述预设图片编辑控件的操作触发图片上传指令。

8.如权利要求1所述的图片编辑方法，其特征在于，基于所述图片编辑指令在所述可编辑画布层中创建至少一个可编辑元素，包括：

确定所述图片编辑指令中的编辑内容信息，基于所述编辑内容信息生成初始可编辑元素；

根据预设元素配置参数和所述初始可编辑元素生成可编辑元素。

9.如权利要求8所述的图片编辑方法，其特征在于，根据预设元素配置参数和所述初始可编辑元素生成可编辑元素，包括：

获取预设元素配置参数，并确定所述预设元素配置参数中的元素属性信息；

基于所述元素属性信息处理所述初始可编辑元素获得可编辑元素。

10.如权利要求1所述的图片编辑方法，其特征在于，所述方法还包括：

获取所述背景元素的背景元素特征信息；

基于所述背景元素特征信息和预设元素配置参数分析算法生成推荐元素配置参数。

11.如权利要求1所述的图片编辑方法，其特征在于，在基于所述图片编辑指令在所述可编辑画布层中创建至少一个可编辑元素之后，还包括：

接收元素编辑指令，并基于所述元素编辑指令在所述至少一个可编辑元素中确定目标可编辑元素；

基于所述元素编辑指令对所述目标可编辑元素进行调整。

12.如权利要求11所述的图片编辑方法，其特征在于，基于所述元素编辑指令在所述至少一个可编辑元素中确定目标可编辑元素，包括：

基于所述元素编辑指令确定触发位置信息；

确定与所述触发位置信息存在重叠的所述可编辑元素的位置信息，并将所述可编辑元素作为目标可编辑元素。

13.如权利要求1-12任意一项所述的图片编辑方法，其特征在于，基于所述可编辑画布层中的至少一个可编辑元素以及所述背景元素生成待展示图片，包括：

获取预设画布层处理规则；

根据所述预设画布层处理规则对所述至少一个可编辑元素以及所述背景元素进行处理获得待展示图片。

14.如权利要求1所述的图片编辑方法，其特征在于，响应于所述图片上传指令创建可编辑画布层之后，还包括：

响应于所述图片上传指令创建对比画布层。

15.如权利要求14所述的图片编辑方法，其特征在于，所述对比画布层的画布层属性为不可编辑属性。

16.如权利要求14所述的图片编辑方法，其特征在于，根据所述待编辑图片创建所述可编辑画布层的背景元素之后，还包括：

根据所述待编辑图片创建所述对比画布层的对比背景元素。

17.如权利要求1所述的图片编辑方法，其特征在于，创建可编辑画布层之后，还包括：

接收点击事件添加指令，为所述可编辑画布层添加点击事件。

18.一种图片编辑装置，其特征在于，包括：

第一接收模块，被配置为获取待编辑图片并创建可编辑画布层；

创建模块，被配置为根据所述待编辑图片创建所述可编辑画布层的背景元素；

第二接收模块，被配置为接收针对所述待编辑图片的图片编辑指令，并基于所述图片编辑指令在所述可编辑画布层中创建至少一个可编辑元素；

生成模块，被配置为基于所述可编辑画布层中的至少一个可编辑元素以及所述背景元素生成待展示图片。

19.一种计算设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机指令，其特征在于，所述处理器执行所述计算机指令时实现权利要求1-17任意一项所述方法的步骤。

20.一种计算机可读存储介质，其存储有计算机指令，其特征在于，该计算机指令被处理器执行时实现权利要求1-17任意一项所述方法的步骤。

Images