CN110472176A

CN110472176A - web端的图片处理方法、装置、***及存储介质

Info

Publication number: CN110472176A
Application number: CN201910617935.7A
Authority: CN
Inventors: 刘松; 杨思柏; 孟小江
Original assignee: CHENGDU MIKE TECHNOLOGY Co Ltd
Current assignee: CHENGDU MIKE TECHNOLOGY Co Ltd
Priority date: 2019-07-10
Filing date: 2019-07-10
Publication date: 2019-11-19

Abstract

本发明公开了一种web端的图片处理方法、装置、***及存储介质，本发明提供的web端的图片处理方法通过获取待处理网页数据；将所述待处理网页数据进行切图以生成待处理图片；根据所述待处理图片，响应用户输入第一尺寸信息的指令，获取所述指令对应的第一尺寸信息；根据所述第一尺寸信息，基于预设规则计算所述待处理图片的第二尺寸信息，以生成待下载图片。使得用户需要指定尺寸图片时，可以直接将该网页进行下载，并对该网页中的图片可以直接处理，提高了网页设计的效率和质量。

Description

web端的图片处理方法、装置、***及存储介质

技术领域

本发明涉及图片处理技术领域，具体涉及一种web端的图片处理方法、装置、***及存储介质。

背景技术

网页设计是通过使用更合理的颜色、字体、图片、样式进行页面设计美化，在功能限定的情况下，尽可能给予用户完美的视觉体验。高级的网页设计甚至会考虑到通过声光、交互等来实现更好的视听感受。在网站上显示图片是很常见的，但大部分网站，只会对图片的css样式做出调整，用户在下载到本地时还是原图，用户需要指定尺寸图片时，需要将图片进行一一下载，并且还需要另外用图片编辑软件进行处理，并且处理的图片质量比较差。

发明内容

本发明的主要目的是提供一种web端的图片处理方法、装置、***及存储介质，以解决相关技术中不能够直接通过web端进行网页设计的图片编辑的问题。

为实现上述目的，本发明提供了一种web端的图片处理方法，包括：

获取待处理网页数据；

将所述待处理网页数据进行切图以生成待处理图片；

根据所述待处理图片，响应用户输入第一尺寸信息的指令，获取所述指令对应的第一尺寸信息；

根据所述第一尺寸信息，基于预设规则计算所述待处理图片的第二尺寸信息，以生成待下载图片。

优选地，所述获取待处理网页数据之前包括：

基于Canvas元素，将图片载入所述Canvas元素中；

当所述图片载入完成时，将所述图片显示于所述Canvas元素上；

根据显示有图片的所述Canvas元素确定为待处理网页数据。

优选地，所述将所述待处理网页数据进行切图以生成待处理图片，包括：

根据所述待处理网页数据，响应用户选定的切图区域；

根据所述切图区域确定出所述待处理图片。

优选地，所述根据所述第一尺寸信息，基于预设规则计算所述待处理图片的第二尺寸信息，以生成待下载图片，包括：

根据所述第一尺寸信息，响应用户对所述待处理图片选择的填充模式指令；

根据所述填充模式指令以确定填充模式；

根据确定的所述填充模式对所述第二尺寸信息进行分辨率换算，以生成待下载图片。

优选地，所述填充模式为居中模式；

所述根据确定的所述填充模式对所述第二尺寸信息进行分辨率换算，以生成待下载图片，包括：

根据所述第一尺寸信息以所述分辨率换算规则生成所述第二尺寸信息；

判断所述第一尺寸信息与所述第二尺寸信息是否大于确定所述待处理图片的尺寸信息；

当大于时，对所述待处理图片尺寸居中定位并分配边界框，将所述边界框进行填充处理，以生成待下载图片；其中，所述边界框尺寸为所述第一尺寸信息与所述第二尺寸信息。

优选地，所述填充模式为拉伸模式，所述根据确定的所述填充模式对所述第二尺寸信息进行分辨率换算，以生成待下载图片，还包括：

当大于时，将所述待处理图片尺寸拉伸至为所述第一尺寸信息与所述第二尺寸信息，并生成待下载图片。

本发明还提供了一种web端的图片处理装置，包括：

第一获取模块，用于获取待处理网页数据；

切图模块，用于将所述待处理网页数据进行切图以生成待处理图片；

响应模块，用于根据所述待处理图片，响应用户输入第一尺寸信息的指令；

第二获取模块，用于获取所述指令对应的第一尺寸信息；

计算模块，用于根据所述第一尺寸信息，基于预设规则计算所述待处理图片的第二尺寸信息，以生成待下载图片。

优选地，所述装置还包括：

载入模块，用于基于Canvas元素，将图片载入所述Canvas元素中；

显示模块，用于当所述图片载入完成时，将所述图片显示于所述Canvas元素上；

确定模块，用于根据显示有图片的所述Canvas元素确定为待处理网页数据。

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

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

本发明提供的web端的图片处理方法，通过获取待处理网页数据；将所述待处理网页数据进行切图以生成待处理图片；根据所述待处理图片，响应用户输入第一尺寸信息的指令，获取所述指令对应的第一尺寸信息；根据所述第一尺寸信息，基于预设规则计算所述待处理图片的第二尺寸信息，以生成待下载图片。使得用户需要指定尺寸图片时，可以直接将该网页进行下载，并对该网页中的图片可以直接处理，提高了网页设计的效率和质量。

附图说明

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

图1是本发明实施例提供的web端的图片处理方法的流程图；

图2是本发明实施例提供的web端的图片处理方法的另一流程图；

图3是图1所示的步骤S40的具体流程图；

图4是本发明实施例提供的web端的图片处理装置的结构示意图；

图5是本发明实施例提供的web端的图片处理装置的另一结构示意图；

图6是本发明实施例提供的web端的图片处理***的结构示意图；

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

具体实施方式

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

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

参照图1所示，本发明提供了一种web端的图片处理方法，包括：

S10、获取待处理网页数据。

在本发明的实施例中，在进行网页设计时，会采用不同的图片进行页面的设计和美化，因此，当需要某一张图片时，可以直接将网页数据进行下载，由此，使得该网页数据能够在断开网络时也可以进行图片处理，通过将该下载的网页数据导入，并从该网页数据中选择需要的图片以进行网页设计。

参照图2所示，获取待处理网页数据之前包括：

步骤10，基于Canvas元素，将图片载入Canvas元素中；

步骤11，当图片载入完成时，将图片显示于Canvas元素上；

步骤12，根据显示有图片的Canvas元素确定为待处理网页数据。

其中，基于Canvas元素使得图片能够载入至网页数据中，在网页数据中能够将很多张图片进行存储和显示，当图片载入至Canvas元素中之后，则会一一显示在网页数据中，由此，将显示有图片的Canvas元素确定为待处理网页数据以供进行下载，也就是说，用户在进行网页设计时，当需要图片以及素材时，则可以将该网页数据直接下载下来，并从中获取到需要的图片。

S20、将待处理网页数据进行切图以生成待处理图片。

在本发明的实施例中，当导入了该待处理网页数据时，可以对其中的各种图片、样式或素材进行切图处理，分成多个待处理图片，在进行网页数据时，分成的多个待处理图片能够快速的进行网页设计，从而提高了用户的工作效率。

进一步的，上述步骤S20将待处理网页数据进行切图以生成待处理图片，包括：

步骤一，根据待处理网页数据，响应用户选定的切图区域；

步骤二，根据切图区域确定出待处理图片。

其中，在导入待处理网页数据之后，通过显示切图控件使得用户采用切图控件在网页数据进行区域选择，当确定了用户选定的切图区域时，则可以将该切图区域确定为待处理图片，当存在多个切图区域时，则可以都确定为待处理图片。

S30、根据待处理图片，响应用户输入第一尺寸信息的指令，获取指令对应的第一尺寸信息。

其中，第一尺寸信息可以宽或高，当用户输入第一尺寸信息的指令时，可以确定该第一尺寸信息为图片宽的值或图片高的值。

S40、根据第一尺寸信息，基于预设规则计算待处理图片的第二尺寸信息，以生成待下载图片。

在本发明的实施例中，预设规则可以是分辨率换算，第二尺寸信息可以是宽或高，当第一尺寸信息为高时，则第二尺寸信息为宽，也就是说，通过识别第一尺寸信息，第二尺寸信息能够通过分辨率换算直接得出，待处理图片中每对应输入一个第一尺寸信息，则可以直接进行分辨率换算得出第二尺寸信息。

参照图3所示，上述步骤S40根据第一尺寸信息，基于预设规则计算待处理图片的第二尺寸信息，以生成待下载图片，包括：

S41、根据第一尺寸信息，响应用户对待处理图片选择的填充模式指令；

S42、根据填充模式指令以确定填充模式；

S43、根据确定的填充模式对第二尺寸信息进行分辨率换算，以生成待下载图片。

其中，分辨率换算表示图片宽和高之间的倍率换算，其中，分辨率换算的公式为：其中，x表示长度像素数，y表示宽度像素数，Z表示图片对角线长度，PPI表示分辨率，当分辨率为固定值时，x或y中其中一项输入任意值都可以直接得出另一项的值；可以理解的是，当第一尺寸信息为x，第二尺寸信息为y时，以上述分辨率换算公式都可以进行第一尺寸信息和第二尺寸信息之间的换算。

可选的，在进行分辨率换算之前，可以通过选择不同的填充模式，来确定待处理图片的尺寸。

优选地，当填充模式为居中模式时；上述步骤S43根据确定的填充模式对第二尺寸信息进行分辨率换算，以生成待下载图片，包括：

步骤一，根据第一尺寸信息以分辨率换算规则生成第二尺寸信息；

步骤二，判断第一尺寸信息与第二尺寸信息是否大于确定待处理图片的尺寸信息；

步骤三，当大于时，对待处理图片尺寸居中定位并分配边界框，将边界框进行填充处理，以生成待下载图片；其中，边界框尺寸为第一尺寸信息与第二尺寸信息。

在本发明的实施例中，当判断采用的是居中模式对待处理图片进行处理时，根据上述的分辨率换算规则，输入的第一尺寸信息会计算出第二尺寸信息，但是会保持待处理图片的宽和高不变，将待处理图片周边产生边界框并将边界框拉伸至对应第一尺寸信息和第二尺寸信息，并为边界框填充颜色，填充的颜色可以是任意颜色。比如，当待处理图片是50*50，填写的宽和高为200*200，则导出的图片宽和高为200*200，但待处理图片只占据其中50*50的空间，边界框则为白色。

进一步的，当填充模式为拉伸模式时，上述步骤S43根据确定的填充模式对第二尺寸信息进行分辨率换算，以生成待下载图片，还包括：

步骤三，当大于时，将待处理图片尺寸拉伸至为第一尺寸信息与第二尺寸信息，并生成待下载图片。

在本发明的实施例中，当判断采用的是拉伸模式对待处理图片进行处理时，输入的第一尺寸信息会根据上述的分辨率换算规则计算出第二尺寸信息，并且将待处理图片进行拉伸至对应第一尺寸信息和第二尺寸信息，与居中模式不同的是，拉伸模式没有产生边界框。比如，待处理图片为200*200，但待处理图片也会在将其自身宽高比例下进行分辨率缩放，因此会把200*200的空间占满，不会产生边界框。

参照图4所示，本发明还提供了一种web端的图片处理装置，包括：

第一获取模块101，用于获取待处理网页数据；

切图模块102，用于将待处理网页数据进行切图以生成待处理图片；

响应模块103，用于根据待处理图片，响应用户输入第一尺寸信息的指令；

第二获取模块104，用于获取指令对应的第一尺寸信息；

计算模块105，用于根据第一尺寸信息，基于预设规则计算待处理图片的第二尺寸信息，以生成待下载图片。

参照图5所示，上述web端的图片处理装置10还包括：

载入模块106，用于基于Canvas元素，将图片载入Canvas元素中；

显示模块107，用于当图片载入完成时，将图片显示于Canvas元素上；

确定模块108，用于根据显示有图片的Canvas元素确定为待处理网页数据。

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

具体的，在本发明的具体实施例中，处理器203执行计算机程序202时实现以下步骤：获取待处理网页数据；将待处理网页数据进行切图以生成待处理图片；根据待处理图片，响应用户输入第一尺寸信息的指令，获取指令对应的第一尺寸信息；根据第一尺寸信息，基于预设规则计算待处理图片的第二尺寸信息，以生成待下载图片。

可选的，处理器203执行计算机程序202时还实现以下步骤：基于Canvas元素，将图片载入Canvas元素中；当图片载入完成时，将图片显示于Canvas元素上；根据显示有图片的Canvas元素确定为待处理网页数据。

可选的，处理器203执行计算机程序202时还实现以下步骤：根据待处理网页数据，响应用户选定的切图区域；根据切图区域确定出待处理图片。

可选的，处理器203执行计算机程序202时还实现以下步骤：根据第一尺寸信息，响应用户对待处理图片选择的填充模式指令；根据填充模式指令以确定填充模式；根据确定的填充模式对第二尺寸信息进行分辨率换算，以生成待下载图片。

可选的，处理器203执行计算机程序202时还实现以下步骤：根据确定的填充模式对第二尺寸信息进行分辨率换算，以生成待下载图片，包括：根据第一尺寸信息以分辨率换算规则第二尺寸信息；判断第一尺寸信息与第二尺寸信息是否大于确定待处理图片的尺寸信息；当大于时，对待处理图片尺寸居中定位并分配边界框，将边界框进行填充处理，以生成待下载图片；其中，边界框尺寸为第一尺寸信息与第二尺寸信息。

可选的，处理器203执行计算机程序202时还实现以下步骤：根据第一尺寸信息以分辨率换算规则第二尺寸信息；判断第一尺寸信息与第二尺寸信息是否大于确定待处理图片的尺寸信息；当大于时，将待处理图片尺寸拉伸至为第一尺寸信息与第二尺寸信息，并生成待下载图片。

即，在本发明的具体实施例中，web端的图片处理***20的处理器203执行计算机程序202时实现上述web端的图片处理方法的步骤，使得用户需要指定尺寸图片时，可以直接将该网页进行下载，并对该网页中的图片可以直接处理，提高了网页设计的效率和质量。

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

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

具体的，在本发明的具体实施例中，计算机可读存储介质被处理器执行时实现以下步骤：获取待处理网页数据；将待处理网页数据进行切图以生成待处理图片；根据待处理图片，响应用户输入第一尺寸信息的指令，获取指令对应的第一尺寸信息；根据第一尺寸信息，基于预设规则计算待处理图片的第二尺寸信息，以生成待下载图片。

可选的，计算机可读存储介质被处理器执行时实现以下步骤：基于Canvas元素，将图片载入Canvas元素中；当图片载入完成时，将图片显示于Canvas元素上；根据显示有图片的Canvas元素确定为待处理网页数据。

可选的，计算机可读存储介质被处理器执行时实现以下步骤：根据待处理网页数据，响应用户选定的切图区域；根据切图区域确定出待处理图片。

可选的，计算机可读存储介质被处理器执行时实现以下步骤：根据第一尺寸信息，响应用户对待处理图片选择的填充模式指令；根据填充模式指令以确定填充模式；根据确定的填充模式对第二尺寸信息进行分辨率换算，以生成待下载图片。

可选的，计算机可读存储介质被处理器执行时实现以下步骤：根据确定的填充模式对第二尺寸信息进行分辨率换算，以生成待下载图片，包括：根据第一尺寸信息以分辨率换算规则第二尺寸信息；判断第一尺寸信息与第二尺寸信息是否大于确定待处理图片的尺寸信息；当大于时，对待处理图片尺寸居中定位并分配边界框，将边界框进行填充处理，以生成待下载图片；其中，边界框尺寸为第一尺寸信息与第二尺寸信息。

可选的，计算机可读存储介质被处理器执行时实现以下步骤：根据第一尺寸信息以分辨率换算规则第二尺寸信息；判断第一尺寸信息与第二尺寸信息是否大于确定待处理图片的尺寸信息；当大于时，将待处理图片尺寸拉伸至为第一尺寸信息与第二尺寸信息，并生成待下载图片。

即，在本发明的具体实施例中，计算机程序被处理器执行时实现上述web端的图片处理方法的步骤，使得用户需要指定尺寸图片时，可以直接将该网页进行下载，并对该网页中的图片可以直接处理，提高了网页设计的效率和质量。

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

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

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

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

Claims

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

获取待处理网页数据；

将所述待处理网页数据进行切图以生成待处理图片；

2.根据权利要求1所述的web端的图片处理方法，其特征在于，所述获取待处理网页数据之前包括：

基于Canvas元素，将图片载入所述Canvas元素中；

根据显示有图片的所述Canvas元素确定为所述待处理网页数据。

3.根据权利要求1所述的web端的图片处理方法，其特征在于，所述将所述待处理网页数据进行切图以生成待处理图片，包括：

根据所述待处理网页数据，响应用户选定的切图区域；

根据所述切图区域确定出所述待处理图片。

4.根据权利要求1所述的web端的图片处理方法，其特征在于，所述预设规则为分辨率换算规则；

所述根据所述第一尺寸信息，基于预设规则计算所述待处理图片的第二尺寸信息，以生成待下载图片，包括：

根据所述填充模式指令以确定填充模式；

5.根据权利要求4所述的web端的图片处理方法，其特征在于，所述填充模式为居中模式；

6.根据权利要求4所述的web端的图片处理方法，其特征在于，所述填充模式为拉伸模式；

所述根据确定的所述填充模式对所述第二尺寸信息进行分辨率换算，以生成待下载图片，还包括：

7.一种web端的图片处理装置，其特征在于，包括：

第一获取模块，用于获取待处理网页数据；

第二获取模块，用于获取所述指令对应的第一尺寸信息；

8.根据权利要求7所述的web端的图片处理装置，其特征在于，所述装置还包括：

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

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