CN105678695A - 图片处理方法和装置 - Google Patents

Abstract

本发明公开了一种图片处理方法和装置，包括：确定目标图片的尺寸，生成用于显示原始图片的第一预览窗口；生成一与目标图片宽高比固定相同的浮动框置于所述第一预览窗口上；生成与目标图片尺寸大小相同的第二预览窗口；将所述第一预览窗口内被所述浮动框覆盖的原始图片区域图像，填充到第二预览窗口进行显示；在收到提交指令后，将当前浮动框覆盖的原始图片区域图像，按照所述目标图片尺寸生成目标图片。利用本发明，可以降低制图难度，提高制图效率。

Description

图片处理方法和装置

技术领域

本发明涉及计算机数据处理技术，尤其涉及一种图片处理的方法和装置。

背景技术

随着互联网技术的发展，业界通过各种网络应用技术开发出了越来越丰富的互联网应用，满足了互联网用户的不断需求。

在许多网络应用中都需要使用网络图片，例如在注册用户的头像中需要使用网络图片。由于这些网络图片的显示尺寸和大小有比较严格的要求，因此需要对原始图片进行处理才能作为网络图片使用。

但是，制作符合要求尺寸的图片，需要制图者具有用户界面(UI)制作图片的能力，至少要熟悉一种专业的制图软件，如photoshop等，才能利用软件裁剪出符合网站要求尺寸的图片，在此期间还要进行大量繁琐的手工指令操作，才能制作出满足目标尺寸要求的目标图片，至少包括以下操作：

(1)点击选择指令按钮，出现选择框；

(2)手工调整选择框的高宽比，使其与目标图片尺寸的宽高比相同，在此过程中如果纯手工调整，则宽高比与目标图片尺寸宽高比的误差较大；如果希望降低误差，则需要人工输入宽高比，操作繁琐；

(3)由于无法实现同步预览，只能利用选择框进行剪切操作进行预览；预览完毕，如果不满意还需要撤销操作，重新调整选择框再进行剪切操作进行预览，重复操作太多。并且，预览图的尺寸与目标图片尺寸不见得一样，降低了预览效果。

(4)在生成图片时，需要先进行剪切操作，然后再输入目标图片的尺寸参数，以此来调整整个图片尺寸，之后再点击保存，生成符合尺寸的目标图片。

因此，现有技术中没有一种更加智能和自动化的图片处理方法，用户不但需要具备较专业的制图技能，而且制图操作步骤过于复杂，不能实现同步预览，制图效率非常低下。

发明内容

有鉴于此，本发明的主要目的在于提供一种图片处理方法和装置，以降低制图难度，实现同步预览，提高制图效率。

本发明的技术方案是这样实现的：

一种图片处理方法，包括：

确定目标图片的尺寸；

生成第一预览窗口，在该第一预览窗口中显示原始图片；

生成一浮动框并置于所述第一预览窗口上；该浮动框的宽高比与所述目标图片尺寸的宽高比固定相同；

生成与目标图片尺寸大小相同的第二预览窗口；

获取所述第一预览窗口内被所述浮动框覆盖的原始图片区域图像，将该原始图片区域图像填充到所述第二预览窗口进行显示；

在收到提交指令后，将当前浮动框覆盖的原始图片区域图像，按照所述目标图片尺寸生成目标图片。

一种图片处理装置，包括：

目标尺寸模块，用于确定目标图片的尺寸；

第一预览模块，用于生成第一预览窗口，在该第一预览窗口中显示原始图片；

浮动框模块，用于生成一浮动框并置于所述第一预览窗口上，该浮动框的宽高比与所述目标图片尺寸的宽高比固定相同；

第二预览模块，用于生成与目标图片尺寸大小相同的第二预览窗口；

第一同步预览模块，用于获取所述第一预览窗口内被所述浮动框覆盖的原始图片区域图像，将该原始图片区域图像填充到所述第二预览窗口进行显示；

图片生成模块，用于在收到提交指令后，将当前浮动框覆盖的原始图片区域图像，按照所述目标图片尺寸生成目标图片。

与现有技术相比，本发明会首先确定目标图片尺寸，然后生成第一预览窗口显示原始图片，生成与目标图片尺寸相同的第二预览窗口用于显示目标图片；并且生成一浮动框置于所述第一预览窗口上，所述第一预览窗口内被所述浮动框覆盖的原始图片区域的图像会填充到该第二预览窗口进行展示，且该浮动框的宽高比始终与所述目标图片尺寸的宽高比相同，这样用户在处理图片的过程中就不需要调整浮动框的宽高比，只需要执行操作简单的移动和缩放操作即可，降低了操作复杂度，提高了操作效率；同时由于浮动框与目标图片尺寸的宽高比始终相同，因此在编辑调整过程中始终能够同步预览到不需要进行宽高比调整的目标图片，不但实现了同步预览，而且目标图片逼真，提高了预览效果，同时也节约了计算资源，降低对终端设备的性能要求。在收到提交指令后，不必再进行裁剪操作以及输入目标图片尺寸，而是直接将当前浮动框覆盖的原始图片区域图像，按照所述目标图片尺寸生成目标图片，节省了操作步骤，提高了操作效率。

附图说明

图1为本发明所述图片处理方法的一种主要实施流程图；

图2为本发明所述图片处理方法的一种操作界面示意图；

图3为本发明所述图片处理装置的一种组成示意图；

图4为本发明所述图片处理装置的又一种组成示意图。

具体实施方式

下面结合附图及具体实施例对本发明再作进一步详细的说明。

图1为本发明所述图片处理方法的一种主要实施流程图，参见图1，该流程包括：

步骤101、确定目标图片的尺寸。

该目标图片的尺寸可以提示用户由用户输入。

步骤102、生成第一预览窗口，在该第一预览窗口中显示原始图片；

所述原始图片可以预先进行获取，具体的获取方式例如可以是提示用户输入原始图片信息，具体是提示用户从本地终端选择一个原始图片文件，或者提示用户输入一个网络图片的链接。如果用户选择了一个本地原始图片，则读取该原始图片的数据，包括图像数据和尺寸数据，所述尺寸数据从本地原始图片中的属性中获取；如果用户输入了一个网络图片连接，则本发明从该网络图片链接处下载该网络图片作为原始图片，由于网络图片没有属性，因此本发明需要进一步计算该网络图片的尺寸数据供后续步骤使用。

如图2所示，通常是在当前界面的左边生成第一预览窗口201，当然也可以在右边或者其它位置生成第一预览窗口201。在该第一预览窗口201中显示原始图片。

例如在一个具体实施例中，在获取原始图片后，本发明提供的用户界面(UI)会提供一个240*240的第一预览窗口201供显示原始图片。由于在上述步骤中已经获取了原始图片的尺寸数据，因此需要在该第一预览窗口201中显示原始图片时需要对原始图片进行适应性调整。假如用户选择的原始图片尺寸为w*h，其中w为宽度，h为高度，如果即用户选择的是一张宽图片，此时将该原始图片等比压缩为宽为240像素，高为240*h/w像素的图片，然后显示在第一预览窗口201中；如果即用户选在了一张窄图片，此时将该图片等比压缩为高为240像素，宽为240*w/h像素的图片，然后再显示在第一预览窗口201中。

步骤103、生成一浮动框并置于所述第一预览窗口上；该浮动框的宽高比与所述目标图片尺寸的宽高比固定相同。

如图2所示，可以生成一浮动框202置于所述第一预览窗口201上，浮动框201的宽高比与所述目标图片尺寸的宽高比固定相同。这样，用户在编辑过程中就不必进行繁琐的调整宽高比的操作。

步骤104、生成与目标图片尺寸大小相同的第二预览窗口。

如图2所示，如果目标图片的尺寸大小为60*50像素，则可以生成尺寸大小为60*50像素的第二预览窗口203。

步骤105、获取所述第一预览窗口内被所述浮动框覆盖的原始图片区域图像，将该原始图片区域图像填充到所述第二预览窗口进行显示。

如图2所示，虚线框202为所述浮动框，此时可以调用FLASH提供的应用编程接口(API)获取该浮动框202所覆盖的原始图片区域图像，将获取到的原始图片区域图像填充到所述第二预览窗口203进行显示。

在一种具体实施方式中，所述获取所述第一预览窗口内被所述浮动框覆盖的原始图片区域图像，具体包括：计算所述第一预览窗口内所述浮动框的位置区域参数；从所述原始图片中，获取该位置区域参数内的图像，得到所述原始图片区域图像。

在一种优选实施例中，所述将获取到的原始图片区域图像填充到所述第二预览窗口进行显示是指全窗口显示。所述全窗口显示，就是要将该原始图片区域图像铺满该第二预览窗口203显示，由于浮动框202的宽高比例和用户选择的目标图片尺寸的宽高比相同，而第二预览窗口203的尺寸由于目标图片尺寸相同，因此浮动框202的宽高比例和第二预览窗口203的宽高比例相同，这样在填充到第二预览窗口203的过程中，只需要根据目标图片尺寸与浮动框尺寸的大小比例对所述原始图片区域图像进行等比缩放即可，等比缩放后就可以直接填入到所述第二预览窗口，而不必进行宽高比例调整的计算，这样就可以直接调用API窗口来实现填充功能，提高计算效率。

步骤106、在收到提交指令后，将当前浮动框覆盖的原始图片区域图像，按照所述目标图片尺寸生成目标图片。

所述提交指令就是用户希望将浮动框202当前所覆盖的原始图片区域图像转化为目标图片的指令，通常是需要用户点击一个提交按钮，当用户点击该提交按钮后即收到提交指令。如果需要缩放，还需要先按照所述目标图片尺寸对原始图片区域图像进行等比缩放处理，然后生成目标图片。

在一种优选实施例中，本发明还可以进一步包括：步骤105’、在监听到所述浮动框的移动或缩放事件后，获取所述第一预览窗口内被所述浮动框覆盖的原始图片区域图像，将该原始图片区域图像填充到所述第二预览窗口进行全窗口显示。

所述浮动框202的移动或缩放事件是由用户操作触发的。本发明可以接收用户对浮动框202的移动或缩放操作指令，一旦用户移动或缩放了浮动框202，则该移动或缩放事件就会被监听到，此时该浮动框202所覆盖的所述原始图片区域图像会发生变化，那么第二预览窗口203内的图像也应同步发生变化，因此本步骤就会在监听到所述浮动框的移动或缩放事件后，立即获取所述第一预览窗口201内被所述浮动框202覆盖的原始图片区域图像，将该原始图片区域图像填充到所述第二预览窗口203进行全窗口显示。由于如上所述，在填充过程中不必进行宽高比例调整的计算，可以直接调用API窗口来实现填充功能，提高了计算效率，所以同步预览的反应速度很快，提高了同步预览的效果。

总之，上述步骤中，由于浮动框的宽高比与所述目标图片尺寸的宽高比固定相同，这样用户在处理图片的过程中就不需要调整浮动框的宽高比，用户所做的编辑操作仅仅是移动或缩放浮动框，降低了操作复杂度，提高了操作效率，同时也节约了计算资源，降低对终端设备的性能要求。由于只要浮动框所覆盖的原始图片区域有变化，则该区域内的区域图像将被添加到第二预览窗口内，从而实现了目标图片的同步预览，且第二预览窗口的尺寸与目标图片尺寸相同，因此预览到的目标图片效果逼真，提高了预览效果，同时也节约了计算资源，降低对终端设备的性能要求。

本步骤具体可以包括本地处理和联合云端处理两种方式：

所述本地处理方式就是由本地终端处理，即在收到提交指令后，在本地将当前浮动框覆盖的原始图片区域图像，按照所述目标图片尺寸生成目标图片，存储目标图片。

所述联合云端处理方式，就是在收到提交指令后，将当前浮动框覆盖的原始图片区域图像上传到云端服务器生成目标图片，并接收云端服务器返回的该目标图片的访问地址，通过该访问地址下载目标图片；该云端服务器为执行后续操作的云端服务器：该云端服务器按照所述目标图片尺寸对接收到的原始图片区域图像进行处理生成目标图片，该目标图片格式为用户需要的图片格式(该图片格式可以由用户实现设置好)，并存储在云端，然后提供一个有效的访问地址，即统一资源定位符(URL)，将该目标图片的访问地址返回给所述原始图片区域图像的上传方。

在所述联合云端处理方式的进一步的实施方式中，还可以具体包括：

在收到提交指令后，将当前浮动框覆盖的原始图片区域图像通过超文本传送协议(HTTP)请求上传到云端服务器，并接收云端服务器返回的该目标图片的访问地址，通过该访问地址下载目标图片。该云端服务器具体用于：判断该超文本传送协议请求头部中的域名信息是否与本云端服务器的域名相同，即通过判断该HTTP请求头部的referrer字段来判断域名，如果域名相同则按照所述目标图片尺寸对该原始图片区域图像进行处理生成目标图片，并存储在云端，将该目标图片的访问地址返回给所述原始图片区域图像的上传方；如果域名不同则忽略该超文本传送协议请求。通过这种处理，可以避免云端服务器被利用，变成公用的服务器，即防止盗链，就是在非本域名网站无法使用本云端服务生成的目标图片。

本发明尤其适合于生成图标的处理场景。由于目标图片即图标的尺寸通常较小，但是用户在编辑图片时，通常是在尺寸较大的图片中进行截取，且用户通常选择的范围较大，那么如此大的范围在最终显示成小图标时是一种什么效果呢，采用本发明的方案，由于可以实现以目标图片的实际尺寸实时预览最终的目标图片，预览效果就是最终可以实现的效果，用户可以根据预览效果对选择范围进行即时调整，从而可以有效减少现有技术中由于用户不满意最终效果造成的返工操作，提高了工作效率。

置于具体的接口技术，本发明采用FLASH技术来实现上述各个步骤，从而实现本发明的技术效果。本发明的装置最终可以做成一个客户端安装在用户终端设备上，或者做成一个FLASH插件安装在用户浏览器上，从而实现本发明的技术效果。

基于上述方法，本发明还公开了一种图片处理装置，用于执行上述方法。图3为本发明所述图片处理装置的一种组成示意图。参见图3，该图片处理装置包括：

目标尺寸模块301，用于确定目标图片的尺寸；

第一预览模块302，用于生成第一预览窗口，在该第一预览窗口中显示原始图片；

浮动框模块303，用于生成一浮动框并置于所述第一预览窗口上，该浮动框的宽高比与所述目标图片尺寸的宽高比固定相同；

第二预览模块304，用于生成与目标图片尺寸大小相同的第二预览窗口；

第一同步预览模块305，用于获取所述第一预览窗口内被所述浮动框覆盖的原始图片区域图像，将该原始图片区域图像填充到所述第二预览窗口进行显示；

图片生成模块307，用于在收到提交指令后，将当前浮动框覆盖的原始图片区域图像，按照所述目标图片尺寸生成目标图片。

在一种优选实施例中，如图4所示，本发明还可以进一步包括：

第二同步预览模块306，用于在监听到所述浮动框的移动或缩放事件后，获取所述第一预览窗口内被所述浮动框覆盖的原始图片区域图像，将该原始图片区域图像填充到所述第二预览窗口进行显示。

在一种优选实施例中，所述第一同步预览模块305和第二同步预览模块306将原始图片区域图像填充到所述第二预览窗口进行显示，具体为：将该原始图片区域图像填充到所述第二预览窗口进行全窗口显示。

在一种优选实施例中，所述第一同步预览模块305和第二同步预览模块306获取所述第一预览窗口内被所述浮动框覆盖的原始图片区域图像，具体为：计算所述第一预览窗口内所述浮动框的位置区域参数；从所述原始图片中，获取该位置区域参数内的图像，得到所述原始图片区域图像。

在另一种优选实施例中，所述图片生成模块307具体用于：在收到提交指令后，在本地将当前浮动框覆盖的原始图片区域图像，按照所述目标图片尺寸生成目标图片。

或者，图片生成模块307具体用于：在收到提交指令后，将当前浮动框覆盖的原始图片区域图像上传到云端服务器生成目标图片，并接收云端服务器返回的该目标图片的访问地址；该云端服务器用于：按照所述目标图片尺寸对接收到的原始图片区域图像进行处理生成目标图片，并存储在云端，将该目标图片的访问地址返回给所述原始图片区域图像的上传方。

或者，所述图片生成模块307具体用于：在收到提交指令后，将当前浮动框覆盖的原始图片区域图像通过超文本传送协议请求上传到云端服务器，并接收云端服务器返回的该目标图片的访问地址；该云端服务器为用于执行后续操作的云端服务器：用于判断所接收到的超文本传送协议请求头部中的域名信息是否与本云端服务器的域名相同，如果域名相同则按照所述目标图片尺寸对该原始图片区域图像进行处理生成目标图片，并存储在云端，将该目标图片的访问地址返回给所述原始图片区域图像的上传方；如果域名不同则忽略该超文本传送协议请求。

另外，在本发明各个实施例中的各功能模块可以集成在一个处理单元中，也可以是各个模块单独物理存在，也可以两个或两个以上模块集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。所述各实施例的功能模块可以位于一个终端或网络节点，或者也可以分布到多个终端或网络节点上。

另外，本发明的每一个实施例可以通过由数据处理设备如计算机执行的数据处理程序来实现。显然，数据处理程序构成了本发明。此外，通常存储在一个存储介质中的数据处理程序通过直接将程序读取出存储介质或者通过将程序安装或复制到数据处理设备的存储设备(如硬盘和或内存)中执行。因此，这样的存储介质也构成了本发明。存储介质可以使用任何类型的记录方式，例如纸张存储介质(如纸带等)、磁存储介质(如软盘、硬盘、闪存等)、光存储介质(如CD-ROM等)、磁光存储介质(如MO等)等。

因此本发明还公开了一种存储介质，其中存储有数据处理程序，该数据处理程序用于执行本发明上述方法的任何一种实施例。

另外，本发明所述的方法步骤除了可以用数据处理程序来实现，还可以由硬件来实现，例如，可以由逻辑门、开关、专用集成电路(ASIC)、可编程逻辑控制器和嵌入微控制器等来实现。因此这种可以实现本发明所述方法的硬件也可以构成本发明。

以上所述仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本发明的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本发明保护的范围之内。

Claims (12)

1.一种图片处理方法，其特征在于，包括：

确定目标图片的尺寸；

生成第一预览窗口，在该第一预览窗口中显示原始图片；

生成一浮动框并置于所述第一预览窗口上；该浮动框的宽高比与所述目标图片尺寸的宽高比固定相同；

生成与目标图片尺寸大小相同的第二预览窗口；

获取所述第一预览窗口内被所述浮动框覆盖的原始图片区域图像，将该原始图片区域图像填充到所述第二预览窗口进行显示；

在收到提交指令后，将当前浮动框覆盖的原始图片区域图像，按照所述目标图片尺寸生成目标图片。

2.根据权利要求1所述的方法，其特征在于，该方法进一步包括：

在监听到所述浮动框的移动或缩放事件后，获取所述第一预览窗口内被所述浮动框覆盖的原始图片区域图像，将该原始图片区域图像填充到所述第二预览窗口进行显示。

3.根据权利要求2所述的方法，其特征在于，所述将该原始图片区域图像填充到所述第二预览窗口进行显示，具体包括：将该原始图片区域图像填充到所述第二预览窗口进行全窗口显示。

4.根据权利要求1或2所述的方法，其特征在于，所述获取所述第一预览窗口内被所述浮动框覆盖的原始图片区域图像，具体包括：

计算所述第一预览窗口内所述浮动框的位置区域参数；

从所述原始图片中，获取该位置区域参数内的图像，得到所述原始图片区域图像。

5.根据权利要求1所述的方法，其特征在于，所述在收到提交指令后，将当前浮动框覆盖的原始图片区域图像，按照所述目标图片尺寸生成目标图片，具体为：

在收到提交指令后，在本地将当前浮动框覆盖的原始图片区域图像，按照所述目标图片尺寸生成目标图片；

或者，在收到提交指令后，将当前浮动框覆盖的原始图片区域图像上传到云端服务器生成目标图片，并接收云端服务器返回的该目标图片的访问地址；该云端服务器为执行后续操作的云端服务器：该云端服务器按照所述目标图片尺寸对接收到的原始图片区域图像进行处理生成目标图片，并存储在云端，将该目标图片的访问地址返回给所述原始图片区域图像的上传方。

6.根据权利要求1所述的方法，其特征在于，所述在收到提交指令后，将当前浮动框覆盖的原始图片区域图像，按照所述目标图片尺寸生成目标图片，具体为：

在收到提交指令后，将当前浮动框覆盖的原始图片区域图像通过超文本传送协议请求上传到云端服务器，并接收云端服务器返回的该目标图片的访问地址；

该云端服务器为用于执行后续操作的云端服务器：用于判断所接收到的超文本传送协议请求头部中的域名信息是否与本云端服务器的域名相同，如果域名相同则按照所述目标图片尺寸对该原始图片区域图像进行处理生成目标图片，并存储在云端，将该目标图片的访问地址返回给所述原始图片区域图像的上传方；如果域名不同则忽略该超文本传送协议请求。

7.一种图片处理装置，其特征在于，包括：

目标尺寸模块，用于确定目标图片的尺寸；

第一预览模块，用于生成第一预览窗口，在该第一预览窗口中显示原始图片；

浮动框模块，用于生成一浮动框并置于所述第一预览窗口上，该浮动框的宽高比与所述目标图片尺寸的宽高比固定相同；

第二预览模块，用于生成与目标图片尺寸大小相同的第二预览窗口；

第一同步预览模块，用于获取所述第一预览窗口内被所述浮动框覆盖的原始图片区域图像，将该原始图片区域图像填充到所述第二预览窗口进行显示；

图片生成模块，用于在收到提交指令后，将当前浮动框覆盖的原始图片区域图像，按照所述目标图片尺寸生成目标图片。

8.根据权利要求7所述的装置，其特征在于，该方法进一步包括：

第二同步预览模块，用于在监听到所述浮动框的移动或缩放事件后，获取所述第一预览窗口内被所述浮动框覆盖的原始图片区域图像，将该原始图片区域图像填充到所述第二预览窗口进行显示。

9.根据权利要求8所述的装置，其特征在于，所述第一同步预览模块和第二同步预览模块将原始图片区域图像填充到所述第二预览窗口进行显示，具体为：将该原始图片区域图像填充到所述第二预览窗口进行全窗口显示。

10.根据权利要求8所述的装置，其特征在于，所述第一同步预览模块和第二同步预览模块获取所述第一预览窗口内被所述浮动框覆盖的原始图片区域图像，具体为：计算所述第一预览窗口内所述浮动框的位置区域参数；从所述原始图片中，获取该位置区域参数内的图像，得到所述原始图片区域图像。

11.根据权利要求7所述的装置，其特征在于，

所述图片生成模块具体用于：在收到提交指令后，在本地将当前浮动框覆盖的原始图片区域图像，按照所述目标图片尺寸生成目标图片；

或者，图片生成模块具体用于：在收到提交指令后，将当前浮动框覆盖的原始图片区域图像上传到云端服务器生成目标图片，并接收云端服务器返回的该目标图片的访问地址；该云端服务器用于按照所述目标图片尺寸对接收到的原始图片区域图像进行处理生成目标图片，并存储在云端，将该目标图片的访问地址返回给所述原始图片区域图像的上传方。

12.根据权利要求7所述的装置，其特征在于，所述图片生成模块具体用于：在收到提交指令后，将当前浮动框覆盖的原始图片区域图像通过超文本传送协议请求上传到云端服务器，并接收云端服务器返回的该目标图片的访问地址；

该云端服务器用于：判断所接收到的超文本传送协议请求头部中的域名信息是否与本云端服务器的域名相同，如果域名相同则按照所述目标图片尺寸对该原始图片区域图像进行处理生成目标图片，并存储在云端，将该目标图片的访问地址返回给所述原始图片区域图像的上传方；如果域名不同则忽略该超文本传送协议请求。