CN104239317A - 在浏览器中实现图片编辑的方法及装置 - Google Patents

Abstract

一种在浏览器中实现图片编辑的方法，包括：当检测到用户通过浏览器访问的信息中存在图片时，生成图片编辑的触发控件；获取用户通过触发控件所触发的图片编辑指令，根据图片编辑指令创建编辑框控件，编辑框控件包括第一编辑区域与第二编辑区域；将图片载入第一编辑区域；以及获取用户输入的注释信息，将注释信息载入第二编辑区域。此外，本发明还提供一种在浏览器中实现图片编辑的装置。上述在浏览器中实现图片编辑的方法及装置可简化图片编辑的操作步骤，提高图片编辑的效率。

Description

在浏览器中实现图片编辑的方法及装置

技术领域

本发明涉及计算机互联网技术，尤其涉及一种在浏览器中实现图片编辑的方法及装置。

背景技术

现有技术中，如果用户想要编辑浏览器中的图片，需要先将该图片保存下来，然后再打开第三方图片编辑软件（例如：photoshop、ACDSee等）对该图片进行编辑，然而这些第三方图片编辑软件的操作常常很复杂，不适合批量和随机性的图片筛选和编辑，并且由于这些第三方图片编辑软件的编辑方法一般是通过层叠的方式将新信息叠加在原始图片上，受用户个人技术所限，编辑后的图片常常会破坏原始图片的美感。因此如何简化图片编辑的操作步骤，提高图片编辑的效率是当前需要解决的问题之一。

发明内容

有鉴于此，本发明提供一种在浏览器中实现图片编辑的方法及装置，可简化图片编辑的操作步骤，提高图片编辑的效率。

本发明实施例提供一种在浏览器中实现图片编辑的方法，包括：当检测到用户通过浏览器访问的信息中存在图片时，生成图片编辑的触发控件；获取用户通过所述触发控件所触发的图片编辑指令，根据所述图片编辑指令创建编辑框控件，所述编辑框控件包括第一编辑区域与第二编辑区域；将所述图片载入所述第一编辑区域；以及获取所述用户输入的注释信息，将所述注释信息载入所述第二编辑区域。

本发明实施例提供一种在浏览器中实现图片编辑的装置，包括：触发控件生成模块，用于当检测到用户通过浏览器访问的信息中存在图片时，生成图片编辑的触发控件；编辑框控件创建模块，用于获取用户通过所述触发控件生成模块生成的所述触发控件所触发的图片编辑指令，根据所述图片编辑指令创建编辑框控件，所述编辑框控件包括第一编辑区域与第二编辑区域；图片载入模块，用于将所述图片载入所述第一编辑区域；以及注释信息载入模块，用于获取所述用户输入的注释信息，将所述注释信息载入所述第二编辑区域。

本发明实施例提供的在浏览器中实现图片编辑的方法及装置，通过创建编辑框控件，将图片编辑指令指示编辑的图片载入编辑框控件的第一编辑区域，将用户的注释信息载入编辑框控件的第二编辑区域，使得用户无需安装专业图片编辑软件即可通过浏览器编辑图片，并不会破坏原始图片的美感，从而可简化图片编辑的操作步骤，提高图片编辑的效率。

为让本发明的上述和其他目的、特征和优点能更明显易懂，下文特举较佳实施例，并配合所附图式，作详细说明如下。

附图说明

图1示出了一种用户终端的结构框图。

图2为本发明第一实施例提供的在用户终端内的浏览器中实现图片编辑的方法的流程图。

图3为本发明第一实施例提供的在用户终端内的浏览器中实现图片编辑的方法中浏览器的示意图。

图4为本发明第二实施例提供的在用户终端内的浏览器中实现图片编辑的方法的流程图。

图5为本发明第二实施例提供的在用户终端内的浏览器中实现图片编辑的方法中浏览器的第一示意图。

图6为本发明第二实施例提供的在用户终端内的浏览器中实现图片编辑的方法中浏览器的第二示意图。

图7为本发明第三实施例提供的在用户终端内的浏览器中实现图片编辑的装置的结构示意图。

图8为图7的装置的存储环境示意图。

图9为本发明第四实施例提供的在用户终端内的浏览器中实现图片编辑的装置的结构示意图。

具体实施方式

为更进一步阐述本发明为实现预定发明目的所采取的技术手段及功效，以下结合附图及较佳实施例，对依据本发明的具体实施方式、结构、特征及其功效，详细说明如后。

本发明实施例所提供的在浏览器中实现图片编辑的方法可应用于用户终端中实现图片编辑，用户终端可以包括智能手机、平板电脑、电子书阅读器、MP3播放器（Moving Picture Experts Group Audio Layer III，动态影像专家压缩标准音频层面3）、MP4（Moving Picture Experts Group AudioLayer IV，动态影像专家压缩标准音频层面4）播放器、膝上型便携计算机和台式计算机等等。

图1示出了一种用户终端的结构框图。如图1所示，用户终端100包括存储器102、存储控制器104，一个或多个（图中仅示出一个）处理器106、外设接口108、射频模块110、定位模块112、摄像模块114、音频模块116、触控屏幕118以及按键模块120。这些组件通过一条或多条通讯总线/信号线122相互通讯。

可以理解，图1所示的结构仅为示意，用户终端100还可包括比图1中所示更多或者更少的组件，或者具有与图1所示不同的配置。图1中所示的各组件可以采用硬件、软件或其组合实现。

存储器102可用于存储软件程序以及模块，如本发明实施例中的在用户终端内的浏览器中实现图片编辑的方法及装置对应的程序指令/模块，处理器102通过运行存储在存储器104内的软件程序以及模块，从而执行各种功能应用以及数据处理，即实现上述的在用户终端内的浏览器中实现图片编辑的方法。

存储器102可包括高速随机存储器，还可包括非易失性存储器，如一个或者多个磁性存储装置、闪存、或者其他非易失性固态存储器。在一些实例中，存储器102可进一步包括相对于处理器106远程设置的存储器，这些远程存储器可以通过网络连接至用户终端100。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。处理器106以及其他可能的组件对存储器102的访问可在存储控制器104的控制下进行。

外设接口108将各种输入/输入装置耦合至CPU以及存储器102。处理器106运行存储器102内的各种软件、指令以执行用户终端100的各种功能以及进行数据处理。

在一些实施例中，外设接口108，处理器106以及存储控制器104可以在单个芯片中实现。在其他一些实例中，他们可以分别由独立的芯片实现。

射频模块110用于接收以及发送电磁波，实现电磁波与电信号的相互转换，从而与通讯网络或者其他设备进行通讯。射频模块110可包括各种现有的用于执行这些功能的电路元件，例如，天线、射频收发器、数字信号处理器、加密/解密芯片、用户身份模块（SIM）卡、存储器等等。射频模块110可与各种网络如互联网、企业内部网、无线网络进行通讯或者通过无线网络与其他设备进行通讯。上述的无线网络可包括蜂窝式电话网、无线局域网或者城域网。上述的无线网络可以使用各种通信标准、协议及技术，包括但并不限于全球移动通信系统（Global System for MobileCommunication,GSM）、增强型移动通信技术（Enhanced Data GSMEnvironment,EDGE),宽带码分多址技术（wideband code division multipleaccess,W-CDMA），码分多址技术（Code division access,CDMA）、时分多址技术（time division multiple access,TDMA），蓝牙，无线保真技术（Wireless,Fidelity，WiFi）（如美国电气和电子工程师协会标准IEEE802.11a，IEEE802.11b,IEEE802.11g和/或IEEE802.11n）、网络电话（Voice over internetprotocal,VoIP）、全球微波互联接入（Worldwide Interoperability for MicrowaveAccess，Wi-Max）、其他用于邮件、即时通讯及短消息的协议，以及任何其他合适的通讯协议，甚至可包括那些当前仍未被开发出来的协议。

定位模块112用于获取用户终端100的当前位置。定位模块112的实例包括但不限于全球卫星定位系统（GPS）、基于无线局域网或者移动通信网的定位技术。

摄像模块114用于拍摄照片或者视频。拍摄的照片或者视频可以存储至存储器102内，并可通过射频模块110发送。

音频模块116向用户提供音频接口，其可包括一个或多个麦克风、一个或者多个扬声器以及音频电路。音频电路从外设接口108处接收声音数据，将声音数据转换为电信息，将电信息传输至扬声器。扬声器将电信息转换为人耳能听到的声波。音频电路还从麦克风处接收电信息，将电信号转换为声音数据，并将声音数据传输至外设接口108中以进行进一步的处理。音频数据可以从存储器102处或者通过射频模块110获取。此外，音频数据也可以存储至存储器102中或者通过射频模块110进行发送。在一些实例中，音频模块116还可包括一个耳机播孔，用于向耳机或者其他设备提供音频接口。

触控屏幕118在用户终端100与用户之间同时提供一个输出及输入界面。具体地，触控屏幕118向用户显示视频输出，这些视频输出的内容可包括文字、图形、视频、及其任意组合。一些输出结果是对应于一些用户界面对象。触控屏幕118还接收用户的输入，例如用户的点击、滑动等手势操作，以便用户界面对象对这些用户的输入做出响应。检测用户输入的技术可以是基于电阻式、电容式或者其他任意可能的触控检测技术。触控屏幕118显示单元的具体实例包括但并不限于液晶显示器或发光聚合物显示器。

按键模块120同样提供用户向用户终端100进行输入的接口，用户可以通过按下不同的按键以使用户终端100执行不同的功能。

第一实施例

图2为本发明第一实施例提供的在用户终端内的浏览器中实现图片编辑的方法的流程图。如图2所示，本实施例的在浏览器中实现图片编辑的方法包括以下步骤：

步骤S21，当检测到用户通过浏览器访问的信息中存在图片时，生成图片编辑的触发控件。

具体地，浏览器首先根据用户输入的URL（URL，英语Uniform ResourceLocator，统一资源定位符），从服务器获取网页数据，然后检测获取到的网页数据，若检测出该网页数据中包含图片，则生成如图3所示的用于触发图片编辑事件的触发控件A，并将该触发控件A绘制并显示在该图片的附近。每个图片都可以对应有一个触发控件。触发控件A可以包括不同功能的多个控件。触发控件A可以是透明或半透明的。需要说明的是，图3中只是示意性的绘出触发控件，本发明的具体实施方式并不以触发控件的具体形式为限。

于本发明一具体实施方式中，也可以在检测到鼠标被放置在图片上时，生成触发控件，并将该触发控件显示在该图片的附近。

步骤S22，获取用户通过所述触发控件所触发的图片编辑指令，根据所述图片编辑指令创建编辑框控件。

用户通过触发控件触发图片编辑指令后，可以创建一个编辑框控件，该编辑框控件可以浮在浏览器界面上，可以覆盖浏览器中的该图片，也可以形成在该图片的周边。所述编辑框控件至少可以包括第一编辑区域与第二编辑区域。

步骤S23，将所述图片载入所述第一编辑区域。

当创建好编辑框控件后，提取网页数据中所包含的图片编辑指令指示编辑的图片数据，并将该图片数据绘制在编辑框控件的第一编辑区域。

步骤S24，获取所述用户输入的注释信息，将所述注释信息载入所述第二编辑区域。

用户可以通过触发控件输入对该图片的注释信息，用户输入的注释信息可包括：文字、色块等等。当获取到用户输入的注释信息后，就可以将注释信息载入第二编辑区域显示出来。这样，第一编辑区域内的图片的大小不会被压缩，用户又可以一边看图片一边标注、筛选有用信息等。

本发明实施例提供的在浏览器中实现图片编辑的方法，通过创建编辑框控件，将图片编辑指令指示编辑的图片载入编辑框控件的第一编辑区域，将用户的注释信息载入编辑框控件的第二编辑区域，使得用户无需安装专业图片编辑软件即可通过浏览器编辑图片，并不会破坏原始图片的美感，从而可简化图片编辑的操作步骤，提高图片编辑的效率。

第二实施例

图4为本发明第二实施例提供的在用户终端内的浏览器中实现图片编辑的方法的流程图。如图4所示，本实施例的在浏览器中实现图片编辑的方法包括以下步骤：

步骤S41，当检测到用户通过浏览器访问的信息中存在图片时，生成图片编辑的第一触发控件A1。

此步骤可以参考第一实施例中的相应步骤，这里不再赘述。

步骤S42，获取用户通过所述第一触发控件A1所触发的第一图片编辑指令，生成图片编辑的第二触发控件A2。

如图5所示，第二触发控件A2可包括文字编辑控件（图5中标有“文字备注”的部分）与色块选择控件（图5中标有“添加色块”的部分）。文字编辑控件用于获取用户输入的文字信息，色块选择控件用于获取用户输入的色块信息。

可以理解的，于本发明一具体实施方式中，第二触发控件A2还可包括编辑框控件布局设置控件，用于获取用户输入的编辑框控件布局设置规则，该编辑框控件布局设置规则用于浏览器在后续步骤中配置编辑框控件各组成部分在编辑框控件的位置关系。

步骤S43，获取用户通过所述触发控件所触发的第二图片编辑指令，根据所述第二图片编辑指令创建编辑框控件，并生成第三触发控件A3，所述编辑框控件包括第一编辑区域与第二编辑区域。

第一编辑区域用于载入图片，第二编辑区域用于载入用户输入的注释信息。第一编辑区域与第二编辑区域在编辑框控件中的位置关系可根据预置规则设定，例如，可如图6所示，第一编辑区域位于第二编辑区域的下方。于本发明一具体实施方式中，也可根据用户通过第二触发控件中的编辑框控件布局设置控件所触发的第二图片编辑指令中所包含的第一编辑区域与第二编辑区域在编辑框控件中的位置关系，来配置第一编辑区域与第二编辑区域在编辑框控件中的位置关系，具体位置可以由用户选定，在此不做限定。

第三触发控件A3如图6所示的标有“保存”的框体部分，用于触发保存事件。

步骤S44，将所述图片载入所述第一编辑区域。

此步骤可以参考第一实施例中的相应步骤，这里不再赘述。

步骤S45，获取所述用户输入的注释信息，将所述注释信息载入所述第二编辑区域。

具体地，将根据用户通过所述文字编辑控件所输入的文字信息载入第二编辑区域，或将用户通过所述色块选择控件所选择的色块载入第二编辑区域。由于通过不同的色块可以比文字更能强调出待编辑图片的重要性等级，因此也可将文字信息与色块一起载入第二编辑区域。

于本发明一具体实施方式中，为增强色块的作用，第二编辑区域背景颜色为区别于所述注释信息的颜色，例如：黑色。

步骤S46，获取所述用户通过所述第三触发控件A3所触发的保存指令。

步骤S47，将所述编辑框控件中的内容以图片形式，保存于所述保存指令指示保存的路径。

具体地，将编辑框控件中的所有内容作为一个整体，保存于保存指令指示保存的路径。可以理解的，保存指令指示保存的路径可以为云端服务器中的网络路径，也可为用户终端的本地路径，可以由用户设置或者采用默认的设置。

本发明实施例提供的在浏览器中实现图片编辑的方法，通过创建编辑框控件，将图片编辑指令指示编辑的图片载入编辑框控件的第一编辑区域，将用户的注释信息载入编辑框控件的第二编辑区域，使得用户无需安装专业图片编辑软件即可通过浏览器编辑图片，并不会破坏原始图片的美感，从而可简化图片编辑的操作步骤，提高图片编辑的效率。

第三实施例

图7为本发明第三实施例提供的在用户终端内的浏览器中实现图片编辑的装置的结构示意图。本实施例提供的在浏览器中实现图片编辑的装置可以用于实现第一实施例中的在浏览器中实现图片编辑的方法。如图7所示，在浏览器中实现图片编辑的装置10包括：触发控件生成模块11、编辑框控件创建模块12、图片载入模块13、注释信息载入模块14。

其中，触发控件生成模块11用于当检测到用户通过浏览器访问的信息中存在图片时，生成图片编辑的触发控件。

编辑框控件创建模块12用于获取用户通过所述触发控件生成模块11生成的所述触发控件所触发的图片编辑指令，根据所述图片编辑指令创建编辑框控件，所述编辑框控件包括第一编辑区域与第二编辑区域。

图片载入模块13用于将所述图片载入所述第一编辑区域。

注释信息载入模块14用于获取所述用户输入的注释信息，将所述注释信息载入所述第二编辑区域。

以上各模块可以是由软件代码实现，此时，上述的各模块可存储于存储器102内，如图8所示。以上各模块同样可以由硬件例如集成电路芯片实现。

本实施例对在浏览器中实现图片编辑的装置10的各功能模块实现各自功能的具体过程，请参见上述图1至图6所示实施例中描述的具体内容，此处不再赘述。

本发明实施例提供的在浏览器中实现图片编辑的装置，通过创建编辑框控件，将图片编辑指令指示编辑的图片载入编辑框控件的第一编辑区域，将用户的注释信息载入编辑框控件的第二编辑区域，使得用户无需安装专业图片编辑软件即可通过浏览器编辑图片，并不会破坏原始图片的美感，从而可简化图片编辑的操作步骤，提高图片编辑的效率。

第四实施例

图9为本发明第四实施例提供的在用户终端内的浏览器中实现图片编辑的装置的结构示意图。本实施例提供的在浏览器中实现图片编辑的装置可以用于实现第一实施例中的在浏览器中实现图片编辑的方法。如图9所示，在浏览器中实现图片编辑的装置20包括：触发控件生成模块21、编辑框控件创建模块22、图片载入模块23、注释信息载入模块24、保存指令获取模块25、保存模块26。

触发控件生成模块21用于当检测到用户通过浏览器访问的信息中存在图片时，生成图片编辑的触发控件。

编辑框控件创建模块22用于获取用户通过所述触发控件生成模块21生成的所述触发控件所触发的图片编辑指令，根据所述图片编辑指令创建编辑框控件，所述编辑框控件包括第一编辑区域与第二编辑区域。

图片载入模块23用于将所述图片载入所述第一编辑区域。

注释信息载入模块24用于获取所述用户输入的注释信息，将所述注释信息载入所述第二编辑区域。

保存指令获取模块25用于获取所述用户通过所述触发控件生成模块21生成的所述触发控件所触发的保存指令。

保存模块26用于将所述编辑框控件中的内容以图片形式，保存于所述保存指令指示保存的路径。

优选地，所述图片编辑指令中还包括所述第一编辑区域与所述第二编辑区域在所述编辑框控件中的位置关系。

优选地，所述第二编辑区域的背景颜色为区别于所述注释信息的颜色。

优选地，所述图片编辑的触发控件还包括文字编辑控件，所述注释信息包括根据用户通过所述文字编辑控件所输入的文字信息。

优选地，所述图片编辑的触发控件还包括色块选择控件，所述注释信息包括根据用户通过所述色块选择控件所选择的色块。

本实施例对在浏览器中实现图片编辑的装置20的各功能模块实现各自功能的具体过程，请参见上述图1至图6所示实施例中描述的具体内容，此处不再赘述。

本发明实施例提供的在浏览器中实现图片编辑的装置，通过创建编辑框控件，将图片编辑指令指示编辑的图片载入编辑框控件的第一编辑区域，将用户的注释信息载入编辑框控件的第二编辑区域，使得用户无需安装专业图片编辑软件即可通过浏览器编辑图片，并不会破坏原始图片的美感，从而可简化图片编辑的操作步骤，提高图片编辑的效率。

需要说明的是，本说明书中的各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似的部分互相参见即可。对于装置类实施例而言，由于其与方法实施例基本相似，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者装置不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者装置所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者装置中还存在另外的相同要素。

本领域普通技术人员可以理解实现上述实施例的全部或部分步骤可以通过硬件来完成，也可以通过程序来指令相关的硬件完成，所述的程序可以存储于一种计算机可读存储介质中，上述提到的存储介质可以是只读存储器，磁盘或光盘等。

以上所述，仅是本发明的较佳实施例而已，并非对本发明作任何形式上的限制，虽然本发明已以较佳实施例揭露如上，然而并非用以限定本发明，任何熟悉本专业的技术人员，在不脱离本发明技术方案范围内，当可利用上述揭示的技术内容做出些许更动或修饰为等同变化的等效实施例，但凡是未脱离本发明技术方案内容，依据本发明的技术实质对以上实施例所作的任何简单修改、等同变化与修饰，均仍属于本发明技术方案的范围内。

Claims (12)

1.一种在浏览器中实现图片编辑的方法，其特征在于，包括：

当检测到用户通过浏览器访问的信息中存在图片时，生成图片编辑的触发控件；

获取用户通过所述触发控件所触发的图片编辑指令，根据所述图片编辑指令创建编辑框控件，所述编辑框控件包括第一编辑区域与第二编辑区域；

将所述图片载入所述第一编辑区域；以及

获取所述用户输入的注释信息，将所述注释信息载入所述第二编辑区域。

2.根据权利要求1所述的方法，其特征在于，所述图片编辑指令中还包括所述第一编辑区域与所述第二编辑区域在所述编辑框控件中的位置关系。

3.根据权利要求1所述的方法，其特征在于，所述图片编辑指令还包括保存指令，所述方法进一步包括：

获取所述用户通过所述触发控件所触发的保存指令；

将所述编辑框控件中的内容以图片形式，保存于所述保存指令指示保存的路径。

4.根据权利要求1至3的任一项所述的方法，其特征在于，所述第二编辑区域的背景颜色为区别于所述注释信息的颜色。

5.根据权利要求1至3的任一项所述的方法，其特征在于，所述图片编辑的触发控件还包括文字编辑控件，所述注释信息包括根据用户通过所述文字编辑控件所输入的文字信息。

6.根据权利要求1至3的任一项所述的方法，其特征在于，所述图片编辑的触发控件还包括色块选择控件，所述注释信息包括根据用户通过所述色块选择控件所选择的色块。

7.一种在浏览器中实现图片编辑的装置，其特征在于，包括：

触发控件生成模块，用于当检测到用户通过浏览器访问的信息中存在图片时，生成图片编辑的触发控件；

编辑框控件创建模块，用于获取用户通过所述触发控件生成模块生成的所述触发控件所触发的图片编辑指令，根据所述图片编辑指令创建编辑框控件，所述编辑框控件包括第一编辑区域与第二编辑区域；

图片载入模块，用于将所述图片载入所述第一编辑区域；以及

注释信息载入模块，用于获取所述用户输入的注释信息，将所述注释信息载入所述第二编辑区域。

8.根据权利要求7所述的装置，其特征在于，所述图片编辑指令中还包括所述第一编辑区域与所述第二编辑区域在所述编辑框控件中的位置关系。

9.根据权利要求7所述的装置，其特征在于，还包括：

保存指令获取模块，用于获取所述用户通过所述触发控件生成模块生成的所述触发控件所触发的保存指令；

保存模块，用于将所述编辑框控件中的内容以图片形式，保存于所述保存指令指示保存的路径。

10.根据权利要求7至9的任一项所述的装置，其特征在于，所述第二编辑区域的背景颜色为区别于所述注释信息的颜色。

11.根据权利要求7至9的任一项所述的装置，其特征在于，所述图片编辑的触发控件还包括文字编辑控件，所述注释信息包括根据用户通过所述文字编辑控件所输入的文字信息。

12.根据权利要求7至9的任一项所述的装置，其特征在于，所述图片编辑的触发控件还包括色块选择控件，所述注释信息包括根据用户通过所述色块选择控件所选择的色块。