CN105446625A - 基于浏览器的图片粘贴方法及装置 - Google Patents

Abstract

本发明公开了一种基于浏览器的图片粘贴方法及装置，属于通讯技术领域。装置包括：侦测模块，用于当侦测到用户触发粘贴操作时，调出系统剪贴板并获取剪贴板存储的数据；判定模块，用于判定获取的数据的数据类型是否为图片类型；获取模块，用于当所述数据类型为图片类型时，获取所述剪贴板中图片的地址数据；插入模块，用于生成img元素，将所述图片的地址数据存入所述img元素，将所述img元素插入浏览器页面中以显示所述图片。本发明实现了用户在浏览器页面粘贴上传图片时无需从本地图片选择而可以直接截图粘贴，简化了图片粘贴步骤，提高了用户体验。

Description

基于浏览器的图片粘贴方法及装置

技术领域

本发明涉及通讯技术领域，尤其涉及移动终端中基于浏览器的图片粘贴方法及装置。

背景技术

随着通讯技术的迅猛发展，手机等移动终端为越来越多的用户所拥有，用户在生活中越来越离不开手机，使用手机浏览器浏览和发布信息也已经成为日常习惯。而在日常生活中经常会遇到一种情况：当用户在手机浏览器上写邮件、发布图片信息、网页评论留言等需要粘贴刚刚截图所得的图片时，用户需先将截图所得的图片保存在本地，再选取图片上传，这种方法的操作步骤都比较繁琐、不够便捷，许多情况下用户需要手动将一张张图片选择然后上传到服务器中，这些重复操作将会浪费用户的许多时间。

因此，有必要提供一种基于浏览器的图片粘贴方法及装置，避免上述情况的出现，提高用户体验。

发明内容

本发明的主要目的在于提出一种基于浏览器的图片粘贴方法及装置，旨在解决现有技术中粘贴图片需要从本地图片中选择的问题。

为实现上述目的，本发明提出一种基于浏览器的图片粘贴装置，所述装置包括：侦测模块，用于当侦测到用户触发粘贴操作时，调出系统剪贴板并获取剪贴板存储的数据；判定模块，用于判定获取的数据的数据类型是否为图片类型；获取模块，用于当所述数据类型为图片类型时，获取所述剪贴板中图片的地址数据；插入模块，用于生成img元素，将所述图片的地址数据存入所述img元素，将所述img元素插入浏览器页面中以显示所述图片。

可选地，所述侦测模块包括：侦听单元，用于侦听所述浏览器页面的可编辑元素或全局元素的粘贴事件，当侦测到用户触发粘贴操作时，触发所述可编辑元素或全局元素的粘贴事件；拦截单元，用于拦截用户的粘贴操作，并调用系统剪贴板；获取单元，用于获取所述粘贴事件被触发时系统剪贴板存储的数据。

可选地，所述获取模块包括：读取单元，用于当所述数据类型为图片类型时，读取所述剪贴板中图片的base64数据；生成单元，用于基于所述图片的base64数据生成所述图片的dataURL，其中，所述dataURL为所述图片的地址数据。

可选地，所述获取模块包括：上传单元，用于当所述数据类型为图片类型时，将所述获取的数据上传至服务器以供所述服务器将所述获取的数据生成图片文件并返回带域名地址的所述图片的地址数据；接收单元，用于接收所述服务器返回的带域名地址的所述图片的地址数据。

可选地，所述插入模块包括：创建单元，用于生成img元素，将所述图片的地址数据存入所述img元素的src属性中，插入单元，用于将所述img元素插入所述浏览器页面的所述可编辑元素或全局元素中以显示所述图片。

此外，为实现上述目的，本发明还提出一种基于浏览器的图片粘贴方法，包括以下步骤：当侦测到用户触发粘贴操作时，调出系统剪贴板并获取剪贴板存储的数据；判定获取的数据的数据类型是否为图片类型；当所述数据类型为图片类型时，获取所述剪贴板中图片的地址数据；生成img元素，将所述图片的地址数据存入所述img元素，将所述img元素插入浏览器页面中以显示所述图片。

可选地，所述当侦测到用户触发粘贴操作时，调出系统剪贴板并获取剪贴板存储的数据具体包括：侦听所述浏览器页面的可编辑元素或全局元素的粘贴事件，当侦测到用户触发粘贴操作时，触发所述可编辑元素或全局元素的粘贴事件；拦截用户的粘贴操作，并调用系统剪贴板；获取所述粘贴事件被触发时系统剪贴板存储的数据。

可选地，所述当所述数据类型为图片类型时，获取所述剪贴板中图片的地址数据具体包括：当所述数据类型为图片类型时，读取所述剪贴板中图片的base64数据；基于所述图片的base64数据生成所述图片的dataURL，其中，所述dataURL为所述图片的地址数据。

可选地，所述当所述数据类型为图片类型时，获取所述剪贴板中图片的地址数据具体包括：当所述数据类型为图片类型时，将所述获取的数据上传至服务器以供所述服务器将所述获取的数据生成图片文件并返回带域名地址的所述图片的地址数据；接收所述服务器返回的带域名地址的所述图片的地址数据。

可选地，所述生成img元素，将所述图片的地址数据存入所述img元素，将所述img元素插入浏览器页面中以显示所述图片具体包括：生成img元素，将所述图片的地址数据存入所述img元素的src属性中，将所述img元素插入所述浏览器页面的所述可编辑元素或全局元素中以显示所述图片。

本发明提出的基于浏览器的图片粘贴方法及装置，在侦测模块侦测到用户触发粘贴操作时，调出系统剪贴板并获取剪贴板存储的数据；由判定模块，判定获取的数据的数据类型是否为图片类型；当所述数据类型为图片类型时，获取模块获取所述剪贴板中图片的地址数据；插入模块生成img元素，将所述图片的地址数据存入所述img元素，将所述img元素插入浏览器页面中以显示所述图片。由此实现了在浏览器页面粘贴图片时，可直接从系统剪贴板获取截图所得的图片并进行显示，而无需将截图所得的图片保存于本地，再从本地图片中选择图片进行粘贴，从而极大地简化了用户操作步骤，提升了用户体验。

附图说明

图1为实现本发明各个实施例一个可选的移动终端的硬件结构示意图；

图2为如图1所示的移动终端的无线通信系统示意图；

图3为本发明第一实施例提供的基于浏览器的图片粘贴装置的模块示意图；

图4为本发明第一实施例中移动终端浏览器页面示意图；

图5为本发明第四实施例提供的基于浏览器的图片粘贴方法的流程示意图；

图6为本发明第五实施例提供的基于浏览器的图片粘贴方法的流程示意图；

图7为本发明第六实施例提供的基于浏览器的图片粘贴方法的流程示意图。

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

具体实施方式

应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。

现在将参考附图描述实现本发明各个实施例的移动终端。在后续的描述中，使用用于表示元件的诸如“模块”、“部件”或“单元”的后缀仅为了有利于本发明的说明，其本身并没有特定的意义。因此，"模块"与"部件"可以混合地使用。

移动终端可以以各种形式来实施。例如，本发明中描述的终端可以包括诸如移动电话、智能电话、笔记本电脑、数字广播接收器、PDA(个人数字助理)、PAD(平板电脑)、PMP(便携式多媒体播放器)、导航装置等等的移动终端以及诸如数字TV、台式计算机等等的固定终端。下面，假设终端是移动终端。然而，本领域技术人员将理解的是，除了特别用于移动目的的元件之外，根据本发明的实施方式的构造也能够应用于固定类型的终端。

图1为实现本发明各个实施例一个可选的移动终端的硬件结构示意。

移动终端100可以包括无线通信单元110、用户输入单元120、感测单元130、输出单元140、存储器150、、控制器160和电源单元170等等。图1示出了具有各种组件的移动终端，但是应理解的是，并不要求实施所有示出的组件。可以替代地实施更多或更少的组件。将在下面详细描述移动终端的元件。

无线通信单元110通常包括一个或多个组件，其允许移动终端100与无线通信系统或网络之间的无线电通信。例如，在本发明各实施例中，无线通信单元可以包括广播接收模块111、移动通信模块112和无线互联网模块113中的至少一个。

广播接收模块111经由广播信道从外部广播管理服务器接收广播信号和/或广播相关信息。广播信道可以包括卫星信道和/或地面信道。广播管理服务器可以是生成并发送广播信号和/或广播相关信息的服务器或者接收之前生成的广播信号和/或广播相关信息并且将其发送给终端的服务器。广播信号可以包括TV广播信号、无线电广播信号、数据广播信号等等。而且，广播信号可以进一步包括与TV或无线电广播信号组合的广播信号。广播相关信息也可以经由移动通信网络提供，并且在该情况下，广播相关信息可以由移动通信模块112来接收。广播信号可以以各种形式存在，例如，其可以以数字多媒体广播(DMB)的电子节目指南(EPG)、数字视频广播手持(DVB-H)的电子服务指南(ESG)等等的形式而存在。广播接收模块111可以通过使用各种类型的广播系统接收信号广播。特别地，广播接收模块111可以通过使用诸如多媒体广播-地面(DMB-T)、数字多媒体广播-卫星(DMB-S)、数字视频广播-手持(DVB-H)，前向链路媒体(MediaFLO)的数据广播系统、地面数字广播综合服务(ISDB-T)等等的数字广播系统接收数字广播。广播接收模块111可以被构造为适合提供广播信号的各种广播系统以及上述数字广播系统。经由广播接收模块111接收的广播信号和/或广播相关信息可以存储在存储器160(或者其它类型的存储介质)中。

移动通信模块112将无线电信号发送到基站(例如，接入点、节点B等等)、外部终端以及服务器中的至少一个和/或从其接收无线电信号。这样的无线电信号可以包括语音通话信号、视频通话信号、或者根据文本和/或多媒体消息发送和/或接收的各种类型的数据。

无线互联网模块113支持移动终端的无线互联网接入。该模块可以内部或外部地耦接到终端。该模块所涉及的无线互联网接入技术可以包括WLAN(无线LAN)(Wi-Fi)、Wibro(无线宽带)、Wimax(全球微波互联接入)、HSDPA(高速下行链路分组接入)等等。

用户输入单元120可以根据用户输入的命令生成键输入数据以控制移动终端的各种操作。用户输入单元130允许用户输入各种类型的信息，并且可以包括键盘、锅仔片、触摸板(例如，检测由于被接触而导致的电阻、压力、电容等等的变化的触敏组件)、滚轮、摇杆等等。特别地，当触摸板以层的形式叠加在显示单元151上时，可以形成触摸屏。

感测单元130检测移动终端100的当前状态，(例如，移动终端100的打开或关闭状态)、移动终端100的位置、用户对于移动终端100的接触(即，触摸输入)的有无、移动终端100的取向、移动终端100的加速或减速移动和方向等等，并且生成用于控制移动终端100的操作的命令或信号。例如，当移动终端100实施为滑动型移动电话时，感测单元130可以感测该滑动型电话是打开还是关闭。另外，感测单元130能够检测电源单元190是否提供电力或者接口单元170是否与外部装置耦接。感测单元130可以包括接近传感器1310将在下面结合触摸屏来对此进行描述。

输出单元140被构造为以视觉、音频和/或触觉方式提供输出信号(例如，音频信号、视频信号、警报信号、振动信号等等)。输出单元140可以包括显示单元141、警报单元142等等。

显示单元141可以显示在移动终端100中处理的信息。例如，当移动终端100处于电话通话模式时，显示单元141可以显示与通话或其它通信(例如，文本消息收发、多媒体文件下载等等)相关的用户界面(UI)或图形用户界面(GUI)。当移动终端100处于视频通话模式或者图像捕获模式时，显示单元141可以显示捕获的图像和/或接收的图像、示出视频或图像以及相关功能的UI或GUI等等。

同时，当显示单元141和触摸板以层的形式彼此叠加以形成触摸屏时，显示单元141可以用作输入装置和输出装置。显示单元141可以包括液晶显示器(LCD)、薄膜晶体管LCD(TFT-LCD)、有机发光二极管(OLED)显示器、柔性显示器、三维(3D)显示器等等中的至少一种。这些显示器中的一些可以被构造为透明状以允许用户从外部观看，这可以称为透明显示器，典型的透明显示器可以例如为TOLED(透明有机发光二极管)显示器等等。根据特定想要的实施方式，移动终端100可以包括两个或更多显示单元(或其它显示装置)，例如，移动终端可以包括外部显示单元(未示出)和内部显示单元(未示出)。触摸屏可用于检测触摸输入压力以及触摸输入位置和触摸输入面积。

警报单元142可以提供输出以将事件的发生通知给移动终端100。典型的事件可以包括呼叫接收、消息接收、键信号输入、触摸输入等等。除了音频或视频输出之外，警报单元142可以以不同的方式提供输出以通知事件的发生。例如，警报单元142可以以振动的形式提供输出，当接收到呼叫、消息或一些其它进入通信(incomingcommunication)时，警报单元142可以提供触觉输出(即，振动)以将其通知给用户。通过提供这样的触觉输出，即使在用户的移动电话处于用户的口袋中时，用户也能够识别出各种事件的发生。警报单元142也可以经由显示单元141提供通知事件的发生的输出。

存储器150可以存储由控制器160执行的处理和控制操作的软件程序等等，或者可以暂时地存储己经输出或将要输出的数据(例如，电话簿、消息、静态图像、视频等等)。而且，存储器150可以存储关于当触摸施加到触摸屏时输出的各种方式的振动和音频信号的数据。

存储器150可以包括至少一种类型的存储介质，所述存储介质包括闪存、硬盘、多媒体卡、卡型存储器(例如，SD或DX存储器等等)、随机访问存储器(RAM)、静态随机访问存储器(SRAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、可编程只读存储器(PROM)、磁性存储器、磁盘、光盘等等。而且，移动终端100可以与通过网络连接执行存储器150的存储功能的网络存储装置协作。

控制器160通常控制移动终端的总体操作。例如，控制器160执行与语音通话、数据通信、视频通话等等相关的控制和处理。另外，控制器160可以包括用于再现(或回放)多媒体数据的多媒体模块161，多媒体模块161可以构造在控制器160内，或者可以构造为与控制器160分离。控制器160可以执行模式识别处理，以将在触摸屏上执行的手写输入或者图片绘制输入识别为字符或图像。

电源单元170在控制器160的控制下接收外部电力或内部电力并且提供操作各元件和组件所需的适当的电力。

这里描述的各种实施方式可以以使用例如计算机软件、硬件或其任何组合的计算机可读介质来实施。对于硬件实施，这里描述的实施方式可以通过使用特定用途集成电路(ASIC)、数字信号处理器(DSP)、数字信号处理装置(DSPD)、可编程逻辑装置(PLD)、现场可编程门阵列(FPGA)、处理器、控制器、微控制器、微处理器、被设计为执行这里描述的功能的电子单元中的至少一种来实施，在一些情况下，这样的实施方式可以在控制器160中实施。对于软件实施，诸如过程或功能的实施方式可以与允许执行至少一种功能或操作的单独的软件模块来实施。软件代码可以由以任何适当的编程语言编写的软件应用程序(或程序)来实施，软件代码可以存储在存储器150中并且由控制器160执行。

至此，己经按照其功能描述了移动终端。下面，为了简要起见，将描述诸如折叠型、直板型、摆动型、滑动型移动终端等等的各种类型的移动终端中的滑动型移动终端作为示例。因此，本发明能够应用于任何类型的移动终端，并且不限于滑动型移动终端。

如图1中所示的移动终端100可以被构造为利用经由帧或分组发送数据的诸如有线和无线通信系统以及基于卫星的通信系统来操作。

现在将参考图2描述其中根据本发明的移动终端能够操作的通信系统。

这样的通信系统可以使用不同的空中接口和/或物理层。例如，由通信系统使用的空中接口包括例如频分多址(FDMA)、时分多址(TDMA)、码分多址(CDMA)和通用移动通信系统(UMTS)(特别地，长期演进(LTE))、全球移动通信系统(GSM)等等。作为非限制性示例，下面的描述涉及CDMA通信系统，但是这样的教导同样适用于其它类型的系统。

参考图2，CDMA无线通信系统可以包括多个移动终端100、多个基站(BS)270、基站控制器(BSC)275和移动交换中心(MSC)280。MSC280被构造为与公共电话交换网络(PSTN)290形成接口。MSC280还被构造为与可以经由回程线路耦接到基站270的BSC275形成接口。回程线路可以根据若干己知的接口中的任一种来构造，所述接口包括例如E1/T1、ATM，IP、PPP、帧中继、HDSL、ADSL或xDSL。将理解的是，如图2中所示的系统可以包括多个BSC2750。

每个BS270可以服务一个或多个分区(或区域)，由多向天线或指向特定方向的天线覆盖的每个分区放射状地远离BS270。或者，每个分区可以由用于分集接收的两个或更多天线覆盖。每个BS270可以被构造为支持多个频率分配，并且每个频率分配具有特定频谱(例如，1.25MHz,5MHz等等)。

分区与频率分配的交叉可以被称为CDMA信道。BS270也可以被称为基站收发器子系统(BTS)或者其它等效术语。在这样的情况下，术语"基站"可以用于笼统地表示单个BSC275和至少一个BS270。基站也可以被称为"蜂窝站"。或者，特定BS270的各分区可以被称为多个蜂窝站。

如图2中所示，广播发射器(BT)295将广播信号发送给在系统内操作的移动终端100。如图1中所示的广播接收模块111被设置在移动终端100处以接收由BT295发送的广播信号。在图2中，示出了几个全球定位系统(GPS)卫星300。卫星300帮助定位多个移动终端100中的至少一个。

在图2中，描绘了多个卫星300，但是理解的是，可以利用任何数目的卫星获得有用的定位信息。如图1中所示的GPS模块115通常被构造为与卫星300配合以获得想要的定位信息。替代GPS跟踪技术或者在GPS跟踪技术之外，可以使用可以跟踪移动终端的位置的其它技术。另外，至少一个GPS卫星300可以选择性地或者额外地处理卫星DMB传输。

作为无线通信系统的一个典型操作，BS270接收来自各种移动终端100的反向链路信号。移动终端100通常参与通话、消息收发和其它类型的通信。特定基站270接收的每个反向链路信号被在特定BS270内进行处理。获得的数据被转发给相关的BSC275。BSC提供通话资源分配和包括BS270之间的软切换过程的协调的移动管理功能。BSC275还将接收到的数据路由到MSC280，其提供用于与PSTN290形成接口的额外的路由服务。类似地，PSTN290与MSC280形成接口，MSC与BSC275形成接口，并且BSC275相应地控制BS270以将正向链路信号发送到移动终端100。

基于上述移动终端硬件结构以及通信系统，提出本发明方法各个实施例。

如图3所示，本发明第一实施例提出一种基于浏览器的图片粘贴装置，所述装置包括：

侦测模块300，用于当侦测到用户触发粘贴操作时，调出系统剪贴板并获取剪贴板存储的数据；

具体的，剪贴板是操作系统提供的一个暂存数据并且提供共享的一个模块，也称为数据中转站，可以临时保存剪切和复制的信息，其可以存放的信息种类是多种多样的。剪切或复制时保存在剪贴板上的信息，只有再剪贴或复制另外的信息，或停电、或退出windows，或有意地清除时，才可能更新或清除其内容，即剪贴或复制一次，就可以粘贴多次。因此，用户在本地或浏览器中截取待插入或上传的图片内容后，该图片的数据将被存储在系统剪贴板中，后续侦测模块300在侦测到用户在浏览器页面触发了粘贴操作时，可以通过调用剪贴板而获取其中存储的数据，例如，通过Javascript方法获取剪贴板数据，在本实施例中，该数据即用户截取的图片。

在本实施例中，默认系统剪贴板为目前操作系统中所提供的常用剪贴板，因此其一般只能存储一份数据。可以理解的是，在其他实施例中，若当系统剪贴板可以存储多份数据时，则用户可以对需要的图片内容进行多次剪切而得到多个图片，剪贴板将保存该多个图片，当用户进行粘贴操作时，移动终端可以显示剪贴板当前存储的多份数据并提示用户进行选择，则侦测模块300仅获取用户选择的该份数据。

判定模块310，用于判定获取的数据的数据类型是否为图片类型；

获取模块320，用于当所述数据类型为图片类型时，获取所述剪贴板中图片的地址数据；

具体的，通过Javascript方法获取到剪贴板数据后，判定模块310判定剪贴板的数据内容的类型是否是图片类型，如，通过数据的mime-type属性是否为jpg,png等类型而进行判定。若剪贴板当前的数据内容的数据类型为图片类型，则获取模块320获取剪贴板中图片的地址数据。图片的地址数据可以是本地地址，也可以是服务器返回的外部地址。若直接获取剪贴板的数据进行显示，则该地址为依据该图片的base64数据形成的dataURL，若先将剪贴板的数据上传至服务器形成存储于服务器的图片，则该地址为服务器返回的该图片的外部地址。

插入模块330，用于生成img元素，将所述图片的地址数据存入所述img元素，将所述img元素插入浏览器页面中以显示所述图片。

具体的，得到剪贴板中图片的地址数据后，插入模块330创建一个新的img元素，将上述地址数据存入新增的img元素中，再将该img元素插入到浏览器页面中，由此，插入模块330可以在页面中显示最初用户截取的图片。

请参考图4是本实施例中移动终端浏览器页面的示意图，当用户在所述浏览页面上进行操作时，例如在编辑框编辑评论时想插入刚刚截图或复制得到的某张图片时，当用户执行完截图或复制动作后，剪贴板中已经存储了该张需要插入的图片，后续，当用户在当前浏览器页面，进一步的，在该编辑框上执行了粘贴操作时，侦测模块300会侦测到用户的这个粘贴操作并调用剪贴板获取上面的数据，经过判定模块310确定该数据的数据类型是图片类型后，也即确定剪贴板当前保存的数据是图片后，获取模块320即时获取该图片的地址数据，由插入模块330创建一个新的img元素，将上述地址数据存入这个img元素中，再将该img元素插入到当前浏览器页面，进一步的，插入到该编辑框的对象中。此时，浏览器页面编辑框内即可显示该图片，如图4所示。

进一步的，在本实施例中，侦测模块300具体包括:

侦听单元，用于侦听所述浏览器页面的可编辑元素或全局元素的粘贴事件，当侦测到用户触发粘贴操作时，触发所述可编辑元素或全局元素的粘贴事件；

拦截单元，用于拦截用户的粘贴操作，并调用系统剪贴板；

获取单元，用于获取所述粘贴事件被触发时系统剪贴板存储的数据。

具体的，用户执行截图或复制操作后，侦听单元侦听当前浏览器页面的可编辑元素(contenteditable属性为true的元素即表示该元素可编辑,如input元素、评论框或编辑框等)或全局对象的粘贴事件，当用户操作粘贴功能时可编辑元素或全局元素的粘贴事件被触发，可编辑元素或全局元素被激活，拦截单元拦截用户的粘贴动作，调用系统剪贴板，获取单元获取粘贴事件被触发时剪贴板存储的数据。

进一步的，在本实施例中，插入模块330具体包括:

创建单元，用于生成img元素，将所述图片的地址数据存入所述img元素的src属性中，

插入单元，用于将所述img元素插入所述浏览器页面的所述可编辑元素或全局元素中以显示所述图片。

具体的，浏览器是指可以显示网页服务器或者文件系统的html(超文本标记语言)文件内容，并让用户与这些文件交互的一种软件。其中，在html中，<img>元素的src属性是必需的，它的值是图像文件的URL，也就是引用该图像的文件的绝对路径或相对路径，即图像文件的地址数据。因此，得到剪贴板中图片的地址数据后，创建单元创建一个新的img元素，将上述地址数据存入新增的img元素的src属性中。插入单元再将该img元素插入到浏览器页面中，由此，插入单元可以在页面中显示最初用户截取的图片。

本发明提出的基于浏览器的图片粘贴装置，在侦测模块侦测到用户触发粘贴操作时，调出系统剪贴板并获取剪贴板存储的数据；由判定模块，判定获取的数据的数据类型是否为图片类型；当所述数据类型为图片类型时，获取模块获取所述剪贴板中图片的地址数据；插入模块生成img元素，将所述图片的地址数据存入所述img元素，将所述img元素插入浏览器页面中以显示所述图片。由此实现了在浏览器页面粘贴图片时，可直接从系统剪贴板获取截图所得的图片并进行显示，而无需将截图所得的图片保存于本地，再从本地图片中选择图片进行粘贴，从而极大地简化了用户操作步骤，提升了用户体验。

本发明第二实施例进一步提供了一种基于浏览器的图片粘贴装置。在第二实施例中，所述基于浏览器的图片粘贴装置与第一实施例的区别在于，在本实施例中，所述获取模块320包括：

读取单元，用于当所述数据类型为图片类型时，读取所述剪贴板中图片的base64数据；

生成单元，用于基于所述图片的base64数据生成所述图片的dataURL，其中，所述dataURL为所述图片的地址数据。

具体的，当所获取的剪贴板的数据的数据类型为图片类型时，剪贴板中图片的地址数据，可以有两种表现方式，一种是本地地址，一种是外部地址。本实施例中即是针对本地地址进行说明。在本实施例中，读取单元将读取所述剪贴板中图片的base64数据，由生成单元基于该base64数据生成该图片的dataURlL，从而得到该图片的地址数据。DataURL协议可以将图片“嵌入”到HTML中，在DataURL协议中，图片被转换成base64编码的字符串形式，并存储在URL中，将该URL赋给img元素的src属性，例如：

<imgsrc＝"data:image/gif；base64,R0lGODlhMwAxAIAAAAAAAP///yH5BAAAAAAALAAAAAAzADEAAAK8jI+pBr0PowytzotTtbm/DTqQ6C3hGXElcraA9jIr66ozVpM3nseUvYP1UEHF0FUUHkNJxhLZfEJNvol06tzwrgdLbXsFZYmSMPnHLB+zNJFbq15+SOf50+6rG7lKOjwV1ibGdhHYRVYVJ9Wnk2HWtLdIWMSH9lfyODZoZTb4xdnpxQSEF9oyOWIqp6gaI9pI1Qo7BijbFZkoaAtEeiiLeKn72xM7vMZofJy8zJys2UxsCT3kO229LH1tXAAAOw＝＝">

再将该img元素插入浏览器页面，即可以在浏览器中嵌入该图片，由此实现从剪粘板来粘贴显示图片以及上传图片。

本发明提出的基于浏览器的图片粘贴装置，在侦测模块侦测到用户触发粘贴操作时，调出系统剪贴板并获取剪贴板存储的数据；由判定模块，判定获取的数据的数据类型是否为图片类型；当所述数据类型为图片类型时，获取模块获取所述剪贴板中图片的地址数据；插入模块生成img元素，将所述图片的地址数据存入所述img元素，将所述img元素插入浏览器页面中以显示所述图片。由此实现了在浏览器页面粘贴图片时，可直接从系统剪贴板获取截图所得的图片并进行显示，而无需将截图所得的图片保存于本地，再从本地图片中选择图片进行粘贴，从而极大地简化了用户操作步骤，提升了用户体验。

本发明第三实施例进一步提供了一种基于浏览器的图片粘贴装置。在第三实施例中，所述基于浏览器的图片粘贴装置与第一实施例的区别在于，在本实施例中，所述获取模块320包括：

上传单元，用于当所述数据类型为图片类型时，将所述获取的数据上传至服务器以供所述服务器将所述获取的数据生成图片文件并返回带域名地址的所述图片的地址数据；

接收单元，用于接收所述服务器返回的带域名地址的所述图片的地址数据。

具体的，当所获取的剪贴板的数据的数据类型为图片类型时，剪贴板中图片的地址数据，可以有两种表现方式，一种是本地地址，一种是外部地址。本实施例中将针对外部地址进行说明。在本实施例中，上传单元将所述获取的数据上传至服务器，例如，可以直接触发Ajax方法，通过异步方法将所述获取的数据即图片数据上传到服务器。在服务器端，服务器将收到的图片数据生成图片文件，再由服务器返回带域名地址的该图片的地址数据。接收单元接收该地址数据，例如，可以在浏览器中通过XMLHttpRequest对象(XMLHttpRequest可用于在浏览器后台与服务器交换数据，例如，取回xml数据)得到返回的带域名的图片地址数据，再赋值给新创建的img的src属性，将img元素插入到浏览器页面，实现从剪粘板来粘贴显示图片以及上传图片。

本发明提出的基于浏览器的图片粘贴装置，在侦测模块侦测到用户触发粘贴操作时，调出系统剪贴板并获取剪贴板存储的数据；由判定模块，判定获取的数据的数据类型是否为图片类型；当所述数据类型为图片类型时，获取模块获取所述剪贴板中图片的地址数据；插入模块生成img元素，将所述图片的地址数据存入所述img元素，将所述img元素插入浏览器页面中以显示所述图片。由此实现了在浏览器页面粘贴图片时，可直接从系统剪贴板获取截图所得的图片并进行显示，而无需将截图所得的图片保存于本地，再从本地图片中选择图片进行粘贴，从而极大地简化了用户操作步骤，提升了用户体验。

本发明第四实施例进一步提供一种基于浏览器的图片粘贴方法，请参照图5，所述方法包括步骤：

S500，当侦测到用户触发粘贴操作时，调出系统剪贴板并获取剪贴板存储的数据；

具体的，剪贴板是操作系统提供的一个暂存数据并且提供共享的一个模块，也称为数据中转站，可以临时保存剪切和复制的信息，其可以存放的信息种类是多种多样的。剪切或复制时保存在剪贴板上的信息，只有再剪贴或复制另外的信息，或停电、或退出windows，或有意地清除时，才可能更新或清除其内容，即剪贴或复制一次，就可以粘贴多次。因此，用户在本地或浏览器中截取待插入或上传的图片内容后，该图片的数据将被存储在系统剪贴板中，后续侦测模块300在侦测到用户在浏览器页面触发了粘贴操作时，可以通过调用剪贴板而获取其中存储的数据，例如，通过Javascript方法获取剪贴板数据，在本实施例中，该数据即用户截取的图片。

在本实施例中，默认系统剪贴板为目前操作系统中所提供的常用剪贴板，因此其一般只能存储一份数据。可以理解的是，在其他实施例中，若当系统剪贴板可以存储多份数据时，则用户可以对需要的图片内容进行多次剪切而得到多个图片，剪贴板将保存该多个图片，当用户进行粘贴操作时，移动终端可以显示剪贴板当前存储的多份数据并提示用户进行选择，则侦测模块300仅获取用户选择的该份数据。

S510，判定获取的数据的数据类型是否为图片类型；

S520，当所述数据类型为图片类型时，获取所述剪贴板中图片的地址数据；

具体的，通过Javascript方法获取到剪贴板数据后，判定模块310判定剪贴板的数据内容的类型是否是图片类型，如，通过数据的mime-type属性是否为jpg,png等类型而进行判定。若剪贴板当前的数据内容的数据类型为图片类型，则获取模块320获取剪贴板中图片的地址数据。图片的地址数据可以是本地地址，也可以是服务器返回的外部地址。若直接获取剪贴板的数据进行显示，则该地址为依据该图片的base64数据形成的dataURL，若先将剪贴板的数据上传至服务器形成存储于服务器的图片，则该地址为服务器返回的该图片的外部地址。

S530，生成img元素，将所述图片的地址数据存入所述img元素，将所述img元素插入浏览器页面中以显示所述图片。

具体的，得到剪贴板中图片的地址数据后，插入模块330创建一个新的img元素，将上述地址数据存入新增的img元素中，再将该img元素插入到浏览器页面中，由此，插入模块330可以在页面中显示最初用户截取的图片。

请参考图4是本实施例中移动终端浏览器页面的示意图，当用户在所述浏览页面上进行操作时，例如在编辑框编辑评论时想插入刚刚截图或复制得到的某张图片时，当用户执行完截图或复制动作后，剪贴板中已经存储了该张需要插入的图片，后续，当用户在当前浏览器页面，进一步的，在该编辑框上执行了粘贴操作时，侦测模块300会侦测到用户的这个粘贴操作并调用剪贴板获取上面的数据，经过判定模块310确定该数据的数据类型是图片类型后，也即确定剪贴板当前保存的数据是图片后，获取模块320即时获取该图片的地址数据，由插入模块330创建一个新的img元素，将上述地址数据存入这个img元素中，再将该img元素插入到当前浏览器页面，进一步的，插入到该编辑框的对象中。此时，浏览器页面编辑框内即可显示该图片，如图4所示。

进一步的，在本实施例中，步骤S500具体包括以下步骤:

S501：侦听所述浏览器页面的可编辑元素或全局元素的粘贴事件，当侦测到用户触发粘贴操作时，触发所述可编辑元素或全局元素的粘贴事件；

S502：拦截用户的粘贴操作，并调用系统剪贴板；

S503：获取所述粘贴事件被触发时系统剪贴板存储的数据。

具体的，用户执行截图或复制操作后，侦听单元侦听当前浏览器页面的可编辑元素(contenteditable属性为true的元素即表示该元素可编辑,如input元素、评论框或编辑框等)或全局对象的粘贴事件，当用户操作粘贴功能时可编辑元素或全局元素的粘贴事件被触发，可编辑元素或全局元素被激活，拦截单元拦截用户的粘贴动作，调用系统剪贴板，获取单元获取粘贴事件被触发时剪贴板存储的数据。

进一步的，在本实施例中，步骤S530具体包括以下步骤:

S531：用于生成img元素，将所述图片的地址数据存入所述img元素的src属性中，

S531：将所述img元素插入所述浏览器页面的所述可编辑元素或全局元素中以显示所述图片。

具体的，浏览器是指可以显示网页服务器或者文件系统的html(超文本标记语言)文件内容，并让用户与这些文件交互的一种软件。其中，在html中，<img>元素的src属性是必需的，它的值是图像文件的URL，也就是引用该图像的文件的绝对路径或相对路径，即图像文件的地址数据。因此，得到剪贴板中图片的地址数据后，创建单元创建一个新的img元素，将上述地址数据存入新增的img元素的src属性中。插入单元再将该img元素插入到浏览器页面中，由此，插入单元可以在页面中显示最初用户截取的图片。

本发明提出的基于浏览器的图片粘贴方法，在侦测到用户触发粘贴操作时，调出系统剪贴板并获取剪贴板存储的数据；判定获取的数据的数据类型是否为图片类型；当所述数据类型为图片类型时，获取所述剪贴板中图片的地址数据；生成img元素，将所述图片的地址数据存入所述img元素，将所述img元素插入浏览器页面中以显示所述图片。由此实现了在浏览器页面粘贴图片时，可直接从系统剪贴板获取截图所得的图片并进行显示，而无需将截图所得的图片保存于本地，再从本地图片中选择图片进行粘贴，从而极大地简化了用户操作步骤，提升了用户体验。

本发明第五实施例进一步提供了一种基于浏览器的图片粘贴方法。在第五实施例中，所述基于浏览器的图片粘贴方法与第四实施例的区别在于，在本实施例中，所述步骤S520包括以下步骤：

S521，当所述数据类型为图片类型时，读取所述剪贴板中图片的base64数据；

S522，基于所述图片的base64数据生成所述图片的dataURL，其中，所述dataURL为所述图片的地址数据。

具体的，当所获取的剪贴板的数据的数据类型为图片类型时，剪贴板中图片的地址数据，可以有两种表现方式，一种是本地地址，一种是外部地址。本实施例中即是针对本地地址进行说明。在本实施例中，读取单元将读取所述剪贴板中图片的base64数据，由生成单元基于该base64数据生成该图片的dataURlL，从而得到该图片的地址数据。DataURL协议可以将图片“嵌入”到HTML中，在DataURL协议中，图片被转换成base64编码的字符串形式，并存储在URL中，将该URL赋给img元素的src属性，例如：

<imgsrc＝"data:image/gif；base64,R0lGODlhMwAxAIAAAAAAAP///yH5BAAAAAAALAAAAAAzADEAAAK8jI+pBr0PowytzotTtbm/DTqQ6C3hGXElcraA9jIr66ozVpM3nseUvYP1UEHF0FUUHkNJxhLZfEJNvol06tzwrgdLbXsFZYmSMPnHLB+zNJFbq15+SOf50+6rG7lKOjwV1ibGdhHYRVYVJ9Wnk2HWtLdIWMSH9lfyODZoZTb4xdnpxQSEF9oyOWIqp6gaI9pI1Qo7BijbFZkoaAtEeiiLeKn72xM7vMZofJy8zJys2UxsCT3kO229LH1tXAAAOw＝＝">

再将该img元素插入浏览器页面，即可以在浏览器中嵌入该图片，由此实现从剪粘板来粘贴显示图片以及上传图片。

本发明提出的基于浏览器的图片粘贴方法，在侦测到用户触发粘贴操作时，调出系统剪贴板并获取剪贴板存储的数据；判定获取的数据的数据类型是否为图片类型；当所述数据类型为图片类型时，获取所述剪贴板中图片的地址数据；生成img元素，将所述图片的地址数据存入所述img元素，将所述img元素插入浏览器页面中以显示所述图片。由此实现了在浏览器页面粘贴图片时，可直接从系统剪贴板获取截图所得的图片并进行显示，而无需将截图所得的图片保存于本地，再从本地图片中选择图片进行粘贴，从而极大地简化了用户操作步骤，提升了用户体验。

本发明第六实施例进一步提供了一种基于浏览器的图片粘贴方法。在第六实施例中，所述基于浏览器的图片粘贴方法与第四实施例的区别在于，在本实施例中，所述步骤S520包括以下步骤：

S523，当所述数据类型为图片类型时，将所述获取的数据上传至服务器以供所述服务器将所述获取的数据生成图片文件并返回带域名地址的所述图片的地址数据；

S524，接收所述服务器返回的带域名地址的所述图片的地址数据。

具体的，当所获取的剪贴板的数据的数据类型为图片类型时，剪贴板中图片的地址数据，可以有两种表现方式，一种是本地地址，一种是外部地址。本实施例中将针对外部地址进行说明。在本实施例中，上传单元将所述获取的数据上传至服务器，例如，可以直接触发Ajax方法，通过异步方法将所述获取的数据即图片数据上传到服务器。在服务器端，服务器将收到的图片数据生成图片文件，再由服务器返回带域名地址的该图片的地址数据。接收单元接收该地址数据，例如，可以在浏览器中通过XMLHttpRequest对象(XMLHttpRequest可用于在浏览器后台与服务器交换数据，例如，取回xml数据)得到返回的带域名的图片地址数据，再赋值给新创建的img的src属性，将img元素插入到浏览器页面，实现从剪粘板来粘贴显示图片以及上传图片。

本发明提出的基于浏览器的图片粘贴方法，在侦测到用户触发粘贴操作时，调出系统剪贴板并获取剪贴板存储的数据；判定获取的数据的数据类型是否为图片类型；当所述数据类型为图片类型时，获取所述剪贴板中图片的地址数据；生成img元素，将所述图片的地址数据存入所述img元素，将所述img元素插入浏览器页面中以显示所述图片。由此实现了在浏览器页面粘贴图片时，可直接从系统剪贴板获取截图所得的图片并进行显示，而无需将截图所得的图片保存于本地，再从本地图片中选择图片进行粘贴，从而极大地简化了用户操作步骤，提升了用户体验。

需要说明的是，在本文中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者装置不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者装置所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括该要素的过程、方法、物品或者装置中还存在另外的相同要素。

上述本发明实施例序号仅仅为了描述，不代表实施例的优劣，在不冲突的情况下，本发明实施例及实施例中的特征可以相互组合实施。

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

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

Claims (10)

1.一种基于浏览器的图片粘贴装置，其特征在于，所述装置包括：

侦测模块，用于当侦测到用户触发粘贴操作时，调出系统剪贴板并获取剪贴板存储的数据；

判定模块，用于判定获取的数据的数据类型是否为图片类型；

获取模块，用于当所述数据类型为图片类型时，获取所述剪贴板中图片的地址数据；

插入模块，用于生成img元素，将所述图片的地址数据存入所述img元素，将所述img元素插入浏览器页面中以显示所述图片。

2.根据权利要求1所述的图片粘贴装置，其特征在于，所述侦测模块包括：

侦听单元，用于侦听所述浏览器页面的可编辑元素或全局元素的粘贴事件，当侦测到用户触发粘贴操作时，触发所述可编辑元素或全局元素的粘贴事件；

拦截单元，用于拦截用户的粘贴操作，并调用系统剪贴板；

获取单元，用于获取所述粘贴事件被触发时系统剪贴板存储的数据。

3.根据权利要求1所述的图片粘贴装置，其特征在于，所述获取模块包括：

读取单元，用于当所述数据类型为图片类型时，读取所述剪贴板中图片的base64数据；

生成单元，用于基于所述图片的base64数据生成所述图片的dataURL，其中，所述dataURL为所述图片的地址数据。

4.根据权利要求1所述的图片粘贴装置，其特征在于，所述获取模块包括：

上传单元，用于当所述数据类型为图片类型时，将所述获取的数据上传至服务器以供所述服务器将所述获取的数据生成图片文件并返回带域名地址的所述图片的地址数据；

接收单元，用于接收所述服务器返回的带域名地址的所述图片的地址数据。

5.根据权利要求2所述的图片粘贴装置，其特征在于，所述插入模块包括：

创建单元，用于生成img元素，将所述图片的地址数据存入所述img元素的src属性中；

插入单元，用于将所述img元素插入所述浏览器页面的所述可编辑元素或全局元素中以显示所述图片。

6.一种基于浏览器的图片粘贴方法，其特征在于，所述方法包括：

当侦测到用户触发粘贴操作时，调出系统剪贴板并获取剪贴板存储的数据；

判定获取的数据的数据类型是否为图片类型；

当所述数据类型为图片类型时，获取所述剪贴板中图片的地址数据；以及

生成img元素，将所述图片的地址数据存入所述img元素，将所述img元素插入浏览器页面中以显示所述图片。

7.根据权利要求6所述的图片粘贴方法，其特征在于，所述当侦测到用户触发粘贴操作时，调出系统剪贴板并获取剪贴板存储的数据具体包括：

侦听所述浏览器页面的可编辑元素或全局元素的粘贴事件，当侦测到用户触发粘贴操作时，触发所述可编辑元素或全局元素的粘贴事件；

拦截用户的粘贴操作，并调用系统剪贴板；

获取所述粘贴事件被触发时系统剪贴板存储的数据。

8.根据权利要求6所述的图片粘贴方法，其特征在于，所述当所述数据类型为图片类型时，获取所述剪贴板中图片的地址数据具体包括：

当所述数据类型为图片类型时，读取所述剪贴板中图片的base64数据；

基于所述图片的base64数据生成所述图片的dataURL，其中，所述dataURL为所述图片的地址数据。

9.根据权利要求6所述的图片粘贴方法，其特征在于，所述当所述数据类型为图片类型时，获取所述剪贴板中图片的地址数据具体包括：

当所述数据类型为图片类型时，将所述获取的数据上传至服务器以供所述服务器将所述获取的数据生成图片文件并返回带域名地址的所述图片的地址数据；

接收所述服务器返回的带域名地址的所述图片的地址数据。

10.根据权利要求7所述的图片粘贴方法，其特征在于，所述生成img元素，将所述图片的地址数据存入所述img元素，将所述img元素插入浏览器页面中以显示所述图片具体包括：

生成img元素，将所述图片的地址数据存入所述img元素的src属性中；

将所述img元素插入所述浏览器页面的所述可编辑元素或全局元素中以显示所述图片。