CN105335925A - 一种图片的裁剪方法和浏览器装置 - Google Patents

Abstract

本发明实施例提供了一种图片的裁剪方法和浏览器装置，以解决图片裁剪过程中耗时较长且浪费资源的问题。所述的方法包括：浏览器接收上传图片并将所述上传图片压缩后显示在当前页面的裁剪区域内；在所述裁剪区域上显示裁剪框，并依据指示信息调整所述裁剪框确定裁剪信息；按照预置公式采用所述裁剪信息计算所述上传图片对应裁剪图片的尺寸信息，并按照所述尺寸信息绘制所述裁剪图片进行预览显示；对所述裁剪图片进行编码，并将编码后的裁剪图片反馈给服务器，以在所述服务器中备份所述裁剪图片。服务器可以对裁剪图片进行备份，在减少数据量的同时，只需将最终裁剪完成的裁剪图片反馈服务器即可，减少了图片的传输时间。

Description

一种图片的裁剪方法和浏览器装置

技术领域

本发明涉及浏览器技术领域，特别是涉及一种图片的裁剪方法和一种浏览器装置。

背景技术

用户使用浏览器浏览网页时，有时一些网页需要上传图片并裁剪后作为用户标识等信息，例如上传头像等。

用户在浏览器中上传图片后，通常会将图片传输给服务器，并且在页面中显示该图片，在确定裁切位置的坐标后将该坐标上传给服务器，然后服务器按照坐标对上传的图片进行裁剪，并返回裁剪后的图片以在页面中显示。

但是，在服务器进行裁剪就需要保证将图片完整的上传至服务器，裁剪后的图片还要反馈给网页显示，图片裁剪前、后传输过程耗时较多，且需要消耗较多的网络带宽资源。

发明内容

本发明实施例所要解决的技术问题是提供一种图片的裁剪方法，以解决图片裁剪过程中耗时较长且浪费资源的问题。

相应的，本发明实施例还提供了一种浏览器装置，用以保证上述方法的实现及应用。

为了解决上述问题，本发明公开了一种图片的裁剪方法，包括：浏览器接收上传图片并将所述上传图片压缩后显示在当前页面的裁剪区域内；在所述裁剪区域上显示裁剪框，并依据指示信息调整所述裁剪框确定裁剪信息；按照预置公式采用所述裁剪信息计算所述上传图片对应裁剪图片的尺寸信息，并按照所述尺寸信息绘制所述裁剪图片进行预览显示；对所述裁剪图片进行编码，并将编码后的裁剪图片反馈给服务器，以在所述服务器中备份所述裁剪图片。

可选的，将所述上传图片压缩后显示在当前页面的裁剪区域内，包括：获取当前页面中裁剪区域的规格信息，并依据所述规格信息对所述上传图片进行等比例压缩；将压缩后的上传图片添加到所述裁剪区域内进行显示。

可选的，所述浏览器接收上传图片之后，还包括：读取所述上传图片的描述信息，并依据所述描述信息检测所述上传图片是否符合图片规格条件；在所述传图片符合图片规格条件时，执行将所述上传图片压缩后显示在当前页面的裁剪区域内的步骤。

可选的，在所述裁剪区域上显示裁剪框，并依据指示信息调整所述裁剪框确定裁剪信息，包括：按照预置裁剪信息生成裁剪框，并将所述裁剪框遮盖在所述裁剪区域内的上传图片上；监听鼠标事件获取对所述裁剪框进行调整的指示信息；依据所述指示信息调整所述裁剪框的大小范围，和/或，调整裁剪框在所述裁切区域上的位置，确定调整后的裁剪信息。

可选的，按照预置公式采用所述裁剪信息计算所述上传图片对应裁剪图片的尺寸信息，包括：当预置公式为第一公式时，按照所述第一公式计算所述裁剪信息对应在所述上传图片中的坐标信息，确定所述上传图片对应裁剪图片的尺寸信息；和/或，当预置公式为第二公式时，按照所述第二公式计算所述裁剪信息对应在压缩后的上传图片中的坐标信息，确定所述上传图片对应裁剪图片的尺寸信息。

可选的，按照所述尺寸信息绘制所述裁剪图片进行预览显示，包括：按照所述尺寸信息对所述上传图片和/或压缩后的上传图片进行裁剪得到绘制的裁剪图片；将所述裁剪图片显示在当前页面的预览区域内。

可选的，所述对所述裁剪图片进行编码，包括：从所述预览区域内获取裁剪图片，并按照预置算法对所述裁剪图片进行编码。

相应的，本发明实施例还公开了一种浏览器装置，包括：接收模块，用于接收上传图片；显示模块，用于将所述上传图片压缩后显示在当前页面的裁剪区域内；裁剪框调整模块，用于在所述裁剪区域上显示裁剪框，并依据指示信息调整所述裁剪框确定裁剪信息；预览显示模块，用于按照预置公式采用所述裁剪信息计算所述上传图片对应裁剪图片的尺寸信息，并按照所述尺寸信息绘制所述裁剪图片进行预览显示；编码并反馈模块，用于对所述裁剪图片进行编码，并将编码后的裁剪图片反馈给服务器，以在所述服务器中备份所述裁剪图片。

可选的，所述显示模块，包括：压缩子模块，用于获取当前页面中裁剪区域的规格信息，并依据所述规格信息对所述上传图片进行等比例压缩；显示子模块，用于将压缩后的上传图片添加到所述裁剪区域内进行显示。

可选的，还包括：检测模块，用于读取所述上传图片的描述信息，并依据所述描述信息检测所述上传图片是否符合图片规格条件；在所述传图片符合图片规格条件时，触发显示模块。

与现有技术相比，本发明实施例包括以下优点：

浏览器接收上传图片并将所述上传图片压缩后显示在当前页面的裁剪区域内；在所述裁剪区域上显示裁剪框，并依据指示信息调整所述裁剪框确定裁剪信息；按照预置公式采用所述裁剪信息计算所述上传图片对应裁剪图片的尺寸信息，并按照所述尺寸信息绘制所述裁剪图片进行预览显示，实现在浏览器中直接对图片进行裁剪。此后对所述裁剪图片进行编码并将编码后的裁剪图片反馈给服务器，从而所述服务器可以对裁剪图片进行备份，在减少数据量的同时，只需将最终裁剪完成的裁剪图片反馈服务器即可，减少了图片的传输时间。

附图说明

图1是本发明的一种图片的裁剪方法实施例的步骤流程图；

图2是图片上传、裁剪示意图；

图3是本发明的一种图片的裁剪方法实施例的步骤流程图；

图4是4(a)和4(b)是裁剪区域示意图；

图5(a)和5(b)是图片裁剪过程的示意图；

图6是本发明一种浏览器装置实施例的结构框图；

图7是本发明一种浏览器装置实施例的可选结构框图。

具体实施方式

为使本发明的上述目的、特征和优点能够更加明显易懂，下面结合附图和具体实施方式对本发明作进一步详细的说明。

本发明实施例的核心构思之一在于，提出一种图片的裁剪方法，以解决图片裁剪过程中耗时较长且浪费资源的问题。其中，浏览器接收上传图片并将所述上传图片压缩后显示在当前页面的裁剪区域内；在所述裁剪区域上显示裁剪框，并依据指示信息调整所述裁剪框确定裁剪信息；按照预置公式采用所述裁剪信息计算所述上传图片对应裁剪图片的尺寸信息，并按照所述尺寸信息绘制所述裁剪图片进行预览显示，实现在浏览器中直接对图片进行裁剪。此后对所述裁剪图片进行编码并将编码后的裁剪图片反馈给服务器，从而所述服务器可以对裁剪图片进行备份，在减少数据量的同时，只需将最终裁剪完成的裁剪图片反馈服务器即可，减少了图片的传输时间。

参照图1，示出了本发明的一种图片的裁剪方法实施例的步骤流程图，具体可以包括如下步骤：

步骤102，浏览器接收上传图片并将所述上传图片压缩后显示在当前页面的裁剪区域内。

用户采用浏览器浏览网页时，有时一些网页需要上传图片并裁剪后作为用户标识，此时浏览器当前开启的页面内上传相应的图片以对图片进行处理，浏览器可以接收到上传图片，然后显示在当前页面的裁剪区域内，裁剪区域由于显示上传图片以供选择裁剪的位置。

由于上传图片通常比较尺寸大，而当前页面中显示上传图片的裁剪区域又比较小，无法显示全部的上传图片，因此可以将上传图片进行压缩，然后再显示在当前页面的裁剪区域内。

步骤104，在所述裁剪区域上显示裁剪框，并依据指示信息调整所述裁剪框确定裁剪信息。

然后在裁剪区域上显示一裁剪框，裁剪框用于确定裁剪的位置，即裁剪框内显示的图片为裁剪后生成的图片，可以通过鼠标、键盘等外设发送指示信息对裁剪框进行调整，如调整裁剪框的大小、位置等，从而确定裁剪信息。

其中，裁剪信息指的是裁剪框在当前压缩后的上传图片的位置信息，通过裁剪信息可以确定裁剪图片的尺寸信息。

步骤106，按照预置公式采用所述裁剪信息计算所述上传图片对应裁剪图片的尺寸信息，并按照所述尺寸信息绘制所述裁剪图片进行预览显示。

本发明实施例中预置了公式计算裁剪图片的尺寸信息，其中，可以依据需求的不同，确定不同尺寸的裁剪图片，例如对上传图片按照一定的比例进行裁剪，又如直接对压缩后的上传图片进行裁剪。

其中，尺寸信息可以是仅采用坐标表示，也可以是通过坐标以及长、宽等信息表示。按照预置公式对裁剪信息进行计算确定所述上传图片对应裁剪图片的尺寸信息。然后按照该尺寸信息绘制所述裁剪图片，如对上传图片或压缩后的上传图片进行裁剪得到裁剪图片，再对裁剪图片进行显示供用户预览。

步骤108，对所述裁剪图片进行编码，并将编码后的裁剪图片反馈给服务器，以在所述服务器中备份所述裁剪图片。

在获取到裁剪图片之后，可以对裁剪图片进行编码，得到编码后的裁剪图片，然后将编码后的裁剪图片反馈给服务器，以在所述服务器中备份所述裁剪图片，以后直接使用该裁剪图片即可，服务器无需再对图片进行裁剪。

如图2所示为一图片上传、裁剪示意图，其中可以捕获用户上传的图片或拖拽的图片等，其中，A为裁剪区域，B为裁剪框，则裁剪框内显示的部分图片即裁剪后保留的图片，裁剪框外灰色覆盖的部分图片即不保留的图片，在调整完裁剪框确定保留的图片后可以点击“提交”按钮，此后即可后去裁剪图片。

综上所述，浏览器接收上传图片并将所述上传图片压缩后显示在当前页面的裁剪区域内；在所述裁剪区域上显示裁剪框，并依据指示信息调整所述裁剪框确定裁剪信息；按照预置公式采用所述裁剪信息计算所述上传图片对应裁剪图片的尺寸信息，并按照所述尺寸信息绘制所述裁剪图片进行预览显示，实现在浏览器中直接对图片进行裁剪。此后对所述裁剪图片进行编码并将编码后的裁剪图片反馈给服务器，从而所述服务器可以对裁剪图片进行备份，在减少数据量的同时，只需将最终裁剪完成的裁剪图片反馈服务器即可，减少了图片的传输时间。

实施例二

在上述实施例的基础上，本实施例继续论述图片的裁剪方法。

本实施例中，采用浏览器的客户端对用户上传的图片进行裁剪，再上传至服务器，以增强用户体验并达到减小服务器压力的作用。其中，浏览器的客户端采用HTML5中Canvas的API(ApplicationProgrammingInterface，应用程序编程接口)进行图片的裁剪。

其中，HTML5(HyperTextMarkupLanguage5)是超过文本标记语言的第五次重大修改，HTML5赋予网页更好的意义和结构。HTML5添加了很多新元素及功能，如图形的绘制(如Canvas)，多媒体内容，更好的页面结构，更好的形式处理等。

Canvas对象表示一个HTML画布元素<canvas>，它没有自己的行为，但是定义了一个API支持脚本化客户端绘图操作，<canvas>即Canvas标签用于定义图形，比如图表和其他图像，该标签基于JavaScript的绘图API。

参照图3，示出了本发明的一种图片的裁剪方法实施例的步骤流程图，具体可以包括如下步骤：

步骤302，浏览器接收上传图片，并读取所述上传图片的描述信息。

步骤304，依据所述描述信息检测所述上传图片是否符合图片规格条件。

浏览器接收上传图片，然后读取图片的描述信息，如采用readFile方法。描述信息用于描述图片的属性信息，如图片名称、大小、类型等。

本实施例预先设定了上传图片的图片规格条件，图片规格条件用于对属性进行限定，例如规定了图片类型、图片的大小范围等。从而可以检测读取的描述信息是否符合所述图片规格条件，由于图片规格条件可能还有多种条件，因此可以针对每一条件分别进行检测，若不符合其中任一条件，即认为其不符合图片规格条件，反之，若各条件均符合则认为符合图片规格条件。

若是，即依据所述描述信息检测所述上传图片符合图片规格条件时，执行步骤306。若否，即依据所述描述信息检测所述上传图片符合图片规格条件时，则结束当前流程，后续可以提示用户上传图片的规格条件并请用户重新上传。

步骤306，获取当前页面中裁剪区域的规格信息，并依据所述规格信息对所述上传图片进行等比例压缩。

步骤308，将压缩后的上传图片添加到所述裁剪区域内进行显示。

在浏览器当前页面中上传图片并裁剪时，当前页面存在一裁剪区域用于显示要裁剪的上传图片。其中，当前页面的裁剪区域通常是固定尺寸的，即具有一定的规格信息，如裁剪区域的长、宽等，而上传图片往往比较大，会大大地超出裁剪区域的范围。因此，可以获取裁剪区域的规格信息，然后按照该规格信息对上传图片进行压缩。

其中，裁剪区域的长宽比可能与上传图片的长宽比不相同，例如裁剪区域为正方形，而上传图片为长方形，此时在对上传图片进行压缩时可以采取等比压缩，即压缩时不改变上传图片原始的长宽比。

然后将压缩后的上传图片添加到所述裁剪区域内进行显示，其中，等比压缩后可以使上传图片长和宽中任一项符合裁剪区域的规格信息，然后将此时另一项可能大于或小于裁剪区域的规格信息，即压缩后的上传图片可能全部显示在裁剪区域中且未覆盖全部的裁剪区域如图4(a)，也可能压缩后的上传图片覆盖了全部的裁剪区域但未完全显示如图4(b)。

步骤310，按照预置裁剪信息生成裁剪框，并将所述裁剪框遮盖在所述裁剪区域内的上传图片上。

监听到裁剪区域内显示了上传图片后，还要确定上传图片中裁剪的位置以对图片进行裁剪，此时要生成一裁剪框遮盖在裁剪区域上，裁剪框内显示的部分图片即裁剪后要保留的图片，裁剪框外遮盖的部分图片即不需保留的图片。

其中，裁剪框也预置了一定的裁剪信息，如裁剪框的初始大小、初始位置等信息。按照该裁剪信息生成裁剪框后，将裁剪框遮盖在裁剪区域内的上传图片上，即将裁剪框定位在裁剪区域内的图片上，裁剪框的大小不能超过压缩后的上传图片的大小，且裁剪框的大小不能超出裁剪区内显示的图片之外。

如图4所示，黑色实线表示的A区域为裁剪区域，“———”型虚线表示的C区域为压缩后的上传图片，“—·—”型虚线表示的B区域为裁剪框，经过压缩后显示在裁剪区域内的图片可能超过裁剪区域的范围如图4(b)，也可能小于裁剪区域的范围如图4(a)，而裁剪框的大小不能超出裁剪区域所显示的图片范围之外。

步骤312，监听鼠标事件获取对所述裁剪框进行调整的指示信息。

步骤314，依据所述指示信息调整所述裁剪框的大小范围，和/或，调整裁剪框在所述裁切区域上的位置，确定调整后的裁剪信息。

为便于用于选择裁剪图片，用户可以通过鼠标对裁剪框进行调整，通过监听鼠标事件就可以获取对裁剪框进行调整的指示信息，依据该指示显示可以调整裁剪框的大小范围，如对裁剪框的长、宽的调整，也可以调整裁剪框在所述裁切区域上的位置，或者两者均进行调整，调整后获取可以获取当前裁剪框的裁剪信息。

由于裁剪框要定位在裁剪区域的图片之上，因此在按照指示信息调整裁剪框时，还要对裁剪框的边界值进行判定，以防止裁剪框超出图片的位置。例如，记录鼠标开始拖动裁剪框的坐标点，确定该坐标点与裁剪框各边框的距离，并确定该坐标点与图片边缘的距离，从而在裁剪框达到图片的边缘时无法继续调整到超出该边缘。

步骤316，按照预置公式采用所述裁剪信息计算所述上传图片对应裁剪图片的尺寸信息。

步骤318，按照所述尺寸信息对所述上传图片和/或压缩后的上传图片进行裁剪得到绘制的裁剪图片。

步骤320，将所述裁剪图片显示在当前页面的预览区域内。

依据需求的不同裁剪图片的尺寸也各不相同，因此在裁剪时可以对上传图片进行裁剪，也可以对压缩后的上传图片进行裁剪等。

本发明一个可选实施例中，按照预置公式采用所述裁剪信息计算所述上传图片对应裁剪图片的尺寸信息，包括以下至少一种方式：当预置公式为第一公式时，按照所述第一公式计算所述裁剪信息对应在所述上传图片中的坐标信息，确定述上传图片对应裁剪图片的尺寸信息；和，当预置公式为第二公式时，按照所述第二公式计算所述裁剪信息对应在压缩后的上传图片中的坐标信息，确定所述上传图片对应裁剪图片的尺寸信息。

当预置公式为第一公式时直接对上传图片进行裁剪，则按照第一公式计算所述裁剪信息对应在所述上传图片中的坐标信息，确定上传图片对应裁剪图片的尺寸信息，如裁剪信息为裁剪框在裁剪区域中的坐标位置，可以将该坐标位置映射到上传图片中确定对应的坐标信息，然后依据该坐标信息确定裁剪图片的尺寸信息，尺寸信息包括裁剪图片的大小、坐标位置等信息，其中大小可以为长、宽的像素值等信息。

当预置公式为第二公式时，按照所述第二公式计算所述裁剪信息对应在压缩后的上传图片中的坐标信息，确定所述上传图片对应裁剪图片的尺寸信息，例如裁剪信息记录的是裁剪框的中心坐标和长、宽等信息，则可以按照裁剪信息计算其在压缩后的上传图片中各边缘的坐标信息，如四个顶点的坐标，然后按照该坐标信息确定所述上传图片对应裁剪图片的尺寸信息。

其中，压缩后的上传图片可以是按照裁剪区域的规格信息进行等比压缩后得到的图片，也可以是按照实际需求进行压缩后得到的图片，本发明实施例对此不作限定。

然后按照尺寸信息对所述上传图片和/或压缩后的上传图片进行裁剪得到绘制的裁剪图片，例如可以调用Canvas的drawImage方法绘制裁剪图片，再将所述裁剪图片显示在当前页面的预览区域内，对裁剪图片进行预览。

其中，可以随着裁剪框的调整实时的对裁剪图片进行绘制并预览，直到用户得到满意的裁剪图片为止。

步骤322，从所述预览区域内获取裁剪图片，并按照预置算法对所述裁剪图片进行编码。

步骤324，将编码后的裁剪图片反馈给服务器，以在所述服务器中备份所述裁剪图片。

监听鼠标事件，当用户点击确认进行裁剪时，可以从预览区域内获取裁剪图片，然后按照预置算法对裁剪图片进行编码，例如调用Canvas的toDataURL方法，生成裁剪图片的base64码，其中，Base64码是用于传输8Bit字节代码的编码方式之一，可用于在HTTP(HTTP-HypertextTransferProtocol，超文本传输协议)环境下传递较长的标识信息。

然后将编码后的裁剪图片传输给服务器，服务器可以对该裁剪图片进行存储，以后需要时直接使用即可，无需服务器端二次裁剪，减小了服务器端的压力。

综上所述，采用HTML5的CanvasAPI技术，可以在拖拽裁剪框的同时，实现查看图片的效果，避免生成图片后用户不满意重新上传的问题。

其次，裁剪后对裁剪图片生成的base64码，相对于原始的上传图片尺寸等都进行了压缩，在传输的过程中，减少了不必要的浪费。

再次，上传后的base64码解码后可以直接生成图片保存在服务器端，无需服务器端二次裁剪，减小了服务器端的压力。

本实施例可以应用于多种领域，例如，在榜单等具有排名信息的应用中上传图片以及小卡片等，又如上传头像模块等。

如图5所示是图片裁剪过程的示意图，用户在上传图片的页面，点击上传图片(或拖拽图片)，会弹出一个包含图片裁剪区域的弹出框，即canvas所在的裁剪区域。

如图5(a)所示，图片会显示在裁剪区域中，监听裁剪区域内有图片后，生成遮盖裁剪框，定位于裁剪区域的图片之上。用户可以拖拽裁剪框，并调整需要裁剪图片的大小，因此可以监听用户鼠标事件，用户对裁剪框的拖拽和拉伸等调整，计算出裁剪框的裁剪信息。

此时，对着裁剪框的调整可以实时计算出裁剪图片的尺寸信息，将计算出的尺寸信息传给canvas的drawImage方法，使其生成预览图片，显示在页面中的预览区域如图5(b)所示。

当用户点击裁剪按钮后，通过监听鼠标事件，调用canvas的toDataURL方法，生成图片的base64码，将其传给服务器端。并且可以将裁剪图片显示在当前应用的相应位置中。

需要说明的是，对于方法实施例，为了简单描述，故将其都表述为一系列的动作组合，但是本领域技术人员应该知悉，本发明实施例并不受所描述的动作顺序的限制，因为依据本发明实施例，某些步骤可以采用其他顺序或者同时进行。其次，本领域技术人员也应该知悉，说明书中所描述的实施例均属于优选实施例，所涉及的动作并不一定是本发明实施例所必须的。

实施例三

在上述实施例的基础上，本实施例还公开了一种浏览器装置。

参照图6，示出了本发明一种浏览器装置实施例的结构框图，具体可以包括如下模块：

接收模块602，用于接收上传图片.

显示模块604，用于将所述上传图片压缩后显示在当前页面的裁剪区域内。

裁剪框调整模块606，用于在所述裁剪区域上显示裁剪框，并依据指示信息调整所述裁剪框确定裁剪信息。

预览显示模块608，用于按照预置公式采用所述裁剪信息计算所述上传图片对应裁剪图片的尺寸信息，并按照所述尺寸信息绘制所述裁剪图片进行预览显示。

编码并反馈模块610，用于对所述裁剪图片进行编码，并将编码后的裁剪图片反馈给服务器，以在所述服务器中备份所述裁剪图片。

综上所述，浏览器接收上传图片并将所述上传图片压缩后显示在当前页面的裁剪区域内；在所述裁剪区域上显示裁剪框，并依据指示信息调整所述裁剪框确定裁剪信息；按照预置公式采用所述裁剪信息计算所述上传图片对应裁剪图片的尺寸信息，并按照所述尺寸信息绘制所述裁剪图片进行预览显示，实现在浏览器中直接对图片进行裁剪。此后对所述裁剪图片进行编码并将编码后的裁剪图片反馈给服务器，从而所述服务器可以对裁剪图片进行备份，在减少数据量的同时，只需将最终裁剪完成的裁剪图片反馈服务器即可，减少了图片的传输时间。

参照图7，示出了本发明一种浏览器装置实施例的可选结构框图，具体可以包括如下模块：

所述显示模块604，包括：压缩子模块60402，用于获取当前页面中裁剪区域的规格信息，并依据所述规格信息对所述上传图片进行等比例压缩；显示子模块60404，用于将压缩后的上传图片添加到所述裁剪区域内进行显示。

检测模块612，用于读取所述上传图片的描述信息，并依据所述描述信息检测所述上传图片是否符合图片规格条件；在所述传图片符合图片规格条件时，触发显示模块。

所述裁剪框调整模块606，包括：生成子模块60602，用于按照预置裁剪信息生成裁剪框，并将所述裁剪框遮盖在所述裁剪区域内的上传图片上；指示获取子模块60604，用于监听鼠标事件获取对所述裁剪框进行调整的指示信息；调整子模块60606，用于依据所述指示信息调整所述裁剪框的大小范围，和/或，调整裁剪框在所述裁切区域上的位置，确定调整后的裁剪信息。

所述预览显示模块608，包括：尺寸确定子模块60802，用于当预置公式为第一公式时，按照所述第一公式计算所述裁剪信息对应在所述上传图片中的坐标信息，确定所述上传图片对应裁剪图片的尺寸信息；和/或，当预置公式为第二公式时，按照所述第二公式计算所述裁剪信息对应在压缩后的上传图片中的坐标信息，确定所述上传图片对应裁剪图片的尺寸信息。

绘制子模块60804，用于按照所述尺寸信息对所述上传图片和/或压缩后的上传图片进行裁剪得到绘制的裁剪图片；预览显示子模块60806，用于将所述裁剪图片显示在当前页面的预览区域内。

所述编码并反馈模块610，用于从所述预览区域内获取裁剪图片，并按照预置算法对所述裁剪图片进行编码。

综上所述，采用HTML5的CanvasAPI技术，可以在拖拽裁剪框的同时，实现查看图片的效果，避免生成后图片用户不满意重新上传的问题。

其次，裁剪后对裁剪图片生成的base64码，相对于原始的上传图片尺寸等都进行了压缩，在传输的过程中，减少了不必要的浪费。

再次，上传后的base64码解码后可以直接生成图片保存在服务器端，无需服务器端二次裁剪，减小了服务器端的压力。

对于装置实施例而言，由于其与方法实施例基本相似，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

本说明书中的各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似的部分互相参见即可。

本领域内的技术人员应明白，本发明实施例的实施例可提供为方法、装置、或计算机程序产品。因此，本发明实施例可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明实施例可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本发明实施例是参照根据本发明实施例的方法、终端设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理终端设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理终端设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理终端设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理终端设备上，使得在计算机或其他可编程终端设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程终端设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

尽管已描述了本发明实施例的优选实施例，但本领域内的技术人员一旦得知了基本创造性概念，则可对这些实施例做出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本发明实施例范围的所有变更和修改。

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

以上对本发明所提供的一种图片的裁剪方法和一种浏览器装置，进行了详细介绍，本文中应用了具体个例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思想；同时，对于本领域的一般技术人员，依据本发明的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本发明的限制。

Claims (10)

1.一种图片的裁剪方法，其特征在于，包括：

浏览器接收上传图片并将所述上传图片压缩后显示在当前页面的裁剪区域内；

在所述裁剪区域上显示裁剪框，并依据指示信息调整所述裁剪框确定裁剪信息；

按照预置公式采用所述裁剪信息计算所述上传图片对应裁剪图片的尺寸信息，并按照所述尺寸信息绘制所述裁剪图片进行预览显示；

对所述裁剪图片进行编码，并将编码后的裁剪图片反馈给服务器，以在所述服务器中备份所述裁剪图片。

2.根据权利要求1所述的方法，其特征在于，将所述上传图片压缩后显示在当前页面的裁剪区域内，包括：

获取当前页面中裁剪区域的规格信息，并依据所述规格信息对所述上传图片进行等比例压缩；

将压缩后的上传图片添加到所述裁剪区域内进行显示。

3.根据权利要求1或2所述的方法，其特征在于，所述浏览器接收上传图片之后，还包括：

读取所述上传图片的描述信息，并依据所述描述信息检测所述上传图片是否符合图片规格条件；

在所述传图片符合图片规格条件时，执行将所述上传图片压缩后显示在当前页面的裁剪区域内的步骤。

4.根据权利要求1所述的方法，其特征在于，在所述裁剪区域上显示裁剪框，并依据指示信息调整所述裁剪框确定裁剪信息，包括：

按照预置裁剪信息生成裁剪框，并将所述裁剪框遮盖在所述裁剪区域内的上传图片上；

监听鼠标事件获取对所述裁剪框进行调整的指示信息；

依据所述指示信息调整所述裁剪框的大小范围，和/或，调整裁剪框在所述裁切区域上的位置，确定调整后的裁剪信息。

5.根据权利要求1所述的方法，其特征在于，按照预置公式采用所述裁剪信息计算所述上传图片对应裁剪图片的尺寸信息，包括：

当预置公式为第一公式时，按照所述第一公式计算所述裁剪信息对应在所述上传图片中的坐标信息，确定所述上传图片对应裁剪图片的尺寸信息；

和/或，

当预置公式为第二公式时，按照所述第二公式计算所述裁剪信息对应在压缩后的上传图片中的坐标信息，确定所述上传图片对应裁剪图片的尺寸信息。

6.根据权利要求1所述的方法，其特征在于，按照所述尺寸信息绘制所述裁剪图片进行预览显示，包括：

按照所述尺寸信息对所述上传图片和/或压缩后的上传图片进行裁剪得到绘制的裁剪图片；

将所述裁剪图片显示在当前页面的预览区域内。

7.根据权利要6所述的方法，其特征在于，所述对所述裁剪图片进行编码，包括：

从所述预览区域内获取裁剪图片，并按照预置算法对所述裁剪图片进行编码。

8.一种浏览器装置，其特征在于，包括：

接收模块，用于接收上传图片；

显示模块，用于将所述上传图片压缩后显示在当前页面的裁剪区域内；

裁剪框调整模块，用于在所述裁剪区域上显示裁剪框，并依据指示信息调整所述裁剪框确定裁剪信息；

预览显示模块，用于按照预置公式采用所述裁剪信息计算所述上传图片对应裁剪图片的尺寸信息，并按照所述尺寸信息绘制所述裁剪图片进行预览显示；

编码并反馈模块，用于对所述裁剪图片进行编码，并将编码后的裁剪图片反馈给服务器，以在所述服务器中备份所述裁剪图片。

9.根据权利要求8所述的装置，其特征在于，所述显示模块，包括：

压缩子模块，用于获取当前页面中裁剪区域的规格信息，并依据所述规格信息对所述上传图片进行等比例压缩；

显示子模块，用于将压缩后的上传图片添加到所述裁剪区域内进行显示。

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

检测模块，用于读取所述上传图片的描述信息，并依据所述描述信息检测所述上传图片是否符合图片规格条件；在所述传图片符合图片规格条件时，触发显示模块。