专利名称：在线编辑图片的方法和装置的制作方法
技术领域：
本发明涉及网络数据处理技术，尤其涉及一种在线编辑图片的方法和装置。
背景技术：
随着互联网技术的发展，业界通过各种网络应用技术开发出了越来越丰富的互联网应用，满足了互联网用户的不断需求。在许多网络应用中都需要使用网络图片，例如在注册用户的头像中需要使用网络图片。由于这些网络图片的显示尺寸和大小有比较严格的要求，因此需要对原始图片进行处理才能作为网络图片使用。目前大部分网络应用系统中只是对原始图片进行相对压缩处理后，将压缩后的图片作为用户头像的网络图片，不具备在线(即在网页)对原始图片的编辑功能。目前也出现了能够在网页中对图片进行编辑的技术，其主要技术方案是通过flash插件实现图片的编辑和预览功能，用户通过浏览器访问网络应用系统的页面时，需要从服务器下载该flash插件并加载到浏览器中，最后浏览器利用该flash插件编辑原始图片，最后再把编辑好的图片上传给服务器作为网络图片使用，例如作为用户头像使用。现有技术的缺点:—)兼容性差。所述通过Flash插件实现的在线编辑图片的方案，严重依赖于浏览器和flash的版本，对于低版本的浏览器和flash，则无法正常使用所述在线编辑图片的功能。另外某些应用广泛的便携智能终端也缺乏对flash的支持，例如目前广泛应该的iPad平板电脑不支持flash,因此,flash插件实现的在线图片编辑功能在iPad等便携智能终端的网页访问中完全无法使用。二)处理速度和效率差。Flash插件编译出来体积会相对于纯粹的网页脚本大得多，用户需要下载这个插件才可以使用，在网页传输中会大大影响网络速度，进而影响处理速度，中间很有可能出现停滞等待的情况；并且对于电脑操作系统老旧、浏览器版本较低(如IE6)的情况下，flash插件的处理速度和效率非常差。
发明内容
有鉴于此，本发明的主要目的在于提供一种在线编辑图片的方法和装置，以提高在线编辑图片功能的兼容性、处理速度和处理效率。本发明的技术方案是这样实现的:一种在线编辑图片的方法，包括:服务器端根据客户端的指令将待编辑图片传输给客户端展示；客户端生成编辑框并置于所述待编辑图片之上，并监听对所述编辑框的操作指令，根据监听到的操作指令对所述编辑框进行移动和缩放；客户端将所述编辑框在所述待编辑图片上的相对区域参数上传给服务器；服务器根据所述相对区域参数编辑处理所述待编辑图片，生成最终图片。
一种在线编辑图片的装置，该装置包括:客户端的指令发起模块，用于监听对图片的指令并通知服务器；服务器的图片传输模块，用于将待编辑图片传输给客户端；客户端的图片展示模块，用于展示所述待编辑图片；客户端的编辑框处理模块，用于生成编辑框置于所述待编辑图片之上，并监听对所述编辑框的操作指令，根据监听到的操作指令对所述编辑框进行移动和缩放；客户端的参数上传模块，用于将所述编辑框在所述待编辑图片上的相对区域参数上传给服务器；服务器的图片编辑处理模块，用于根据所述相对区域参数编辑处理所述待编辑图片，生成最终图片。与现有技术相比，本发明利用客户端展示图片和编辑框，并接收指令展示编辑框的调整状况，调整好后将相关的编辑框在待编辑图片上的相对区域参数上传给服务器，由服务器根据这些参数对图片进行实质的编辑处理。本发明客户端的所有操作都可以通过纯客户端脚本技术如javascript来完成，因此可以不借助任何插件(如flash),通过客户端和服务器的配合完成图片的在线编辑功能，可以提高在线编辑图片功能的兼容性，保证了目前大多数浏览器均可正常进行图片的在线编辑，无需考虑用户安装的flash插件版本。同时，由于不需要下载flash插件，也不受操作系统和flash版本的影响，因此本发明在线编辑图片的速度和处理效率也得到了提高。
图1为本发明所述在线编辑图片的方法的一种流程图；图2为显示待编辑图片以及默认编辑框的示意图；图3为编辑区域和预览区域的初始示意图；图4为进行编辑操作时编辑区域和预览区域的示意图；图5为本发明所述在线编辑图片的装置的一种组成示意图；图6为本发明所述在线编辑图片的装置的另一种组成示意图；图7为所述预览模块的内部组成图。
具体实施例方式下面结合附图及具体实施例对本发明再作进一步详细的说明。本发明的核心技术方案为:服务器端根据客户端的编辑指令将待编辑图片传输给客户端展示；客户端生成编辑框并置于所述待编辑图片之上，并监听对所述编辑框的操作指令，根据监听到的操作指令对所述编辑框进行移动和缩放；客户端将所述编辑框在所述待编辑图片上的相对区域参数上传给服务器；服务器根据所述相对区域参数编辑处理所述待编辑图片，生成最终图片。本发明中，所述的客户端为可以是浏览器，也可以是其他可以浏览网页的客户端软件。本发明客户端的所有操作都可以通过纯客户端脚本技术如javascript来完成。下面实施例中，就是利用javascript脚本技术实现客户端的所有操作,从而避免使用flash。下面以在线编辑用户头像图片为例对本发明进行说明。
图1为本发明所述在线编辑图片的方法的一种实施流程图，参见图1，该流程包括:步骤101、客户端(也可以称之为前端)监听到用户的图片上传指令，根据该指令将本地原始图片上传到服务器。此原始图片可以是任意尺寸的图片。步骤102、服务器的计算机图形接口标准(CGI)模块将该原始图片缩放为预定尺寸的待编辑图片；步骤103、服务器将所述预定尺寸的待编辑图片传输给客户端。本说明书所述的待编辑图片可以为预定的尺寸，例如本实施例中为200*200像素，所有的待编辑图片的尺寸都是这个预定尺寸。本实施例中，该待编辑图片由用户上传提供，有服务器的CGI模块将其缩放为200*200像素的尺寸，该200*200像素的图片按照原始图片长和宽中的最大值为200像素来进行约束长宽比例的压缩，保证图像比例不变。在其他实施例中，所述待编辑图片也可以由服务方提供，统一制作成预定尺寸的图片存储在服务器，用户编辑头像图片时可以直接从服务器提供的图片中选择一个作为待编辑图片，由服务器将待编辑图片传输给客户端进行后续的处理。步骤104、如图2所示，客户端显示所述待编辑图片201，并生成编辑框202并置于所述待编辑图片之上。所述编辑框202的大小可以是一个默认大小，如90*90像素。所述编辑框的具体实现方法可以是:创建一个默认大小(90*90像素)的盒子模型，设置成透明，再在四边加上虚线框作为默认编辑框。步骤105、客户端监听对所述编辑框的操作指令，根据监听到的操作指令对所述编辑框进行移动和缩放。本步骤中，可以通过javascript拖拽技术实现所述虚线框的移动,这样编辑框就可以相对于背景截取不同区域的图片。同时，可以通过javascript中的JSresize技术，实现所述编辑框虚线框的大小调整，这样编辑框就可以获取到相对于原默认编辑框(90*90像素)的缩放比例。步骤106、在对所述编辑框进行移动和缩放的同时，预览最终图片的效果。所述预览最终图片的效果的实现方法具体包括:如图3所示，客户端在一预览区域，如图中右侧区域301，显示与所述待编辑图片相同的预览图片。此处最终图片的效果有几个就显示几个预览图片，例如本图3中有两种最终图片的效果，一个是方形效果一个是圆形效果，因此显示了两个预览图片。根据最终需要显示的效果，在该预览区域生成对应的遮罩层至于该预览图片之上，例如本图3中生成了两个遮罩层，一个为透明区域为方形的遮罩层302，另一个为透明区域为圆形的遮罩层303。所述遮罩层中存在与最终图片的形状和大小相同的透明区域，此处所述最终图片的大小为90*90像素的方形或90*90像素的圆形，所述透明区域的大小同样也是90*90像素的方形或90*90像素的圆形，且该透明区域与预览图片相对位置和所述编辑框与待编辑图片的相对位置相同。当客户端在根据监听到的操作指令对所述编辑框进行移动和缩放时，在所述预览区域，同步地按照移动参数反向移动遮罩层下的所述预览图片，按照缩放参数反向缩放遮罩层下的所述预览图片，从而可以实现在所述透明区域可以同步地看到最终图片的效果。
如图3所示，所述移动参数具体可以为所述编辑框基点304( —般为左上点)与所述待编辑图片305的相对坐标(X，Y)，所述缩放参数为缩放调整后的编辑框的大小与最初默认编辑框的大小(此处为90*90像素)的比例(Scale)。如图4所示，在调整所述预览图片时，由于遮罩层不动，因此需要反向调整。例如:当用户将所述编辑框向左上方移动时，则将预览图片向180度相反的方向移动，当用户放大所述编辑框时，则按照相反的比例将预览图片缩小，以此类推，从而可在所述遮罩层的透明区域可以实时看到最终的图片效果，如方形效果如图4的402所示，圆形效果如图4中的403所示。本实施例中，所述遮罩层可以直接利用网页的文本标记语言(HTML, HypertextMarkup Language)的元素来实现。但是有些浏览器(如IE6、7、8)对于某些特殊形状(如圆形)的透明区域并不支持采用HTML元素来实现，因此在另一种实施例中，可以用图片实现所述圆形遮罩层，即所述遮罩层为一张具有圆形透明区域、四周为不透明区域的图片，采用这种图片遮罩层可以兼容IE6、7、8等浏览器。当然本步骤106的预览操作为可选操作，也可以省略。步骤107、当客户端监测到用户点击了如图3所示的确定按钮306后，将所述编辑框在所述待编辑图片上的相对区域参数上传给服务器。在本实施例中，所述相对区域参数包括:移动参数即所述编辑框的基点与所述待编辑图片基点的相对坐标信息(X，Y)、以及缩放参数即所述编辑框相对于原始大小的缩放比例Scale，另外，还需要将待编辑图片的标识(如待编辑图片的路径)上传给服务器。步骤108、服务器根据待编辑图片的标识找到服务器上保存的所述200*200像素的待编辑图片，并由所述CGI模块根据所述相对区域参数编辑处理该待编辑图片，生成最终图片。具体时按照所述相对区域参数计算出需要裁剪的区域，即图4中所述编辑框401的区域，按照该区域和最终需要的显示的形状裁剪所述待编辑图片，并生成预定尺寸的最终图片，例如此实施例的最终图片为90*90像素，生成了 90*90像素的方形图片和90*90像素的圆形图片，其效果分别如图4的402和403所示。步骤109 110、CGI模块可以进一步在一存储服务器上保存所述200*200像素的待编辑图片、所述最终图片即90*90像素的方形图片和90*90像素的圆形图片，在后续收到应用指令后，将所保存的最终图片发送到该应用指令对应的场景中。例如如果收到用户触发的针对某个最终图片(方形或圆形)的头像替换指令，则可以将对应的方形或圆形图片发送到头像替换场景中，生成新的用户头像。步骤111 112、CGI模块还可以进一步在存储服务器上保存所述编辑框在所述待编辑图片上的相对区域参数，即本次编辑后:所述编辑框的基点与所述待编辑图片基点的相对坐标信息(X，Y)、以及所述编辑框相对于原始大小的缩放比例Scale，保存方式可以是将(X，Y，Scale)这三个参数放于图片的名称信息上；当客户端再次监测到对所述待编辑图片的编辑指令后，根据所保存的所述编辑框在所述待编辑图片上的相对区域参数，还原上次编辑后所述编辑框在所述待编辑图片上的大小和位置。基于上述方法，本发明还公开了一种在线编辑图片的装置。图5为本发明所述在线编辑图片的装置的一种组成示意图。参见图5，该装置包括:客户端的指令发起模块501，用于监听对图片的指令并通知服务器；
服务器的图片传输模块502，用于将待编辑图片传输给客户端；客户端的图片展示模块503，用于展示所述待编辑图片；客户端的编辑框处理模块504，用于生成编辑框置于所述待编辑图片之上，并监听对所述编辑框的操作指令，根据监听到的操作指令对所述编辑框进行移动和缩放；客户端的参数上传模块505，用于将所述编辑框在所述待编辑图片上的相对区域参数上传给服务器；服务器的图片编辑处理模块506，用于根据所述相对区域参数编辑处理所述待编辑图片，生成最终图片。图6为本发明所述在线编辑图片的装置的另一种组成示意图。参见图6，所述客户端的指令发起模块501中可以进一步包括:图片上传模块，用于将本地原始图片上传给服务器；所述装置进一步包括:服务器的图片缩放模块507，用于所述客户端上传的原始图片缩放为预定尺寸的待编辑图片，将该待编辑图片发送给服务器的图片传输模块502，图片传输模块502再将该经过缩放后的待编辑图片传输给客户端展示。该装置还可以进一步包括客户端的预览模块508，图7为该预览模块的内部组成图，参见图7，其中具体包括:预览图片显示模块581，用于在一预览区域显示与所述待编辑图片相同的预览图片;遮罩层模块582，用于在所述预览区域生成一遮罩层至于所述预览图片之上，该遮罩层中存在与最终图片的形状和大小相同的透明区域，且该透明区域与预览图片相对位置和所述编辑框与待编辑图片的相对位置相同；预览图片调整模块583，用于根据编辑框处理模块监听到的对所述编辑框的移动和缩放指令，按照移动参数反向移动所述预览图片，按照缩放参数反向缩放所述预览图片。参见图6，该装置还可以进一步包括:服务器的图片存储模块，在本实施例中可以为一独立的存储服务器509，用于存储所述待处理图片、最终图片以及所述编辑框在该待编辑图片上的相对区域参数。本发明客户端的所有操作都可以通过纯客户端脚本技术如javascript来完成，因此可以不借助任何插件(如flash)，通过客户端和服务器的配合完成图片的在线编辑功能，可以提高在线编辑图片功能的兼容性，保证兼容了目前大多数浏览器如IE6、7、8、9，chrome 所有版本，maxthon, firefox, sougou, TTpera 等浏览器，在 iPad 的 safari 浏览器中也可以很好地兼容，在这些兼容的浏览器中均可正常进行图片的在线编辑，解决了用户多场景多终端对网页访问中头像编辑的需求。本发明具有普适性，可以作为通用模块被多数网页所复用，从而达到全产品线编辑头像功能完美兼容多终端。以上所述仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本发明的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本发明保护的范围之内。
权利要求
1.一种在线编辑图片的方法，其特征在于，包括: 服务器端根据客户端的指令将待编辑图片传输给客户端展示； 客户端生成编辑框并置于所述待编辑图片之上，并监听对所述编辑框的操作指令，根据监听到的操作指令对所述编辑框进行移动和缩放； 客户端将所述编辑框在所述待编辑图片上的相对区域参数上传给服务器； 服务器根据所述相对区域参数编辑处理所述待编辑图片，生成最终图片。
2.根据权利要求1所述的方法，其特征在于，所述服务器端根据客户端的编辑指令将待编辑图片传输给客户端展示的过程具体包括:客户端向服务器发起编辑指令并将本地原始图片上传给服务器，服务器将该原始图片缩放为预定尺寸的待编辑图片，再将该待编辑图片传输给客户端展示。
3.根据权利要求1所述的方法，其特征在于，该方法进一步包括客户端预览最终图片效果，具体为: 客户端在一预览区域显示与所述待编辑图片相同的预览图片，在该预览区域生成一遮罩层至于该预览图片之上，该遮罩层中存在与最终图片的形状和大小相同的透明区域，且该透明区域与预览图片相对位置和所述编辑框与待编辑图片的相对位置相同； 客户端在根据监听到的操作指令对所述编辑框进行移动和缩放时，按照移动参数反向移动所述预览图片，按照缩放参数反向缩放所述预览图片。
4.根据权利要求3所述的方法，其特征在于，所述遮罩层为HTML元素或图片。
5.根据权利要求1所述的方法，其特征在于，该方法在生成最终图片后进一步包括:保存该最终图片，在收到应用指令后，将所保存的最终图片发送到该应用指令对应的场景中。
6.根据权利要求1所述的方法，其特征在于，该方法在生成最终图片后进一步包括:保存所述编辑框在该待编辑图片上的相对区域参数； 当客户端再次监测到对所述待编辑图片的编辑指令后，根据所保存的所述编辑框在所述待编辑图片上的相对区域参数，还原所述编辑框在所述待编辑图片上的大小和位置。
7.根据权利要求1所述的方法，其特征在于，所述客户端的处理步骤为js脚本处理步骤。
8.—种在线编辑图片的装置，其特征在于，该装置包括: 客户端的指令发起模块，用于监听对图片的指令并通知服务器； 服务器的图片传输模块，用于将待编辑图片传输给客户端； 客户端的图片展示模块，用于展示所述待编辑图片； 客户端的编辑框处理模块，用于生成编辑框置于所述待编辑图片之上，并监听对所述编辑框的操作指令，根据监听到的操作指令对所述编辑框进行移动和缩放； 客户端的参数上传模块，用于将所述编辑框在所述待编辑图片上的相对区域参数上传给服务器； 服务器的图片编辑处理模块，用于根据所述相对区域参数编辑处理所述待编辑图片，生成最终图片。
9.根据权利要求8所述的装置，其特征在于， 所述客户端的指令发起模块中进一步包括:图片上传模块，用于将本地原始图片上传给服务器；所述装置进一步包括:服务器的图片缩放模块，用于所述客户端上传的原始图片缩放为预定尺寸的待编辑图片，将该待编辑图片发送给服务器的图片传输模块。
10.根据权利要求8所述的装置，其特征在于，该装置进一步包括客户端的预览模块，其中具体包括: 预览图片显示模块，用于在一预览区域显示与所述待编辑图片相同的预览图片； 遮罩层模块，用于在所述预览区域生成一遮罩层至于所述预览图片之上，该遮罩层中存在与最终图片的形状和大小相同的透明区域，且该透明区域与预览图片相对位置和所述编辑框与待编辑图片的相对位置相同； 预览图片调整模块，用于根据编辑框处理模块监听到的对所述编辑框的移动和缩放指令，按照移动参数反向移动所述预览图片，按照缩放参数反向缩放所述预览图片。
11.根据权利要求8所述的装置，其特征在于，该装置进一步包括:服务器的图片存储模块，用于存储所述最终图片。
全文摘要
本发明公开了一种在线编辑图片的方法和装置，包括服务器端根据客户端的指令将待编辑图片传输给客户端展示；客户端生成编辑框并置于所述待编辑图片之上，并监听对所述编辑框的操作指令，根据监听到的操作指令对所述编辑框进行移动和缩放；客户端将所述编辑框在所述待编辑图片上的相对区域参数上传给服务器；服务器根据所述相对区域参数编辑处理所述待编辑图片，生成最终图片。利用本发明，可以提高在线编辑图片功能的兼容性、处理速度和处理效率。
文档编号G06T11/60GK103150745SQ20111040040
公开日2013年6月12日 申请日期2011年12月6日 优先权日2011年12月6日
发明者钟雨欢, 林挺 申请人:腾讯科技(深圳)有限公司