CN105094563A - 一种图片裁剪方法及裁剪系统 - Google Patents

Abstract

本发明公开了一种图片裁剪方法及裁剪系统，所述方法包括：从本地选择需要上传的原始图片文件上传至服务器；服务器将接收到的原始图片文件存储于图片临时存放目录，并将图片临时存放地址返回给客户端；客户端根据所述图片临时存放地址进行访问，并将对应的原始图片显示于设计界面；根据用户的选框截取获得需要裁剪的图片区域，以及获得设置的原始图片裁剪后的显示尺寸，并以参数的形式发送给服务器；服务器对原始图片进行裁剪和缩放处理，得到目标图片并存储，且将目标图片的存放地址返回给客户端，以供客户端显示裁剪处理后的目标图片。通过本发明，能够兼容所有浏览器的图片裁剪工具，且存在图片路径跨域时，也不影响裁剪工具的使用。

Description

一种图片裁剪方法及裁剪系统

技术领域

本发明涉及图片处理技术领域，具体涉及一种图片裁剪方法及裁剪系统。

背景技术

目前基于web的图片裁剪方法，大多数是基于html5新技术做图片处理的裁剪，但使用此种方式有以下两个问题：

1、不能兼容所有的浏览器，如IE6，IE7，IE8这些不支持html5新的扩展标签的浏览器。

2、在支持html新特性的浏览器中使用时，涉及到图片路径跨域时(即图片在服务器上，而非在客服端本地)，不能正常的做到裁剪的处理。

发明内容

本发明所要解决的技术问题是提供一种图片裁剪方法及裁剪系统，能够解决现有技术的缺点。

本发明解决上述技术问题的技术方案如下：

一方面，本发明提供了一种图片裁剪方法，所述方法包括：

S1、从本地选择需要上传的原始图片文件，并上传至服务器；

S2、服务器将接收到的原始图片文件存储于图片临时存放目录，并将图片临时存放地址返回给客户端；

S3、客户端根据所述图片临时存放地址进行访问，并将对应的原始图片显示于设计界面；

S4、客户端根据用户在所述设计界面上的选框截取获得需要裁剪的图片区域，以及获得设置的原始图片裁剪后的显示尺寸，并将需要裁剪的图片区域和原始图片裁剪后的显示尺寸以参数的形式发送给服务器；

S5、服务器根据需要裁剪的图片区域和裁剪后的显示尺寸，对原始图片进行裁剪和缩放处理，得到目标图片并存储，且将目标图片的存放地址返回给客户端，以供客户端根据目标图片的存放地址显示裁剪处理后的目标图片。

另一方面，本发明提供了一种图片裁剪系统，所述系统包括客户端和服务器；

所述客户端包括：

图片上传模块，用于从本地选择需要上传的原始图片文件，并上传至服务器；

显示模块，用于根据所述图片临时存放地址进行访问，并将对应的原始图片显示于设计界面；

获取模块，用于根据用户在所述设计界面上的选框截取获得需要裁剪的图片区域，以及获得设置的原始图片裁剪后的显示尺寸；

发送模块，用于将需要裁剪的图片区域和原始图片裁剪后的显示尺寸以参数的形式发送给服务器；

所述服务器包括：

第一存储模块，用于将接收到的原始图片文件存储于图片临时存放目录，并将图片临时存放地址返回给客户端；

处理模块，用于根据需要裁剪的图片区域和裁剪后的显示尺寸，对原始图片进行裁剪和缩放处理，得到目标图片；

第二存储模块，用于存储所述目标图片，且将目标图片的存放地址返回给客户端，以供客户端根据目标图片的存放地址显示裁剪处理后的目标图片。

本发明提供的一种图片裁剪方法及裁剪系统，通过将原始图片显示于客户端的设计界面，用户可以通过选框(即拖拽)的形式选择需要裁剪的图片区域，并能设置裁剪后的图片的显示尺寸，并将裁剪参数发送给服务器，由服务器根据裁剪参数对原始图片进行裁剪，能够让后台编辑人员进行裁剪图片的上传，而不需要美工通过PS(photoshop)进行图片的裁剪以及缩放处理，减少了运营成本，提供了图片裁剪的效率。

附图说明

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

图2为本发明实施例一中客户端与服务器的交互过程示意图；

图3为本发明实施例二的一种图片裁剪系统示意图。

具体实施方式

以下结合附图对本发明的原理和特征进行描述，所举实例只用于解释本发明，并非用于限定本发明的范围。

实施例一、一种图片裁剪方法。下面结合图1和图2对本实施例提供的方法进行详细描述。

参见图1，S1、从本地选择需要上传的原始图片文件，并上传至服务器。

具体的，客户端从本地选择需要上传的原始图片文件，并将其上传至服务器，具体过程为：客户端通过本地存储的网页标签，读取需要上传的原始图片文件，然后利用iframe标签，将需要上传的原始图片文件生成一个form表单，以form表单的形式将原始图片文件上传给服务器。其中，网页标签是基于html4.0标准的网页标签，由于html4.0标准是1998年发布的，目前所有的浏览器均支持该标准，因此采用该标准能够兼容所有的浏览器。

S2、服务器将接收到的原始图片文件存储于图片临时存放目录，并将图片临时存放地址返回给客户端。

S3、客户端根据所述图片临时存放地址进行访问，并将对应的原始图片显示于设计界面。

具体的，服务器接收到客户端发送的原始图片文件，将其存储于服务器的图片临时存放目录，将图片临时存放地址返回给客户端，以供客户端根据图片临时存放地址进行访问，并将访问的原始图片显示于客户端的设计界面。另外，当原始图片的尺寸大于预设尺寸时，客户端先将原始图片按照预设比例进行缩放后再将其显示于设计界面上，若原始图片的尺寸在预设尺寸范围内，则直接将原始图片显示于设计界面。

S4、客户端根据用户在所述设计界面上的选框截取获得需要裁剪的图片区域，以及获得设置的原始图片裁剪后的显示尺寸，并将需要裁剪的图片区域和原始图片裁剪后的显示尺寸以参数的形式发送给服务器。

具体的，客户端将原始图片显示于设计界面后，用户可以通过选框(即拖拽)的形式截取需要裁剪的图片区域，另外，用户还能在设计界面上设置原始图片裁剪后的显示尺寸。客户端获取需要裁剪的图片区域以及设置的原始图片裁剪后的显示尺寸。具体为：客户端获取用户选框的起始坐标，即选框区域的左上角坐标以及选框的宽度和高度，通过选框区域的左上角坐标以及选框的宽度和高度以对选框区域进行定位，以及设置的原始图片裁剪后的图片显示的宽度和高度。客户端将获取的选框区域的左上角坐标、选框的宽度和高度、以及裁剪后的图片的显示宽度和高度以参数的形式发送给服务器。

另外，若客户端上显示的图片为按照预设比例缩放后的图片时，客户端获取选框区域的左上角坐标、选框的宽度和高度后，按照前述的预设比例将选框区域的左上角坐标、选框的宽度和高度换算成与原始图片尺寸对应的左上角坐标、选框宽度和高度。

S5、服务器根据需要裁剪的图片区域和原始图片裁剪后的显示尺寸，对原始图片进行裁剪和缩放处理，得到裁剪后的目标图片并存储，且将目标图片的存放地址返回给客户端，以供客户端根据目标图片的存放地址显示裁剪处理后的目标图片

具体的，服务器接收到客户端的裁剪参数(选框的左上角坐标、选框的宽度和高度)以及裁剪后的显示尺寸，利用后端语言对存储在图片临时存放目录中的原始图片进行裁剪处理和缩放处理，并对裁剪和缩放处理后的目标图片存储并将目标图片的存储地址返回给客户端，以供客户端根据目标图片的存储地址进行访问，并对目标图片以设定的尺寸进行显示。另外，当客户端对裁剪和缩放处理后的目标图片进行了存储之后，将图片临时存放目录以及存放的原始图片删除。

参见图2，图2为客户端与服务器的交互过程示意图。首先，客户端从本地读取需要需要上传的原始图片文件，利用iframe标签将原始图片文件生成form表单，以form表单的形式将原始图片文件上传至服务器，服务器将其进行临时存储，并将临时存储地址返回给客户端，以供客户端根据临时存储地址访问并将原始图片显示于设计界面上。客户端可以获取用户通过选框形式截取需要裁剪的图片区域以及设置裁剪后的图片的显示尺寸，并发送给服务器，服务器根据客户端发送的需要裁剪的图片区域以及设置裁剪后的图片的显示尺寸，利用后端语言对存储于临时存储目录中的原始图片进行裁剪和缩放处理，得到目标图片，并存储目标图片，且将目标图片的存储地址返回给客户端，以供客户端根据目标图片的存储地址访问并以设定的显示尺寸进行显示。最后，服务器将图片临时存储目录以及存储的原始图片删除。

实施例二、一种图片裁剪系统。下面结合图3对本实施例提供的系统进行详细说明。

参见图3，本实施例提供的系统包括客户端1和服务器2，其中，客户端1包括图片上传模块11、显示模块12、获取模块13和发送模块14，图片上传模块11进一步包括读取单元111和表单生成单元112；服务器2包括第一存储模块21、处理模块12、第二存储模块13和删除模块14。

其中，客户端1中的图片上传模块11，主要用于从本地选择需要上传的原始图片文件，并上传至服务器。

具体的，图片上传模块11进一步包括读取单元111，用于通过本地存储的网页标签，读取需要上传的原始图片文件。图片上传模块112还包括表单生成单元112，用于利用iframe标签，将需要上传的原始图片文件生成一个form表单，图片上传模块11以form表单的形式将原始图片文件上传给服务器2。

服务器2中的第一存储模块21，主要用于将接收到的原始图片文件存储于图片临时存放目录，并将图片临时存放地址返回给客户端1。

客户端1中的显示模块12，主要用于根据服务器2返回的图片临时存放地址进行访问，并将对应的原始图片显示于设计界面。

具体的，客户端1根据图片临时存放地址进行访问，并将访问的原始图片显示于客户端1的设计界面。另外，当原始图片的尺寸大于预设尺寸时，客户端1先将原始图片按照预设比例进行缩放后再将其显示于设计界面上，若原始图片的尺寸在预设尺寸范围内，则直接将原始图片显示于设计界面。

获取模块13，主要用于根据用户在所述设计界面上的选框截取获得需要裁剪的图片区域，以及获得设置的原始图片裁剪后的显示尺寸。

发送模块14，主要用于将需要裁剪的图片区域和裁剪后的显示尺寸以参数的形式发送给服务器2。

具体的，客户端1将原始图片显示于设计界面后，用户可以通过选框(即拖拽)的形式截取需要裁剪的图片区域，另外，用户还能在设计界面上设置原始图片裁剪后的显示尺寸。客户端1中的获取模块13获取需要裁剪的图片区域以及设置的原始图片裁剪后的显示尺寸。具体为：获取模块13获取用户选框的起始坐标，即选框区域的左上角坐标以及选框的宽度和高度，以及设置的原始图片裁剪后的图片显示的宽度和高度。发送模块14将获取模块13的选框区域的左上角坐标、选框的宽度和高度、以及裁剪后的图片的显示宽度和高度以参数的形式发送给服务器2。

另外，若客户端1上显示的图片为按照预设比例缩放后的图片时，获取模块13获取选框区域的左上角坐标、选框的宽度和高度后，按照前述的预设比例将选框区域的左上角坐标、选框的宽度和高度换算成与原始图片尺寸对应的左上角坐标、选框宽度和高度。发送模块14将换算后的选框区域的左上角坐标、选框的宽度和高度以及裁剪后的图片的显示宽度和高度以参数的形式发送给服务器2。

服务器2中的处理模块22，主要用于根据需要裁剪的图片区域和裁剪后的显示尺寸，对原始图片进行裁剪和缩放处理，得到目标图片。

第二存储模块23，主要用于存储所述目标图片，且将目标图片的存放地址返回给客户端，以供客户端根据目标图片的存放地址显示裁剪处理后的目标图片。

删除模块24，主要用于将存储原始图片的临时存放目录以及存放的原始图片删除。

本发明提供的一种图片裁剪方法及裁剪系统，通过将原始图片显示于客户端的设计界面，用户可以通过选框(即拖拽)的形式选择需要裁剪的图片区域，并能设置裁剪后的图片的显示尺寸，并将裁剪参数发送给服务器，由服务器的后端语言根据裁剪参数对原始图片进行裁剪，能够让后台编辑人员进行裁剪图片的上传，而不需要美工通过PS(photoshop)进行图片的裁剪以及缩放处理，减少了运营成本，提供了图片裁剪的效率。

另外，采用html4.0技术能够兼容所有浏览器，通过服务器的后端语言对图片进行裁剪和缩放处理，在涉及到图片路径跨域时，也不影响图片裁剪的处理。

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

Claims (10)

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

S1、从本地选择需要上传的原始图片文件，并上传至服务器；

S2、服务器将接收到的原始图片文件存储于图片临时存放目录，并将图片临时存放地址返回给客户端；

S3、客户端根据所述图片临时存放地址进行访问，并将对应的原始图片显示于设计界面；

S4、客户端根据用户在所述设计界面上的选框截取获得需要裁剪的图片区域，以及获得设置的原始图片裁剪后的显示尺寸，并将需要裁剪的图片区域和裁剪后的显示尺寸以参数的形式发送给服务器；

S5、服务器根据需要裁剪的图片区域和裁剪后的显示尺寸，对原始图片进行裁剪和缩放处理，得到目标图片并存储，且将目标图片的存放地址返回给客户端，以供客户端根据目标图片的存放地址访问并显示裁剪处理后的目标图片。

2.如权利要求1所述的一种图片裁剪方法，其特征在于，所述步骤S1具体包括：

通过本地存储的网页标签，读取需要上传的原始图片文件，其中，所述网页标签基于HTML4.0标准；

利用iframe标签，将需要上传的原始图片文件生成一个form表单，以form表单的形式将原始图片文件上传给服务器。

3.如权利要求1所述的一种图片裁剪方法，其特征在于，所述步骤S4具体包括：

根据用户在所述设计界面上的选框截取获得选框区域的左上角坐标和选框区域的宽度和高度，以及获取通过设计界面设置的原始图片裁剪后的显示尺寸，并将所述选框区域的左上角坐标、选框区域的宽度和高度、以及原始图片裁剪后的显示尺寸发送给服务器。

4.如权利要求3所述的一种图片裁剪方法，其特征在于，所述步骤S3还包括：

若对应的原始图片的尺寸大于预设尺寸，则先将原始图片按照预设比例进行缩放后，再将缩放后的图片显示于设计界面；

所述步骤S4中选框区域的左上角坐标和选框区域的宽度和高度为通过对缩放后的原始图片进行选框截取后获得的。

5.如权利要求4所述的一种图片裁剪方法，其特征在于，所述步骤S4还包括：

根据所述预设比例，将获取的选框区域的左上角坐标和选框区域的宽度和高度还原为未缩放前的原始图片对应的选框区域的左上角坐标和选框区域的宽度和高度，并将其发送给服务器。

6.如权利要求1所述的一种图片裁剪方法，其特征在于，所述步骤S5还包括：

将存储原始图片的图片临时存放目录以及存放的原始图片删除。

7.一种图片裁剪系统，其特征在于，所述系统包括客户端和服务器；

所述客户端包括：

图片上传模块，用于从本地选择需要上传的原始图片文件，并上传至服务器；

显示模块，用于根据所述图片临时存放地址进行访问，并将对应的原始图片显示于设计界面；

获取模块，用于根据用户在所述设计界面上的选框截取获得需要裁剪的图片区域，以及获得设置的原始图片裁剪后的显示尺寸；

发送模块，用于将需要裁剪的图片区域和原始图片裁剪后的显示尺寸以参数的形式发送给服务器；

所述服务器包括：

第一存储模块，用于将接收到的原始图片文件存储于图片临时存放目录，并将图片临时存放地址返回给客户端；

处理模块，用于根据需要裁剪的图片区域和原始图片裁剪后的显示尺寸，对原始图片进行裁剪和缩放处理，得到目标图片；

第二存储模块，用于存储所述目标图片，且将目标图片的存放地址返回给客户端，以供客户端根据目标图片的存放地址访问并显示裁剪处理后的目标图片。

8.如权利要求7所述的一种图片裁剪系统，其特征在于，所述图片上传模块进一步包括：

读取单元，用于通过本地存储的网页标签，读取需要上传的原始图片文件，其中，所述网页标签基于HTML4.0标准；

表单生成单元，用于利用iframe标签，将需要上传的原始图片文件生成一个form表单；

所述图片上传模块以form表单的形式将原始图片文件上传给服务器。

9.如权利要求7所述的一种图片裁剪系统，其特征在于，所述获取模块，用于根据用户在所述设计界面上的选框截取获得需要裁剪的图片区域，以及获得设置的原始图片裁剪后的显示尺寸具体包括：

根据用户在所述设计界面上的选框截取获得选框区域的左上角坐标和选框区域的宽度和高度，以及获取通过设计界面设置的原始图片裁剪后的显示尺寸；

所述发送模块，用于将需要裁剪的图片区域和裁剪后的显示尺寸以参数的形式发送给服务器具体包括：

将所述选框区域的左上角坐标、选框区域的宽度和高度、以及原始图片裁剪后的显示尺寸发送给服务器。

10.如权利要求7所述的一种图片裁剪系统，其特征在于，所述服务器还包括：

删除模块，用于将存储原始图片的图片临时存放目录以及存放的原始图片删除。