CN114357345A - 图片处理方法、装置、电子设备及计算机可读存储介质 - Google Patents

Abstract

本申请属于计算机技术领域，尤其涉及一种图片处理方法、装置、电子设备及计算机可读存储介。所述方法包括：获取待处理的目标图片，并根据所述目标图片生成矢量图形元素；接收用户基于所述矢量图形元素触发的框选事件，并基于所述框选事件生成矢量图形子元素；基于所述矢量图形子元素，确定所述目标图片中与所述框选事件对应的框选区域，并对所述框选区域进行标注，得到所述框选区域对应的响应区域。在本申请中，通过针对目标图片生成矢量图形元素，以及基于框选事件生成矢量图形子元素，基于矢量图形子元素确定框选区域，可以实现对图片上不同区域的标注与区分响应，无需重新渲染整张图片，提高了网页图片可交互的多样性。

Description

图片处理方法、装置、电子设备及计算机可读存储介质

技术领域

本申请属于计算机技术领域，尤其涉及一种图片处理方法、装置、电子设备及计算机可读存储介质。

背景技术

目前，针对网页上的图片，一般点击图片的任何一个位置都是触发相同的动作，并且在需要对图片进行修改时，需要重新渲染整个图片；从而在一些特定的应用场景，存在交互上的局限性，无法满足交互需求的多样性。

发明内容

有鉴于此，本申请实施例提供了一种图片处理方法、装置、电子设备及计算机可读存储介质，可以提高网页图片交互的多样性。

本申请实施例的第一方面提供了一种图片处理方法，可以包括：

获取待处理的目标图片，并根据所述目标图片生成矢量图形元素；

接收用户基于所述矢量图形元素触发的框选事件，并基于所述框选事件生成矢量图形子元素；

基于所述矢量图形子元素，确定所述目标图片中与所述框选事件对应的框选区域，并对所述框选区域进行标注，得到所述框选区域对应的响应区域。

在第一方面的一种具体实现方式中，在所述接收用户基于所述矢量图形元素触发的框选事件之前，所述方法还包括：

接收用户输入的新增指令，并基于所述新增指令生成属性控件；

接收用户基于所述属性控件输入的标识信息，并基于所述标识信息生成所述框选区域对应的区域名称或跳转对象标识。

在第一方面的一种具体实现方式中，所述框选事件包括选中事件、移动事件和结束事件；

所述接收用户基于所述矢量图形元素触发的框选事件，并基于所述框选事件生成矢量图形子元素，包括：

监控所述选中事件，确定所述选中事件触发的位置相对于所述目标图片中参考点的初始位置坐标；

监控所述移动事件，确定所述移动事件触发的位置相对于所述参考点的移动位置坐标，并根据所述初始位置坐标和移动位置坐标计算移动距离；

监控所述结束事件，确定所述结束事件触发的位置相对于所述参考点的终点位置坐标；

根据所述初始位置坐标、所述终点位置坐标或者所述初始位置坐标、所述移动距离或者所述移动距离、终点位置坐标，生成所述矢量图形子元素。

在第一方面的一种具体实现方式中，所述基于所述矢量图形子元素，确定所述目标图片中与所述框选事件对应的框选区域，包括：

根据所述矢量图形子元素对应的初始位置坐标、所述移动距离和所述终点位置坐标，确定所述目标图片中的所述框选区域。

在第一方面的一种具体实现方式中，所述对所述框选区域进行标注，得到所述框选区域对应的响应区域，包括：

基于所述矢量图形子元素的标签，在所述矢量图形子元素中嵌入超文本标记语言元素；

基于所述超文本标记语言元素对所述框选区域进行标注，得到所述响应区域。

在第一方面的一种具体实现方式中，在所述对所述框选区域进行标注之后，所述方法还包括：

获取所述响应区域的属性信息，并根据所述属性信息生成分区图层元素；

将所述分区图层元素绑定响应事件，所述响应事件用于基于用户在响应区域触发的动作输出响应信息。

在第一方面的一种具体实现方式中，所述矢量图形元素为覆盖在所述目标图片上并与所述目标图片的大小相同的透明画布。

本申请实施例的第二方面提供了一种图片处理装置，可以包括：

获取单元，用于获取待处理的目标图片，并根据所述目标图片生成矢量图形元素；

处理单元，用于接收用户基于所述矢量图形元素触发的框选事件，并基于所述框选事件生成矢量图形子元素；

标注单元，用于基于所述矢量图形子元素，确定所述目标图片中与所述框选事件对应的框选区域，并对所述框选区域进行标注，得到所述框选区域对应的响应区域。

在第二方面的一种具体实现方式中，所述装置还可以包括：

新增单元，用于接收用户输入的新增指令，并基于所述新增指令生成属性控件；

标识生成单元，用于接收用户基于所述属性控件输入的标识信息，并基于所述标识信息生成所述框选区域对应的区域名称或跳转对象标识。

在第二方面的一种具体实现方式中，所述框选事件包括选中事件、移动事件和结束事件；所述处理单元还可以包括：

监控模块，用于监控所述选中事件，确定所述选中事件触发的位置相对于所述目标图片中参考点的初始位置坐标；监控所述移动事件，确定所述移动事件触发的位置相对于所述参考点的移动位置坐标，并根据所述初始位置坐标和移动位置坐标计算移动距离；监控所述结束事件，确定所述结束事件触发的位置相对于所述参考点的终点位置坐标；

生成模块，用于根据所述初始位置坐标、所述终点位置坐标或者所述初始位置坐标、所述移动距离或者所述移动距离、终点位置坐标，生成所述矢量图形子元素。

在第二方面的一种具体实现方式中，所述处理单元，还可以用于根据所述矢量图形子元素对应的初始位置坐标、所述移动距离和所述终点位置坐标，确定所述目标图片中的所述框选区域。

在第二方面的一种具体实现方式中，所述标注单元还可以包括：

嵌入模块，用于基于所述矢量图形子元素的标签，在所述矢量图形子元素中嵌入超文本标记语言元素；

标注模块，用于基于所述超文本标记语言元素对所述框选区域进行标注，得到所述响应区域。

在第二方面的一种具体实现方式中，所述装置还可以包括：

新增图层单元，用于获取所述响应区域的属性信息，并根据所述属性信息生成分区图层元素；

绑定单元，用于将所述分区图层元素绑定响应事件，所述响应事件用于基于用户在响应区域触发的动作输出响应信息。

在第二方面的一种具体实现方式中，所述矢量图形元素为覆盖在所述目标图片上并与所述目标图片的大小相同的透明画布。

本申请实施例的第三方面提供了一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序被处理器执行时实现上述任一种图片处理方法的步骤。

本申请实施例的第四方面提供了一种电子设备，包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述任一种图片处理方法的步骤。

本申请实施例的第五方面提供了一种计算机程序产品，当计算机程序产品在电子设备上运行时，使得电子设备执行上述任一种图片处理方法的步骤。

本申请实施例与现有技术相比存在的有益效果是：通过针对目标图片生成矢量图形元素，以及基于框选事件生成矢量图形子元素，基于矢量图形子元素确定框选区域，可以实现对图片上不同区域的标注，从而可以区分出图片的不同区域，并可以实现图片中不同区域的分区响应，无需重新渲染整张图片，提高了网页图片可交互的多样性；满足了多样性的交互需求，具有较强的易用性与实用性。

附图说明

为了更清楚地说明本申请实施例中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其它的附图。

图1为本申请实施例提供的图片处理方法的实现流程示意图；

图2～图7为图片处理方法的界面示意图；

图8为本申请实施例提供的图片处理装置的结构图；

图9为本申请实施例提供的电子设备的示意框图。

具体实施方式

为使得本申请的发明目的、特征、优点能够更加的明显和易懂，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，下面所描述的实施例仅仅是本申请一部分实施例，而非全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其它实施例，都属于本申请保护的范围。

应当理解，当在本说明书和所附权利要求书中使用时，术语“包括”指示所描述特征、整体、步骤、操作、元素和/或组件的存在，但并不排除一个或多个其它特征、整体、步骤、操作、元素、组件和/或其集合的存在或添加。

还应当理解，在此本申请说明书中所使用的术语仅仅是出于描述特定实施例的目的而并不意在限制本申请。如在本申请说明书和所附权利要求书中所使用的那样，除非上下文清楚地指明其它情况，否则单数形式的“一”、“一个”及“该”意在包括复数形式。

还应当进一步理解，在本申请说明书和所附权利要求书中使用的术语“和/或”是指相关联列出的项中的一个或多个的任何组合以及所有可能组合，并且包括这些组合。

如在本说明书和所附权利要求书中所使用的那样，术语“如果”可以依据上下文被解释为“当...时”或“一旦”或“响应于确定”或“响应于检测到”。类似地，短语“如果确定”或“如果检测到[所描述条件或事件]”可以依据上下文被解释为意指“一旦确定”或“响应于确定”或“一旦检测到[所描述条件或事件]”或“响应于检测到[所描述条件或事件]”。

另外，在本申请的描述中，术语“第一”、“第二”、“第三”等仅用于区分描述，而不能理解为指示或暗示相对重要性。

为叙述简便起见，首先对本申请实施例中可能设计到专业名词进行解释说明：

1、超文本标记语言(Hyper Text Markup Language，HTML)，是一种标记语言，通过HTML命令可以说明文字，图形、动画、声音、表格、链接等；

2、可伸缩矢量图形(Scalable Vector Graphics，SVG)，是使用XML格式描述二维图形和绘图程序的语言，用于定义网络的基于矢量的图形；

3、画布(Canvas)，支持通过脚本(通常是JavaScript语言)绘制图形的元素，实现在网页中完成动态的2D与3D图像；

4、区隔标记或分区图层(division，DIV)，可以用作布局工具，基于层叠样式表(Cascading Style Sheets，CSS)进行定位。

HTML5是构建网页内容的一种语言描述方式，是网页核心语言HTML的规范。Canvas是HTML5新增的元素，用于通过使用JavaScript中的脚本来绘制图形，制作图片，创建动画。然而，Canvas作为一个画布，在需要修改画布上的内容的时候，需要重新对该画布进行渲染。而且，目前针对网页中的一张图片，点击图片的任何一个位置都是触发相同的响应，无法实现对图片中不同区域的区分；针对一些特定的应用场景，基于传统的Canvas元素的实现方式，则存在修改过程繁琐、操作不便以及无法实现业务需求等缺陷。

鉴于上述可能存在的缺陷，本申请实施例针对点击同一张图片不同的位置，可以展示不同的交互效果的应用场景，提出了一种基于SVG元素的图片处理方法，实现对图片进行区域区分及标注，进而可以实现一张图片中多个位置触发不同的响应；提高网页图片的交互的多样性，满足不同应用场景的业务需求。

下面通过具体的实施过程，对本申请中的实施例提供的图片处理方法进行介绍。

请参阅图1，本申请实施例实施例提供的图片处理方法的实现流程示意图，该图片处理方法可以包括：

步骤S101、电子设备获取待处理的目标图片，并根据该目标图片生成矢量图形元素。

示例性的，电子设备通过加载并上传图片，获取待处理的目标图片，该目标图片可以是一些应用场景中的网页图片，例如小程序、公众号或网站、应用程序等前端网页中的图片。

如图2所示的图片处理方法的界面示意图，该界面上包括上传图片的控件“图片文件”，电子设备接收用户通过点击该控件输入的触发信号，可以加载本地图片并上传到该网页中；如图2所示，该界面还包括替换图片的控件“点击替换”，电子设备接收用户通过点击该控件输入的触发信号，可以对已上传的图片进行替换。上传的图片格式可以包括JPG、PNG和GIF等格式，上传图片后，可以显示该图片的原始名称“cody-davis.jpg”。

需要说明的是，该界面仅示例性说明，并不对本申请实施例进行限定，例如上传图片的大小的示例，可以不仅限于100兆以内，也可以是其他大小的图片；又如上传图片的格式等，并不仅限于图示中的格式，还可以是其他网页支持格式的图片；以及该界面上所设置的控件的形式，也不仅限于图示中的设计方式，还可以是其他图标表示的控件，可以实现本申请实施例中功能的控件以及界面均在本申请实施例的保护范围之内。

示例性的，矢量图形元素为覆盖在目标图片上并与目标图片的大小相同的透明画布。

示例性的，电子设备接收用户输入的代码，经过浏览器渲染后，生成与目标图片大小相同的透明画布，作为该目标图片页面上的一个矢量图形SVG图块元素。

需要说明的是，本申请实施例是通过在目标图片上增加了SVG元素，并将SVG元素覆盖在目标图片上，并非是通过SVG而加载的图层；由于图层的信息需要手动请求后台接口返回数据，根据返回数据再生成相应的元素，不便于前端的直接操作，与本申请实施例中的直接先新增一个透明的与目标图片大小相同的SVG元素的实现方式是不同的。

在一些实施例中，在电子设备接收用户基于矢量图形元素触发的框选事件之前，该方法还包括：

电子设备接收用户输入的新增指令，并基于该新增指令生成属性控件；电子设备接收用户基于该属性控件输入的标识信息，并基于该标识信息生成框选区域对应的区域名称或跳转对象标识。

示例性的，如图2所示，方框内的“+”表示新增控件，电子设备在接收到用户点击该新增控件的触发信号时，生成方框上面显示的属性控件，例如“请输入区域名称”的控件和“请选择跳转标识ID”的控件。电子设备可以接收用户基于该属性控件输入的标识信息，如图3所示，电子设备接收用户通过“请输入区域名称”控件输入的区域名称(如123)，或者通过“请选择跳转标识ID”控件输入的跳转对象标识(如10001)。

示例性的，该界面上，在属性控件旁边还包括删除控件和画图控件，通过删除控件可以对图片中的框选出的局部区域进行删除，从而修改目标图片中划分的区域范围。

需要说明的是，该区域名称为待划分出的区域对应的名称，跳转对象标识为该待划分出的区域对应的响应事件的标识或链接；该响应事件的标识或链接可以在划分出待标注的区域之前接收到用户输入的信息，也可以在划分出标注的区域之后接收到用户输入的信息。其中，待划分出的区域可以通过删除控件旁边的画图控件实现区域划分而得到；例如，电子设备接收用户通过点击该画图控件输入的触发指令，监控用户通过鼠标点击目标图片上矢量图形SVG元素触发的信号，可以得到划分出的区域。

步骤S102、电子设备接收用户基于该矢量图形元素触发的框选事件，并基于该框选事件生成矢量图形子元素。

示例性的，该框选事件可以是用户基于鼠标或者触控笔在显示该目标图片的界面上操作所触发的，还可以是用户通过触摸该目标图片的界面所触发的事件。该框选事件为基于矢量图形元素触发的且与目标图片中的局部区域相对应。电子设备响应该框选事件，基于矢量图形元素生成新的矢量图形子元素，通过该矢量图形子元素标识目标图片中被划分出来的区域。

其中，该矢量图形子元素可以是透明或半透明状态，具体表现形式可以根据需要进行设置，不做具体限定。

需要说明的是，新生成的矢量图形子元素并不是通过SVG加载的图层，是通过前端对框选事件直接响应生成的。

在一些实施例中，框选事件包括选中事件、移动事件和结束事件；电子设备接收用户基于该矢量图形元素触发的框选事件，并基于该框选事件生成矢量图形子元素，包括：

电子设备监控选中事件，确定所述选中事件触发的位置相对于目标图片中参考点的初始位置坐标；电子设备监控移动事件，确定所述移动事件触发的位置相对于所述参考点的移动位置坐标，并根据初始位置坐标和移动位置坐标计算移动距离；电子设备监控结束事件，确定所述结束事件触发的位置相对于参考点的终点位置坐标；电子设备根据初始位置坐标、终点位置坐标，或者初始位置坐标、移动距离，或者移动距离、终点位置坐标，生成矢量图形子元素。

示例性的，该框选事件可以是用户基于鼠标或者触控笔在显示该目标图片的界面上操作所触发的，还可以是用户通过触摸该目标图片的界面所触发的事件。例如电子设备可以接收用户基于鼠标、触控笔或者触摸操作在显示该目标图片的界面上输入的触发信号。参考点可以目标图片的任一个顶点，将该参考点作为坐标系原点，例如该参考点可以是目标图片的左上角顶点。

示例性的，选中事件可以是用户在目标图片界面上通过鼠标点击、触控笔点击或者通过触摸形式点击该界面所触发的事件；移动事件可以为用户触发选中事件后，继续在点击状态在该界面上移动所触发的事件；结束事件可以是鼠标、触控笔或触摸操作结束点击或移动所触发的事件，例如电子设备检测到鼠标被松开后点击的触发信号消失、触控笔的触发信号消失或者触摸操作的触发信号消失等，将此类事件作为结束事件。

如图4所示，在属性控件旁边还包括删除控件和画图控件，电子设备在接收的用户点击该画图控件后，开始监控在目标图片的显示界面上是否有触发信号；例如用户通过点击鼠标、移动鼠标再到松开鼠标，可以在目标图片的显示界面上生成矩形边框元素，将该矩形边框元素作为矢量图形子元素。若电子设备显示目标图片的界面为可触摸界面，电子设备还可以监控触控笔或触摸操作在该显示界面的点击、移动及离开的信号，生成相应的边框元素。

示例性的，电子设备的显示界面上还包括确定控件，在监控到用户在显示目标图片的界面完成框选操作，并通过点击确定控件输入触发信号后，电子设备在显示目标图片界面显示生成的矢量图形子元素，如图5所示。

示例性的，矢量图形子元素可以是多种形状的边框元素，电子设备在接收到用户通过点击画图控件输入的触发信号时，还可以显示多种图形的选择控件，该多种图形的选择控件可以供用户选择生成不同形状的边框元素，进而通过在目标图片显示界面上点击、移动以及离开等操作触发的信号直接生成不同形状的矢量图形子元素，实现对图片中任何形状对应的区域的区分与标注，例如矩形边框元素、圆形边框元素、椭圆形边框元素以及多边形边框元素等。

示例性的，上述多种图形的选择控件中还可以包括折现或直线的图标控件，电子设备可以通过监控用户在目标图片的显示界面上触发的点击、移动、暂停、再移动(中间过程可以包括多次移动、暂停和再移动)以及离开等操作触发的信号生成相应形状的矢量图形子元素(边框元素)。在开始点击和移动操作发生过程中，电子设备会持续监控触发信号的位置坐标，从而根据位置坐标确定操作轨迹，生成相应的矢量图形子元素。

示例性的，如图6和图7所示，通过上述实现方式，电子设备可以在显示目标图片的界面对应目标图片的不同区域，生成分别对应不同区域的多个矢量图形子元素。

需要说明的是，本申请实施例对生成矢量图形子元素的形状不做具体限定，通过上述实施例仅用于说明基于在矢量图形元素基础上触发的框选事件生成矢量图形子元素的实现原理逻辑，通过选择显示界面上的画图控件，电子设备可以监控在显示目标图片的界面所触发的信号，无需后端接口接口的反馈，直接生成矢量图形子元素，对目标图片进行分区域标注。

步骤S103、电子设备基于矢量图形子元素，确定目标图片中与框选事件对应的框选区域，并对框选区域进行标注，得到框选区域对应的响应区域。

示例性的，在以目标图片的顶点为坐标原点的坐标系中，可以确定矢量图形子元素的位置坐标，基于该位置坐标，可以确定矢量图形子元素在目标图片中对应的框选区域；如图7所示，可以实现对目标图片不同区域的标注，得到框选区域对应的响应区域(如图片中对应标注出的“叶子”区域和“果实”区域)。

示例性的，在需要重新绘制并生成新的矢量图形子元素时，则相应的生成新的标注，自动删除旧的标注。针对标注里的内容，电子设备可以通过输入框接收用户的输入，例如区域名称对应的输入框。

在一些实施例中，电子设备基于矢量图形子元素，确定目标图片中与框选事件对应的框选区域，包括：

电子设备根据矢量图形子元素对应的初始位置坐标、移动距离和终点位置坐标，确定目标图片中的框选区域。

示例性的，电子设备在基于框选事件生成矢量图形子元素的过程中，可以基于产生的触发信号，确定触发信号对应的位置坐标，并可以根据位置坐标确定矢量图形子元素的相关信息，以及确定目标图片中的框选区域，例如框选区域的长度、宽度、框选区域左上角相对于图片左上角的坐标等。

示例性的，电子设备的后台数据库还可以将每次生成的矢量图形子元素的相关信息进行存储，以便于后续对框选出的区域绑定响应事件时对相关信息的查询及确认。

在一些实施例中，电子设备对所述框选区域进行标注，得到框选区域对应的响应区域，包括：

电子设备基于矢量图形子元素的标签，在所述矢量图形子元素中嵌入超文本标记语言元素；电子设备基于该超文本标记语言元素对框选区域进行标注，得到所述响应区域。

示例性的，电子设备可以接收用户使用SVG的foreignObj标签，在矢量图形子元素中嵌入一个HTML元素，对框选区域进行标注；其中，，电子设备还可以基于嵌入的HTML元素添加分区图层DIV元素或标签，该分区图层DIV元素或标签可以包括该响应区域的相关信息。

示例性的，电子设备基于基于该超文本标记语言元素对框选区域进行标注，可以将需要被点击的区域标注出来，比那与客户端的开发人员确定目标图片中可以绑定响应事件的区域。

在一些实施例中，在电子设备对所述框选区域进行标注之后，该方法还包括：

电子设备获取响应区域的属性信息，并根据属性信息生成分区图层元素；电子设备将分区图层元素绑定响应事件，响应事件用于电子设备基于用户在响应区域触发的动作输出响应信息。

示例性的，电子设备可以将目标图片的大小以及响应区域的信息保存下来，当需要在目标图片上做点击响应处理时，获取响应区域的信息，根据响应区域对应的坐标和大小，生成与之对应的透明的DIV元素，在该DIV元素上绑定响应事件，例如鼠标点击事件，实现通过用户点击图片上的不同区域，响应不同的动作，例如该动作可以是播放一段语音、弹框播放介绍视频或者页面跳转至与跳转对象标识(如10001)对应的网页。

另外，DIV元素对应一个完整的响应区域，客户端的开发者获取到该目标图片后，还可以根据标注的信息，在对应标注的区域增加一个DIV元素，根据区域信息添加不同的点击效果。

示例性的，根据标注的响应区域，通过在目标图片上对应的同样的区域添加一个透明的DIV元素，在点击图片的位置时，实际上是点击在该DIV元素上，因而对该DIV元素添加响应事件后，可以实现点击该目标图片的不同区域，输出不同的响应信息。

综上所述，针对目前图片都是不支持区域点击的，整个图片所有的区域都只能响应相同的点击事件的问题，本申请实施例通过将图片划分为任意的区域，添加独立的点击事件，使得交互更加友好，在教育产品的使用中，可以更加友好的通过点击图片上不同的区域，为用户展示不同的内容；提高了网页图片可交互的多样性，满足了用户多样性的需求。

应理解，上述实施例中各步骤的序号的大小并不意味着执行顺序的先后，各过程的执行顺序应以其功能和内在逻辑确定，而不应对本申请实施例的实施过程构成任何限定。

对应于上文实施例所述的一种图片处理方法，图8示出了本申请实施例提供的一种图片处理装置的一个实施例结构图。

本实施例中，一种图片处理装置可以包括：

获取单元81，用于获取待处理的目标图片，并根据所述目标图片生成矢量图形元素；

处理单元82，用于接收用户基于所述矢量图形元素触发的框选事件，并基于所述框选事件生成矢量图形子元素；

标注单元83，用于基于所述矢量图形子元素，确定所述目标图片中与所述框选事件对应的框选区域，并对所述框选区域进行标注，得到所述框选区域对应的响应区域。

所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的装置，模块和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

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

图9示出了本申请实施例提供的一种电子设备的示意框图，为了便于说明，仅示出了与本申请实施例相关的部分。

如图9所示，该实施例的电子设备9包括：处理器90、存储器91以及存储在所述存储器91中并可在所述处理器90上运行的计算机程序92。所述处理器90执行所述计算机程序92时实现上述各个图片处理方法实施例中的步骤，例如图1所示的S101至S103。或者，所述处理器90执行所述计算机程序92时实现上述各装置实施例中各模块/单元的功能，例如图8所示单元81至单元83的功能。

示例性的，该电子设备9可以是桌上型计算机、笔记本、掌上电脑、平板及云端服务器等计算设备。所述计算机程序92可以被分割成一个或多个模块/单元，所述一个或者多个模块/单元被存储在所述存储器91中，并由所述处理器90执行，以完成本申请。所述一个或多个模块/单元可以是能够完成特定功能的一系列计算机程序指令段，该指令段用于描述所述计算机程序92在所述电子设备9中的执行过程。

本领域技术人员可以理解，图9仅仅是电子设备9的示例，并不构成对电子设备9的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件，例如所述电子设备9还可以包括输入输出设备、网络接入设备、总线等。

所述处理器90可以是中央处理单元(Central Processing Unit，CPU)，还可以是其它通用处理器、数字信号处理器(Digital Signal Processor，DSP)、专用集成电路(Application Specific Integrated Circuit，ASIC)、现场可编程门阵列(Field-Programmable Gate Array，FPGA)或者其它可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。

所述存储器91可以是所述电子设备9的内部存储单元，例如电子设备9的硬盘或内存。所述存储器91也可以是所述电子设备9的外部存储设备，例如所述电子设备9上配备的插接式硬盘，智能存储卡(Smart Media Card，SMC)，安全数字(Secure Digital，SD)卡，闪存卡(Flash Card)等。进一步地，所述存储器91还可以既包括所述电子设备9的内部存储单元也包括外部存储设备。所述存储器91用于存储所述计算机程序以及所述电子设备9所需的其它程序和数据。所述存储器91还可以用于暂时地存储已经输出或者将要输出的数据。

所属领域的技术人员可以清楚地了解到，为了描述的方便和简洁，仅以上述各功能单元、模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能单元、模块完成，即将所述装置的内部结构划分成不同的功能单元或模块，以完成以上描述的全部或者部分功能。实施例中的各功能单元、模块可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中，上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。另外，各功能单元、模块的具体名称也只是为了便于相互区分，并不用于限制本申请的保护范围。上述系统中单元、模块的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

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

本领域普通技术人员可以意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、或者计算机软件和电子硬件的结合来实现。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本申请的范围。

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

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

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

所述集成的模块/单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读存储介质中。基于这样的理解，本申请实现上述实施例方法中的全部或部分流程，也可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一计算机可读存储介质中，该计算机程序在被处理器执行时，可实现上述各个方法实施例的步骤。其中，所述计算机程序包括计算机程序代码，所述计算机程序代码可以为源代码形式、对象代码形式、可执行文件或某些中间形式等。所述计算机可读存储介质可以包括：能够携带所述计算机程序代码的任何实体或装置、记录介质、U盘、移动硬盘、磁碟、光盘、计算机存储器、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、电载波信号、电信信号以及软件分发介质等。需要说明的是，所述计算机可读存储介质包含的内容可以根据司法管辖区内立法和专利实践的要求进行适当的增减，例如在某些司法管辖区，根据立法和专利实践，计算机可读存储介质不包括电载波信号和电信信号。

以上所述实施例仅用以说明本申请的技术方案，而非对其限制；尽管参照前述实施例对本申请进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本申请各实施例技术方案的精神和范围，均应包含在本申请的保护范围之内。

Claims (10)

1.一种图片处理方法，其特征在于，包括：

获取待处理的目标图片，并根据所述目标图片生成矢量图形元素；

接收用户基于所述矢量图形元素触发的框选事件，并基于所述框选事件生成矢量图形子元素；

基于所述矢量图形子元素，确定所述目标图片中与所述框选事件对应的框选区域，并对所述框选区域进行标注，得到所述框选区域对应的响应区域。

2.根据权利要求1所述的方法，其特征在于，在所述接收用户基于所述矢量图形元素触发的框选事件之前，所述方法还包括：

接收用户输入的新增指令，并基于所述新增指令生成属性控件；

接收用户基于所述属性控件输入的标识信息，并基于所述标识信息生成所述框选区域对应的区域名称或跳转对象标识。

3.根据权利要求1所述的方法，其特征在于，所述框选事件包括选中事件、移动事件和结束事件；

所述接收用户基于所述矢量图形元素触发的框选事件，并基于所述框选事件生成矢量图形子元素，包括：

监控所述选中事件，确定所述选中事件触发的位置相对于所述目标图片中参考点的初始位置坐标；

监控所述移动事件，确定所述移动事件触发的位置相对于所述参考点的移动位置坐标，并根据所述初始位置坐标和移动位置坐标计算移动距离；

监控所述结束事件，确定所述结束事件触发的位置相对于所述参考点的终点位置坐标；

根据所述初始位置坐标、所述终点位置坐标或者所述初始位置坐标、所述移动距离或者所述移动距离、所述终点位置坐标，生成所述矢量图形子元素。

4.根据权利要求3所述的方法，其特征在于，所述基于所述矢量图形子元素，确定所述目标图片中与所述框选事件对应的框选区域，包括：

根据所述矢量图形子元素对应的初始位置坐标、所述移动距离和所述终点位置坐标，确定所述目标图片中的所述框选区域。

5.根据权利要求1所述的方法，其特征在于，所述对所述框选区域进行标注，得到所述框选区域对应的响应区域，包括：

基于所述矢量图形子元素的标签，在所述矢量图形子元素中嵌入超文本标记语言元素；

基于所述超文本标记语言元素对所述框选区域进行标注，得到所述响应区域。

6.根据权利要求5所述的方法，其特征在于，在所述对所述框选区域进行标注之后，所述方法还包括：

获取所述响应区域的属性信息，并根据所述属性信息对所述响应区域的分区图层元素绑定响应事件，所述分区图层元素为基于所述超文本标记语言元素添加的，所述响应事件用于基于用户在响应区域触发的动作输出响应信息。

7.根据权利要求1至6中任一项所述的方法，其特征在于，所述矢量图形元素为覆盖在所述目标图片上并与所述目标图片的大小相同的透明画布。

8.一种图片处理装置，其特征在于，包括：

获取单元，用于获取待处理的目标图片，并根据所述目标图片生成矢量图形元素；

处理单元，用于接收用户基于所述矢量图形元素触发的框选事件，并基于所述框选事件生成矢量图形子元素；

标注单元，用于基于所述矢量图形子元素，确定所述目标图片中与所述框选事件对应的框选区域，并对所述框选区域进行标注，得到所述框选区域对应的响应区域。

9.一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1至7中任一项所述的方法的步骤。

10.一种电子设备，包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现如权利要求1至7中任一项所述的方法的步骤。

Images