CN110472171A - 基于插件上传图片的方法、插件系统、设备及存储介质 - Google Patents

Abstract

本发明公开了一种基于插件上传图片的方法、插件系统、设备及存储介质。本发明提供的基于插件上传图片的方法，通过配置于图片处理工具中的插件响应用户上传图片的操作以获取图片；并调用API对所述图片的图层进行解析，生成图层信息；将所述图层信息转换成json格式文件；将所述json格式文件与所述图片上传至web端服务器。从而开发人员可以直接在web端进行直观查看图片的标注信息，使其开发网页设计能够提升效率。

Description

基于插件上传图片的方法、插件系统、设备及存储介质

技术领域

本发明涉及图片处理技术领域，具体涉及一种基于插件上传图片的方法、插件系统、设备及存储介质。

背景技术

在现有技术中，网页设计是通过使用更合理的颜色、字体、图片、样式进行页面设计美化，在功能限定的情况下，尽可能给予用户完美的视觉体验。高级的网页设计甚至会考虑到通过声光、交互等来实现更好的视听感受。

传统的网页设计标注及切图方式需要通过设计软件打开设计稿进行测量，并手动切图，但是开发人员不熟悉设计软件，常常会看错或切不出想要的切图。并且开发人员手动绘制标注信息在设计稿上，手动切图并分类到不同的文件夹，需要花费大量的时间制作标注文件；因此，发明人注意到的是，若在后期网页设计稿有细微的调整，所有的标注和切图都需要利用本地设计软件进行操作，这将耗费开发人员大量的时间，再就是手动标注图片往往密密麻麻，难以直观进行查看图片的标注信息。

发明内容

本发明的主要目的是提供一种基于插件上传图片的方法、装置、系统及存储介质，以解决相关技术中网页设计无法直观查看图片的标注信息，导致网页设计效率过低的问题。

为实现上述目的，本发明提供了一种基于插件上传图片的方法，包括：配置于图片处理工具中的插件；

所述插件响应用户上传图片的操作以获取图片；

并调用API对所述图片的图层进行解析，生成图层信息；

将所述图层信息转换成json格式文件；

将所述json格式文件与所述图片上传至web端服务器。

优选地，在所述调用API对所述图片的图层进行解析之前，还包括：

采用所述插件对所述图片进行切图及标注处理；

采用所述插件基于超文本传输协议将所述切图及标注处理的所述图片传输至所述web端服务器。

优选地，所述调用API对所述图片的图层进行解析并生成图层信息包括：

根据所述API提取所述图片的多个图层属性；其中，所述图层属性中包括每个图层的位置、颜色及尺寸中至少一种；

将每一个所述图层的图层属性确定为所述图层的图层信息。

优选地，所述将所述图层信息转换成json格式文件包括：

读取所述图层信息以获取所述图层信息的初始字节码；

将所述初始字节码编成base64字节码；

将所述base64字节码转换为base64字符串并以字典格式保存所述base64字符串；

将所述字典格式的base64字符串转化为所述json格式文件。

优选地，所述将所述json格式文件与所述图片上传至web端服务器包括：

向web端服务器发送http请求；

在web端服务器响应之后获取所述web端服务器的域名；

根据所述web端服务器的域名将所述json格式文件与所述图片上传至web端服务器。

优选地，所述将所述json格式文件与所述图片上传至web端服务器之后包括：

当响应到用户查看所述图片的指令时，生成操作控件；其中，所述操作控件用于在多个图层中执行多个操作；

根据所述操作控件，响应用户选择第一图层的指令；

当所述操作控件移动至第二图层时，计算所述第二图层和第一图层中HTML元素的距离；

根据所述HTML元素的距离，将所述HTML元素的距离生成为尺寸信息以显示为可视化标识。

本发明还提供了一种插件系统，所述插件系统配置于图片处理工具中，所述插件系统包括：

响应模块，用于响应用户上传图片的操作以获取图片；

调用模块，用于调用API对所述图片的图层进行解析，生成图层信息；

转换模块，用于将所述图层信息转换成json格式文件；

上传模块，用于将所述json格式文件与所述图片上传至web端服务器。

优选地，所述调用模块包括：

提取子模块，用于根据所述API提取所述图片的多个图层属性；其中，所述图层属性中包括每个图层的位置、颜色及尺寸中至少一种；

确定子模块，用于将每一个所述图层的图层属性确定为所述图层的图层信息。

本发明还提供了一种基于插件上传图片的设备，包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现如上所述的基于插件上传图片的方法的步骤。

本发明还提供了一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序被处理器执行时实现如上所述的基于插件上传图片的方法的步骤。

本发明提供的基于插件上传图片的方法，通过配置于图片处理工具中的插件响应用户上传图片的操作以获取图片；并调用API对所述图片的图层进行解析，生成图层信息；将所述图层信息转换成json格式文件；将所述json格式文件与所述图片上传至web端服务器。从而开发人员可以直接在web端进行直观查看图片的标注信息，使其开发网页设计能够提升效率。

附图说明

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

图1是本发明实施例提供的基于插件上传图片的方法流程图；

图2是图1所示的步骤S30的具体流程图；

图3是本发明实施例提供的应用场景图；

图4是本发明实施例提供的插件系统的结构示意图；

图5是本发明实施例提供的插件系统的另一结构示意图；

图6是本发明实施例提供的基于插件上传图片的设备结构示意图。

本发明目的的实现、功能特点及优点将结合实施例，参照附图做进一步说明。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明的一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

本发明的说明书和权利要求书及上述附图中的术语“第一”、“第二”和“第三”等是用于区别不同对象，而非用于描述特定顺序。此外，术语“包括”以及它们任何变形，意图在于覆盖不排他的包含。例如包含了一系列步骤或单元的过程、方法、系统、产品或设备没有限定于已列出的步骤或单元，而是可选地还包括没有列出的步骤或单元，或可选地还包括对于这些过程、方法、产品或设备固有的其它步骤或单元。

参照图1所示，本发明提供了一种基于插件上传图片的方法，包括：配置于图片处理工具中的插件。

S10、插件响应用户上传图片的操作以获取图片。

其中，所述插件用于在所述调用API对所述图片的图层进行解析之前，对图片进行切图及标注处理，并采用所述插件基于超文本传输协议将所述切图及标注处理的所述图片传输至所述web端服务器，也就是说，用户在处理图片时，该插件可直接应用于图片处理工具中，并且能够将用户所需要的图片进行切图和标注处理，插件通过超文本传输协议与web端服务器连接，从而可以把用户所处理好的图片通过该插件直接进行上传，可选的，图片可以是用户的网页设计稿等。在本发明的实施例中，图片处理工具可以是Photoshop、Sketch，Xd等，通过在图片处理工具中配置该插件，用户可以通过该插件进行上传图片的操作以通过插件对图片进行处理。

S20、调用API对图片的图层进行解析，生成图层信息。

在本发明的实施例中，插件在响应到用户上传图片的操作时，通过调用插件的API接口对图片的图层进行解析，以确定该图片中每一图层的图层信息以供后续在web端服务器能够自动生成。

进一步的，在本发明的具体实施例中，上述步骤S20的具体实现方式包括：根据API提取图片的多个图层属性；其中，图层属性中包括每个图层的位置、颜色及尺寸中至少一种；将每一个图层的图层属性确定为该图层的图层信息。其中，通过API提取出图片中的位置、颜色、背景色，尺寸、图层名称、宽高、边距、背景、透明度、边框、阴影、字体、文本等图层属性，通过确定每一个图层的图层属性并将其作为该图层的信息，在上传至web端服务器之后则可以在web端自动生成这些图层信息以供用户查看；比如，当解析出某一图层与另一图层之间的位置时，可以将两个图层之间位置距离进行计算，从而在web端服务器中可以直接显示出。

S30、将图层信息转换成json格式文件。

参照图2所示，在本发明的具体实施例中，上述步骤S30的具体实现方式为：

S31、读取图层信息以获取图层信息的初始字节码。

S32、将初始字节码编成base64字节码。

S33、将base64字节码转换为base64字符串并以字典格式保存base64字符串。

S34、将字典格式的base64字符串转化为所述json格式文件。

其中，图片为二进制格式，通过上述解析出的图层信息获取图层信息中的初始字节码，并将该字节码编成base64字节码，编成的base64字节码需要转换为utf-8格式的base64字符串，将该字符串保存为字典格式从而将其转化为json格式的文件，在上传之后，当用户在web端服务器查看该图片时，通过读取服务器存储的json文件，可以将图片及图片的图层位置等信息通过HTML元素呈现在网页上，使得用户可以在web端服务器快速查看或编辑该图片以进行网页设计，从而提升用户效率。

S40、将json格式文件与图片上传至web端服务器。

在本发明的具体实施例中，上述步骤S40的具体实现方式为：向web端服务器发送http请求；在web端服务器响应之后获取web端服务器的域名；根据web端服务器的域名将json格式文件与图片上传至web端服务器。

其中，插件在上传图片和json格式文件时，是通过超文本传输协议进行传输的，也就是说，插件作为请求头向web端服务器发送http请求，web端服务器向插件发送其域名，并根据插件的请求头参数使得插件能够将图片和json格式文件进行上传。

参照图3所示，将json格式文件与图片上传至web端服务器之后包括：

步骤一，当web端服务器响应到用户查看图片的指令时，生成操作控件；其中，操作控件用于在多个图层中执行多个操作。

步骤二，根据操作控件，响应用户选择第一图层的指令。

步骤三，当操作控件移动至第二图层时，计算第二图层和第一图层中HTML元素的距离。

步骤四，根据HTML元素的距离，将HTML元素的距离生成为尺寸信息以显示为可视化标识。

其中，当用户在web端服务器进行查看该插件上传的图片时，用户可以通过控件点击每一个图层的位置，从而可以显示该图层对应的名称、位置、宽高、边距、背景、透明度、边框、阴影、字体、文本等图层属性，当用户点击第一图层时，则第一图层作为基准图层，将控件移动至第二图层时，由于在上传时已经对各个图层进行了图层解析，因此，可以自动将第二图层与第一图层的距离进行显示出来，其中，第一图层和第二图层为任一图层；也就是说，每个图层中都具有HTML元素，其中，HTML元素是该图片中的基本部件，在用户点击一个HTML元素，再把鼠标放在另一个HTML元素上时，可以计算两个HTML元素之间的距离并显示具有距离标识的线段。

参照图4所示，本发明还提供了一种插件系统，插件系统10配置于图片处理工具中，插件系统10包括：

响应模块101，用于响应用户上传图片的操作以获取图片；

调用模块102，用于调用API对图片的图层进行解析，生成图层信息；

转换模块103，用于将图层信息转换成json格式文件；

上传模块104，用于将json格式文件与图片上传至web端服务器。

参照图5所示，上述调用模块102包括：

提取子模块1021，用于根据API提取图片的多个图层属性；其中，图层属性中包括每个图层的位置、颜色及尺寸中至少一种；

确定子模块1022，用于将每一个图层的图层属性确定为图层的图层信息。

参照图6所示，本发明还提供了一种基于插件上传图片的设备，包括存储器201、处理器203以及存储在存储器201中并可在处理器203上运行的计算机程序202，处理器203执行计算机程序202时实现如上述的基于插件上传图片的方法的步骤。

具体的，在本发明的具体实施例中，处理器203执行计算机程序202时实现以下步骤：插件响应用户上传图片的操作以获取图片；并调用API对图片的图层进行解析，生成图层信息；将图层信息转换成json格式文件；将json格式文件与图片上传至web端服务器。

可选的，处理器203执行计算机程序202时还实现以下步骤：根据API提取图片的多个图层属性；其中，图层属性中包括每个图层的位置、颜色及尺寸中至少一种；将每一个图层的图层属性确定为图层的图层信息。

可选的，处理器203执行计算机程序202时还实现以下步骤：读取图层信息以获取图层信息的初始字节码；将初始字节码编成base64字节码；根据base64字节码，将base64字节码转换为base64字符串并以字典格式保存base64字符串；将字典格式的base64字符串转化为json格式文件。

可选的，处理器203执行计算机程序202时还实现以下步骤：向web端服务器发送http请求；在web端服务器响应之后获取web端服务器的域名；根据web端服务器的域名将json格式文件与图片上传至web端服务器。

可选的，处理器203执行计算机程序202时还实现以下步骤：当web端服务器响应到用户查看图片的指令时，生成操作控件；其中，操作控件用于在多个图层中执行多个操作；根据操作控件，响应用户选择第一图层的指令；当操作控件移动至第二图层时，计算第二图层和第一图层中HTML元素的距离；根据HTML元素的距离，将HTML元素的距离生成为尺寸信息以显示为可视化标识。

即，在本发明的具体实施例中，基于插件上传图片的设备20的处理器203执行计算机程序202时实现上述基于插件上传图片的方法的步骤，从而开发人员可以直接在web端进行直观查看图片的标注信息，使其开发网页设计能够提升效率。

需要说明的是，由于基于插件上传图片的设备20的处理器203执行计算机程序202时实现上述基于插件上传图片的方法的步骤，因此上述基于插件上传图片的方法的所有实施例均适用于该基于插件上传图片的设备20，且均能达到相同或相似的有益效果。

本发明还提供了一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序被处理器执行时实现如上述的基于插件上传图片的方法的步骤。

具体的，在本发明的具体实施例中，计算机可读存储介质被处理器执行时实现以下步骤：插件响应用户上传图片的操作以获取图片；并调用API对图片的图层进行解析，生成图层信息；将图层信息转换成json格式文件；将json格式文件与图片上传至web端服务器。

可选的，计算机可读存储介质被处理器执行时实现以下步骤：根据API提取图片的多个图层属性；其中，图层属性中包括每个图层的位置、颜色及尺寸中至少一种；将每一个图层的图层属性确定为图层的图层信息。

可选的，计算机可读存储介质被处理器执行时实现以下步骤：读取图层信息以获取图层信息的初始字节码；将初始字节码编成base64字节码；根据base64字节码，将base64字节码转换为base64字符串并以字典格式保存base64字符串；将字典格式的base64字符串转化为json格式文件。

可选的，计算机可读存储介质被处理器执行时实现以下步骤向web端服务器发送http请求；在web端服务器响应之后获取web端服务器的域名；根据web端服务器的域名将json格式文件与图片上传至web端服务器。

可选的，计算机可读存储介质被处理器执行时实现以下步骤：当web端服务器响应到用户查看图片的指令时，生成操作控件；其中，操作控件用于在多个图层中执行多个操作；根据操作控件，响应用户选择第一图层的指令；当操作控件移动至第二图层时，计算第二图层和第一图层中HTML元素的距离；根据HTML元素的距离，将HTML元素的距离生成为尺寸信息以显示为可视化标识。

即，在本发明的具体实施例中，计算机程序被处理器执行时实现上述基于插件上传图片的方法的步骤，从而开发人员可以直接在web端进行直观查看图片的标注信息，使其开发网页设计能够提升效率。

需要说明的是，由于计算机程序被处理器执行时实现上述基于插件上传图片的方法的步骤，因此上述基于插件上传图片的方法的所有实施例均适用于该计算机可读存储介质，且均能达到相同或相似的有益效果。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质(如ROM/RAM、磁碟、光盘)中，包括若干指令用以使得一台终端(可以是智能音箱，计算机，服务器，空调器，或者网络设备等)执行本发明各个实施例所述的方法。

在本说明书的描述中，参考术语“一个实施例”、“一些实施例”、“示例”、“具体示例”、或“一些示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本发明的至少一个实施例或示例中。在本说明书中，对上述术语的示意性表述不一定指的是相同的实施例或示例。而且，描述的具体特征、结构、材料或者特点可以在任何的一个或多个实施例或示例中以合适的方式结合。

以上所述仅为本发明的优选实施例，并非因此限制本发明的专利范围，凡是在本发明的构思下，利用本发明说明书及附图内容所作的等效结构变换，或直接/间接运用在其他相关的技术领域均包括在本发明的专利保护范围内。

Claims (10)

1.一种基于插件上传图片的方法，其特征在于，所述方法具体包括：

配置于图片处理工具中的插件，所述插件响应用户上传图片的操作以获取图片；

并调用API对所述图片的图层进行解析，生成图层信息；

将所述图层信息转换成json格式文件；

将所述json格式文件与所述图片上传至web端服务器。

2.根据权利要求1所述的基于插件上传图片的方法，其特征在于，在所述调用API对所述图片的图层进行解析之前，还包括：

采用所述插件对所述图片进行切图及标注处理；

采用所述插件基于超文本传输协议将所述切图及标注处理的所述图片传输至所述web端服务器。

3.根据权利要求1所述的基于插件上传图片的方法，其特征在于，所述调用API对所述图片的图层进行解析并生成图层信息包括：

根据所述API提取所述图片的多个图层属性；其中，所述图层属性中包括每个图层的位置、颜色及尺寸中至少一种；

将每一个所述图层的图层属性确定为所述图层的图层信息。

4.根据权利要求1所述的基于插件上传图片的方法，其特征在于，所述将所述图层信息转换成json格式文件包括：

读取所述图层信息以获取所述图层信息的初始字节码；

将所述初始字节码编成base64字节码；

将所述base64字节码转换为base64字符串并以字典格式保存所述base64字符串；

将所述字典格式的base64字符串转化为所述json格式文件。

5.根据权利要求1所述的基于插件上传图片的方法，其特征在于，所述将所述json格式文件与所述图片上传至web端服务器包括：

向web端服务器发送http请求；

在web端服务器响应之后获取所述web端服务器的域名；

根据所述web端服务器的域名将所述json格式文件与所述图片上传至web端服务器。

6.根据权利要求1所述的基于插件上传图片的方法，其特征在于，所述将所述json格式文件与所述图片上传至web端服务器之后包括：

当所述web端服务器响应到用户查看所述图片的指令时，生成操作控件；其中，所述操作控件用于在多个图层中执行多个操作；

根据所述操作控件，响应用户选择第一图层的指令；

当所述操作控件移动至第二图层时，计算所述第二图层和第一图层中HTML元素的距离；

根据所述HTML元素的距离，将所述HTML元素的距离生成为尺寸信息以显示为可视化标识。

7.一种插件系统，其特征在于，所述插件系统配置于图片处理工具中，所述插件系统包括：

响应模块，用于响应用户上传图片的操作以获取图片；

调用模块，用于调用API对所述图片的图层进行解析，生成图层信息；

转换模块，用于将所述图层信息转换成json格式文件；

上传模块，用于将所述json格式文件与所述图片上传至web端服务器。

8.根据权利要求7所述的插件系统，其特征在于，所述调用模块包括：

提取子模块，用于根据所述API提取所述图片的多个图层属性；其中，所述图层属性中包括每个图层的位置、颜色及尺寸中至少一种；

确定子模块，用于将每一个所述图层的图层属性确定为所述图层的图层信息。

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

10.一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1至6任一项所述的基于插件上传图片的方法的步骤。