CN103714061B - 保存网页图片的方法及装置 - Google Patents

Abstract

一种保存网页图片的方法，包括：获取网页图片；获取图片工具栏；通过所述图片工具栏获取图片编辑信息，并根据所述图片编辑信息编辑所述网页图片；获取保存请求，根据所述保存请求存储所述网页图片。此外，还提供了一种保存网页图片的装置。上述保存网页图片的方法和装置可以提高操作效率。

Description

保存网页图片的方法及装置

技术领域

本发明涉及互联网技术领域，特别是涉及一种保存网页图片的方法及装置。

背景技术

传统技术中，网页通常由HTML（Hypertext Markup Language，超文本标记语言）定义，其内可包含文本、图片、音频、视频等多媒体元素。

传统技术中，用户可选中网页中的图片，通过在右键弹出的菜单栏中选择保存图片将网页图片保存到本地。

然而，发明人发现现有技术至少存在以下问题：传统技术中在保存网页图片时，无法在图片中添加批注（即无法编辑网页图片）。当用户需要对图片添加批注时，必须要先将图片存储到本地，然后再打开图片编辑软件（例如photoshop）对图片进行编辑，使得操作过程十分繁杂，从而降低了操作效率。

发明内容

基于此，有必要提供一种能提高操作效率的保存网页图片的方法。

一种保存网页图片的方法，包括：

获取网页图片；

获取图片工具栏；

通过所述图片工具栏获取图片编辑信息，并根据所述图片编辑信息编辑所述网页图片；

获取保存请求，根据所述保存请求存储所述网页图片。

此外，还有必要提供一种能提高操作效率的保存网页图片的装置。

一种保存网页图片的装置，包括：

图片获取模块，用于获取网页图片；

工具栏获取模块，用于获取图片工具栏；

图片编辑模块，用于通过所述图片工具栏获取图片编辑信息，并根据所述图片编辑信息编辑所述网页图片；

存储模块，用于获取保存请求，根据所述保存请求存储所述网页图片。

上述保存网页图片的方法和装置，在获取网页图片之后，立即弹出图片工具栏，并根据用户输入的图片编辑信息编辑图片，、保存后的图片为编辑完成的图片，使得用户无需先将原始的网页图片存储后再使用第三方软件对图片进行编辑，从而节约了操作步骤，提高了操作效率。

附图说明

图1为一个实施例中保存网页图片的方法的流程图；

图2为一个实施例中保存网页图片时的操作界面示意图；

图3为一个实施例中保存网页图片的装置的结构示意图；

图4为另一个实施例中保存网页图片的装置的结构示意图。

具体实施方式

在一个实施例中，如图1所示，一种保存网页图片的方法，包括：

步骤S102，获取网页图片。

网页图片包括网页中页面元素内包含的图片、通过截取网页显示内容得到的网页截屏图片。

在一个实施例中，可获取焦点位置，根据焦点位置获取对应的网页图片。例如，在一个运行场景中，网页的页面元素包含有A、B、C3个图片对象。用户可通过移动光标（通过鼠标和触发键盘上的Tab键）来定位焦点。当焦点移动到图片B上时，则获取图片B。

在一个实施例中，还可获取输入的区域范围，根据区域范围截取网页显示图像生成网页图片。

在本实施例中，用户可在网页显示区域拖动光标在该区域中划定矩形的区域范围，然后通过调用操作***底层的截屏函数，截取该区域范围内的显示内容生成图片。

在另一个实施例中，获取输入的区域范围的步骤还可具体为：获取网页的显示内容在显示屏上所处的区域。即将网页整体转换成网页图片。

步骤S104，获取图片工具栏。

图片工具栏即包含了图片编辑工具的显示组件。图片编辑工具包括矩形工具、圆形工具、椭圆工具、箭头工具、画刷工具、文字工具、滤镜工具中的一种或多种。

在一个实施例中，可获取图形编辑库函数，根据图形编辑库函数生成图片工具栏。

图形编辑库函数即操作***中图形库函数，例如windows操作***中的画笔库函数。在本实施例中，可通过页面脚本函数获取图形编辑库函数，然后根据图形编辑库函数生成图片工具栏。例如，可通过javascript脚本语言通过调用图形库函数生成图片工具栏。生成的图片工具栏可处于网页中，进一步的，图片工具栏可悬浮于图片对象的边缘，方便用户操作。

在另一个实施例中，还可通过浏览器的接口函数获取图形编辑库函数，并根据图形编辑库函数生成图片工具栏。生成的图片工具栏可位于浏览器的侧边栏或工具栏中。

在一个实施例中，生成图片工具栏之后还可将其隐藏，当获取到图片工具栏时，再将其设置为显示，从而可以减少显示的界面元素，方便用户查看。

步骤S106，通过图片工具栏获取图片编辑信息，并根据图片编辑信息编辑网页图片。

图片编辑信息即输入的对图片产生编辑效果的操作信息。例如，通过拖动画刷在图片所在区域形成滑动轨迹的操作；通过选择滤镜调整图片像素、灰度、色差的操作；通过文本工具输入文字对图片进行批注的操作。

在一个实施例中，根据图片编辑信息编辑网页图片的步骤可具体为：根据图片编辑信息通过图形编辑库函数编辑网页图片。

操作***提供的图形编辑库函数可用于根据输入的图片编辑信息（包括光标的坐标轨迹、功能按键的触发、输入的参数）对网页图片产生编辑效果。

步骤S108，获取保存请求，根据保存请求存储网页图片。

在一个实施例中，保存请求对应网页图片，即发起的保存请求用于保存该网页图片。

在本实施例中，保存请求对应存储位置。存储位置包括本地存储单元、网络硬盘、社交网络、电子邮箱中的至少一个。

根据保存请求存储网页图片的步骤可具体为：根据保存请求提取存储位置，将网页图片存储到存储位置中。

本地存储单元即本地磁盘、磁带、SD卡、TF卡等物理存储设备。网络硬盘即互联网上存储服务提供商提供的存储空间。社交网络即微博、社交网站（例如开心网、朋友网、人人网等）等提供了图片分享接口的互联网站点。

在一个实施例中，存储位置为本地存储单元，可从保存请求中提取本地文件路径，根据本地文件路径存储网页图片。

在一个实施例中，存储位置为网络硬盘，可从保存请求中提取网络地址链接，然后根据该链接将网页图片上传到对应的网络位置。

在一个实施例中，存储位置为社交网络，可从保存请求中提取社交网络标识，然后通过该社交网络标识获取对应的社交网络分享接口，通过该接口将网页图片分享到社交网络中。

在一个实施例中，存储位置为电子邮箱，可从保存请求中提取目标邮箱地址，然后将网页图片作为附件发送给目标邮箱地址。

在一个实施例中，获取网页图片的步骤之前还可获取网页编辑请求，根据网页编辑请求获取网页；在网页上通过定义页面元素生成透明背景图层。

网页编辑请求即对网页内容进行编辑批注的请求。可生成透明背景图层，通过该透明背景图层记录编辑和/或批注的内容。

在本实施例中，获取网页图片的步骤可具体为：获取透明背景图层，根据透明背景图层获取网页图片。

在本实施例中，在网页上通过定义页面元素生成透明背景图层的步骤可具体为：在网页中生成浮动层，生成透明图片，通过页面元素定义将该透明图片设置为该浮动层的背景。该透明图片即为网页图片。

例如，可通过div等页面元素标签定义浮动层，然后在其CSS（层叠样式表）属性中将其背景设置为透明图片。

进一步的，在本实施例中，保存请求对应获取到的网页。根据保存请求存储网页图片的步骤可具体为：存储获取到的网页，将网页图片以页面元素的形式存储在网页的素材库中。

素材库即网页元素中非文本信息的存储位置。例如，网页在存储时，通常包括html文件和一个包含了多媒体文件的文件夹，html文件中包含了文本信息以及链接，包含多媒体文件的文件夹中则包含了网页中的图片、视屏、音频、文件、flash等多媒体内容。

也就是说，可在接收到保存请求之后保存网页，并将对网页的编辑信息通过图片的形式存储到网页对应的素材库中，存储后的网页即为网页剪辑。

如图2所示，在一个实施例中，用户通过点击浏览器侧边栏中的“我要涂鸦”按钮获取截屏图片，然后弹出图片工具栏。图片工具栏中包含画刷工具、图形工具、文本工具、颜色工具以及滤镜工具。用户可通过图片工具栏对截屏图片进行编辑，如图2中的黑圈和箭头标注的“淘宝热卖”图标。用户编辑完成后可通过点击图片工具栏上的分享键将该图片分享到社交网络中。该用户的好友即可看到该已标注过的图片，并根据该标注过的图片进行相应操作。

在一个实施例中，如图3所示，一种保存网页图片的装置，包括：图片获取模块102、工具栏获取模块104、图片编辑模块106以及存储模块108，其中：

图片获取模块102，用于获取网页图片。

网页图片包括网页中页面元素内包含的图片、通过截取网页显示内容得到的网页截屏图片。

在一个实施例中，图片获取模块102可用于获取焦点位置，根据焦点位置获取对应的网页图片。例如，在一个运行场景中，网页的页面元素包含有A、B、C3个图片对象。用户可通过移动光标（通过鼠标和触发键盘上的Tab键）来定位焦点。当焦点移动到图片B上时，则获取图片B。

在一个实施例中，图片获取模块102还可用于获取输入的区域范围，根据区域范围截取网页显示图像生成网页图片。

在本实施例中，用户可在网页显示区域拖动光标在该区域中划定矩形的区域范围，然后通过调用操作***底层的截屏函数，截取该区域范围内的显示内容生成图片。

在另一个实施例中，图片获取模块102还可用于获取网页的显示内容在显示屏上所处的区域。即将网页整体转换成网页图片。

工具栏获取模块104，用于获取图片工具栏。

图片工具栏即包含了图片编辑工具的显示组件。图片编辑工具包括矩形工具、圆形工具、椭圆工具、箭头工具、画刷工具、文字工具、滤镜工具中的一种或多种。

在一个实施例中，如图4所示，保存网页图片的装置还包括工具栏生成模块110，用于获取图形编辑库函数，根据图形编辑库函数生成图片工具栏。

图形编辑库函数即操作***中图形库函数，例如windows操作***中的画笔库函数。在本实施例中，工具栏生成模块110可用于通过页面脚本函数获取图形编辑库函数，然后根据图形编辑库函数生成图片工具栏。例如，可通过javascript脚本语言通过调用图形库函数生成图片工具栏。生成的图片工具栏可处于网页中，进一步的，图片工具栏可悬浮于图片对象的边缘，方便用户操作。

在另一个实施例中，工具栏生成模块110还可用于通过浏览器的接口函数获取图形编辑库函数，并根据图形编辑库函数生成图片工具栏。生成的图片工具栏可位于浏览器的侧边栏或工具栏中。

在一个实施例中，工具栏生成模块110还可用于在生成图片工具栏之后将其隐藏。工具栏获取模块104还可用于在获取到图片工具栏时，将其设置为显示，从而可以减少显示的界面元素，方便用户查看。

图片编辑模块106，用于通过图片工具栏获取图片编辑信息，并根据图片编辑信息编辑网页图片。

图片编辑信息即输入的对图片产生编辑效果的操作信息。例如，通过拖动画刷在图片所在区域形成滑动轨迹的操作；通过选择滤镜调整图片像素、灰度、色差的操作；通过文本工具输入文字对图片进行批注的操作。

在一个实施例中，图片编辑模块106可用于根据图片编辑信息通过图形编辑库函数编辑网页图片。

操作***提供的图形编辑库函数可用于根据输入的图片编辑信息（包括光标的坐标轨迹、功能按键的触发、输入的参数）对网页图片产生编辑效果。

存储模块108，用于获取保存请求，根据保存请求存储网页图片。

在一个实施例中，保存请求对应网页图片，即发起的保存请求用于保存该网页图片。

在本实施例中，保存请求对应存储位置。存储位置包括本地存储单元、网络硬盘、社交网络、电子邮箱中的至少一个。

存储模块108可用于根据保存请求提取存储位置，将网页图片存储到存储位置中。

本地存储单元即本地磁盘、磁带、SD卡、TF卡等物理存储设备。网络硬盘即互联网上存储服务提供商提供的存储空间。社交网络即微博、社交网站（例如开心网、朋友网、人人网等）等提供了图片分享接口的互联网站点。

在一个实施例中，存储位置为本地存储单元，存储模块108可用于从保存请求中提取本地文件路径，根据本地文件路径存储网页图片。

在一个实施例中，存储位置为网络硬盘，存储模块108可用于从保存请求中提取网络地址链接，然后根据该链接将网页图片上传到对应的网络位置。

在一个实施例中，存储位置为社交网络，存储模块108可用于从保存请求中提取社交网络标识，然后通过该社交网络标识获取对应的社交网络分享接口，通过该接口将网页图片分享到社交网络中。

在一个实施例中，存储位置为电子邮箱，存储模块108可用于从保存请求中提取目标邮箱地址，然后将网页图片作为附件发送给目标邮箱地址。

在一个实施例中，如图4所示，保存网页图片的装置还包括图层创建模块112，用于获取网页编辑请求，根据网页编辑请求获取网页，在网页上通过定义页面元素生成透明背景图层。

网页编辑请求即对网页内容进行编辑批注的请求。可生成透明背景图层，通过该透明背景图层记录编辑和/或批注的内容。

在本实施例中，图片获取模块102还可用于获取透明背景图层，根据透明背景图层获取网页图片。

在本实施例中，图层创建模块112可用于在网页中生成浮动层，生成透明图片，通过页面元素定义将该透明图片设置为该浮动层的背景。该透明图片即为网页图片。

例如，可通过div等页面元素标签定义浮动层，然后在其CSS（层叠样式表）属性中将其背景设置为透明图片。

进一步的，在本实施例中，保存请求对应获取到的网页。存储模块108可用于存储获取到的网页，将网页图片以页面元素的形式存储在网页的素材库中。

素材库即网页元素中非文本信息的存储位置。例如，网页在存储时，通常包括html文件和一个包含了多媒体文件的文件夹，html文件中包含了文本信息以及链接，包含多媒体文件的文件夹中则包含了网页中的图片、视屏、音频、文件、flash等多媒体内容。

也就是说，可在接收到保存请求之后保存网页，并将对网页的编辑信息通过图片的形式存储到网页对应的素材库中，存储后的网页即为网页剪辑。

上述保存网页图片的方法和装置，在获取网页图片之后，立即弹出图片工具栏，并根据用户输入的图片编辑信息编辑图片，、保存后的图片为编辑完成的图片，使得用户无需先将原始的网页图片存储后再使用第三方软件对图片进行编辑，从而节约了操作步骤，提高了操作效率。

接收到进程信息查看请求之后，通过移动操作***中预设的库函数获取进程信息。和传统技术相比，可在移动终端上直接查看进程信息，而不用与外置的电脑相连，在外部通过移动终端的驱动程序的接口函数来查看，从而减少了查看时的操作，提高了操作效率。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的程序可存储于一计算机可读取存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。其中，所述的存储介质可为磁碟、光盘、只读存储记忆体（Read-Only Memory，ROM）或随机存储记忆体（Random AccessMemory，RAM）等。

以上所述实施例仅表达了本发明的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对本发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本发明构思的前提下，还可以做出若干变形和改进，这些都属于本发明的保护范围。因此，本发明专利的保护范围应以所附权利要求为准。

Claims (10)

1.一种保存网页图片的方法，包括：

获取网页图片；

获取图片工具栏；

通过所述图片工具栏获取图片编辑信息，并根据所述图片编辑信息编辑所述网页图片；

获取保存请求，根据所述保存请求存储所述网页图片；

所述保存请求对应存储位置，所述存储位置包括社交网络或电子邮箱中的一个；

根据所述保存请求存储所述网页图片的步骤为：

根据所述保存请求提取存储位置；

将所述网页图片存储到所述存储位置中；所述将所述网页图片存储到所述存储位置中的步骤包括：从保存请求中提取社交网络标识，通过该社交网络标识获取对应的社交网络分享接口，通过该接口将网页图片分享到社交网络中，或从保存请求中提取目标邮箱地址，将网页图片作为附件发送给目标邮箱地址；

所述获取网页图片的步骤之前还包括：

获取网页编辑请求，根据所述网页编辑请求获取网页；

在所述网页中生成浮动层，生成透明图片；

通过页面元素定义将所述透明图片设置所述浮动层的背景，得到透明背景层；

通过所述透明背景层记录编辑和/或批注的内容；

所述获取网页图片的步骤为：

获取所述透明背景图层，根据所述透明背景图层获取网页图片。

2.根据权利要求1所述的保存网页图片的方法，其特征在于，所述获取网页图片的步骤为：

获取输入的区域范围；

根据所述区域范围截取网页显示图像生成网页图片。

3.根据权利要求1或2所述的保存网页图片的方法，其特征在于，所述方法还包括：

获取图形编辑库函数；

根据所述图形编辑库函数生成图片工具栏；

所述根据所述图片编辑信息编辑所述网页图片的步骤为：

根据所述图片编辑信息通过所述图形编辑库函数编辑所述网页图片。

4.根据权利要求1所述的保存网页图片的方法，其特征在于，所述保存请求对应所述获取到的网页；

所述根据所述保存请求存储所述网页图片的步骤为：

存储所述获取到的网页，将所述网页图片以页面元素的形式存储在所述网页的素材库中。

5.一种保存网页图片的装置，其特征在于，包括：

图片获取模块，用于获取网页图片；

工具栏获取模块，用于获取图片工具栏；

图片编辑模块，用于通过所述图片工具栏获取图片编辑信息，并根据所述图片编辑信息编辑所述网页图片；

存储模块，用于获取保存请求，根据所述保存请求存储所述网页图片；

所述保存请求对应存储位置，所述存储位置包括社交网络或电子邮箱中的一个；

所述存储模块还用于从保存请求中提取社交网络标识，通过该社交网络标识获取对应的社交网络分享接口，通过该接口将网页图片分享到社交网络中，或从保存请求中提取目标邮箱地址，将网页图片作为附件发送给目标邮箱地址；

所述装置还包括图层创建模块，用于获取网页编辑请求，根据所述网页编辑请求获取网页，在所述网页中生成浮动层，生成透明图片；通过页面元素定义将所述透明图片设置所述浮动层的背景，得到透明背景层，通过所述透明背景层记录编辑和/或批注的内容；

所述图片获取模块还用于获取所述透明背景图层，根据所述透明背景图层获取网页图片。

6.根据权利要求5所述的保存网页图片的装置，其特征在于，所述图片获取模块还用于获取输入的区域范围，根据所述区域范围截取网页显示图像生成网页图片。

7.根据权利要求5或6所述的保存网页图片的装置，其特征在于，所述工具栏生成模块，用于获取图形编辑库函数，根据所述图形编辑库函数生成图片工具栏；

所述图片编辑模块还用于根据所述图片编辑信息通过所述图形编辑库函数编辑所述网页图片。

8.根据权利要求5所述的保存网页图片的装置，其特征在于，所述保存请求对应所述获取到的网页；

所述存储模块还用于存储所述获取到的网页，将所述网页图片以页面元素的形式存储在所述网页的素材库中。

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

10.一种存储介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时，实现权利要求1至4中任一项所述的保存网页图片的方法的步骤。