一種圖片裁剪方法及裁剪系統(tǒng)的制作方法
【技術(shù)領(lǐng)域】
[0001]本發(fā)明涉及圖片處理技術(shù)領(lǐng)域，具體涉及一種圖片裁剪方法及裁剪系統(tǒng)。
【背景技術(shù)】
[0002]目前基于web的圖片裁剪方法，大多數(shù)是基于html5新技術(shù)做圖片處理的裁剪，但使用此種方式有以下兩個問題:
[0003]1、不能兼容所有的瀏覽器，如IE6，IE7，IE8這些不支持html 5新的擴(kuò)展標(biāo)簽的瀏
IIA-Rg.
[0004]2、在支持html新特性的瀏覽器中使用時，涉及到圖片路徑跨域時(即圖片在服務(wù)器上，而非在客服端本地)，不能正常的做到裁剪的處理。

【發(fā)明內(nèi)容】

[0005]本發(fā)明所要解決的技術(shù)問題是提供一種圖片裁剪方法及裁剪系統(tǒng)，能夠解決現(xiàn)有技術(shù)的缺點(diǎn)。
[0006]本發(fā)明解決上述技術(shù)問題的技術(shù)方案如下:
[0007]—方面，本發(fā)明提供了一種圖片裁剪方法，所述方法包括:
[0008]S1、從本地選擇需要上傳的原始圖片文件，并上傳至服務(wù)器；
[0009]S2、服務(wù)器將接收到的原始圖片文件存儲于圖片臨時存放目錄，并將圖片臨時存放地址返回給客戶端；
[0010]S3、客戶端根據(jù)所述圖片臨時存放地址進(jìn)行訪問，并將對應(yīng)的原始圖片顯示于設(shè)計界面；
[0011]S4、客戶端根據(jù)用戶在所述設(shè)計界面上的選框截取獲得需要裁剪的圖片區(qū)域，以及獲得設(shè)置的原始圖片裁剪后的顯示尺寸，并將需要裁剪的圖片區(qū)域和原始圖片裁剪后的顯示尺寸以參數(shù)的形式發(fā)送給服務(wù)器；
[0012]S5、服務(wù)器根據(jù)需要裁剪的圖片區(qū)域和裁剪后的顯示尺寸，對原始圖片進(jìn)行裁剪和縮放處理，得到目標(biāo)圖片并存儲，且將目標(biāo)圖片的存放地址返回給客戶端，以供客戶端根據(jù)目標(biāo)圖片的存放地址顯示裁剪處理后的目標(biāo)圖片。
[0013]另一方面，本發(fā)明提供了一種圖片裁剪系統(tǒng)，所述系統(tǒng)包括客戶端和服務(wù)器；
[0014]所述客戶端包括:
[0015]圖片上傳模塊，用于從本地選擇需要上傳的原始圖片文件，并上傳至服務(wù)器；
[0016]顯示模塊，用于根據(jù)所述圖片臨時存放地址進(jìn)行訪問，并將對應(yīng)的原始圖片顯示于設(shè)計界面；
[0017]獲取模塊，用于根據(jù)用戶在所述設(shè)計界面上的選框截取獲得需要裁剪的圖片區(qū)域，以及獲得設(shè)置的原始圖片裁剪后的顯示尺寸；
[0018]發(fā)送模塊，用于將需要裁剪的圖片區(qū)域和原始圖片裁剪后的顯示尺寸以參數(shù)的形式發(fā)送給服務(wù)器；
[0019]所述服務(wù)器包括:
[0020]第一存儲模塊，用于將接收到的原始圖片文件存儲于圖片臨時存放目錄，并將圖片臨時存放地址返回給客戶端；
[0021]處理模塊，用于根據(jù)需要裁剪的圖片區(qū)域和裁剪后的顯示尺寸，對原始圖片進(jìn)行裁剪和縮放處理，得到目標(biāo)圖片；
[0022]第二存儲模塊，用于存儲所述目標(biāo)圖片，且將目標(biāo)圖片的存放地址返回給客戶端，以供客戶端根據(jù)目標(biāo)圖片的存放地址顯示裁剪處理后的目標(biāo)圖片。
[0023]本發(fā)明提供的一種圖片裁剪方法及裁剪系統(tǒng)，通過將原始圖片顯示于客戶端的設(shè)計界面，用戶可以通過選框(即拖拽)的形式選擇需要裁剪的圖片區(qū)域，并能設(shè)置裁剪后的圖片的顯示尺寸，并將裁剪參數(shù)發(fā)送給服務(wù)器，由服務(wù)器根據(jù)裁剪參數(shù)對原始圖片進(jìn)行裁剪，能夠讓后臺編輯人員進(jìn)行裁剪圖片的上傳，而不需要美工通過PSbhotoshop)進(jìn)行圖片的裁剪以及縮放處理，減少了運(yùn)營成本，提供了圖片裁剪的效率。
【附圖說明】
[0024]圖1為本發(fā)明實(shí)施例一的一種圖片裁剪方法流程圖；
[0025]圖2為本發(fā)明實(shí)施例一中客戶端與服務(wù)器的交互過程示意圖；
[0026]圖3為本發(fā)明實(shí)施例二的一種圖片裁剪系統(tǒng)示意圖。
【具體實(shí)施方式】
[0027]以下結(jié)合附圖對本發(fā)明的原理和特征進(jìn)行描述，所舉實(shí)例只用于解釋本發(fā)明，并非用于限定本發(fā)明的范圍。
[0028]實(shí)施例一、一種圖片裁剪方法。下面結(jié)合圖1和圖2對本實(shí)施例提供的方法進(jìn)行詳細(xì)描述。
[0029]參見圖1，S1、從本地選擇需要上傳的原始圖片文件，并上傳至服務(wù)器。
[0030]具體的，客戶端從本地選擇需要上傳的原始圖片文件，并將其上傳至服務(wù)器，具體過程為:客戶端通過本地存儲的網(wǎng)頁標(biāo)簽，讀取需要上傳的原始圖片文件，然后利用iframe標(biāo)簽，將需要上傳的原始圖片文件生成一個form表單，以form表單的形式將原始圖片文件上傳給服務(wù)器。其中，網(wǎng)頁標(biāo)簽是基于html4.0標(biāo)準(zhǔn)的網(wǎng)頁標(biāo)簽，由于html4.0標(biāo)準(zhǔn)是1998年發(fā)布的，目前所有的瀏覽器均支持該標(biāo)準(zhǔn)，因此采用該標(biāo)準(zhǔn)能夠兼容所有的瀏覽器。
[0031]S2、服務(wù)器將接收到的原始圖片文件存儲于圖片臨時存放目錄，并將圖片臨時存放地址返回給客戶端。
[0032]S3、客戶端根據(jù)所述圖片臨時存放地址進(jìn)行訪問，并將對應(yīng)的原始圖片顯示于設(shè)計界面。
[0033]具體的，服務(wù)器接收到客戶端發(fā)送的原始圖片文件，將其存儲于服務(wù)器的圖片臨時存放目錄，將圖片臨時存放地址返回給客戶端，以供客戶端根據(jù)圖片臨時存放地址進(jìn)行訪問，并將訪問的原始圖片顯示于客戶端的設(shè)計界面。另外，當(dāng)原始圖片的尺寸大于預(yù)設(shè)尺寸時，客戶端先將原始圖片按照預(yù)設(shè)比例進(jìn)行縮放后再將其顯示于設(shè)計界面上，若原始圖片的尺寸在預(yù)設(shè)尺寸范圍內(nèi)，則直接將原始圖片顯示于設(shè)計界面。
[0034]S4、客戶端根據(jù)用戶在所述設(shè)計界面上的選框截取獲得需要裁剪的圖片區(qū)域，以及獲得設(shè)置的原始圖片裁剪后的顯示尺寸，并將需要裁剪的圖片區(qū)域和原始圖片裁剪后的顯示尺寸以參數(shù)的形式發(fā)送給服務(wù)器。
[0035]具體的，客戶端將原始圖片顯示于設(shè)計界面后，用戶可以通過選框(即拖拽)的形式截取需要裁剪的圖片區(qū)域，另外，用戶還能在設(shè)計界面上設(shè)置原始圖片裁剪后的顯示尺寸?？蛻舳双@取需要裁剪的圖片區(qū)域以及設(shè)置的原始圖片裁剪后的顯示尺寸。具體為:客戶端獲取用戶選框的起始坐標(biāo)，即選框區(qū)域的左上角坐標(biāo)以及選框的寬度和高度，通過選框區(qū)域的左上角坐標(biāo)以及選框的寬度和高度以對選框區(qū)域進(jìn)行定位，以及設(shè)置的原始圖片裁剪后的圖片顯示的寬度和高度?？蛻舳藢@取的選框區(qū)域的左上角坐標(biāo)、選框的寬度和高度、以及裁剪后的圖片的顯示寬度和高度以參數(shù)的形式發(fā)送給服務(wù)器。
[0036]另外，若客戶端上顯示的圖片為按照預(yù)設(shè)比例縮放后的圖片時，客戶端獲取選框區(qū)域的左上角坐標(biāo)、選框的寬度和高度后，按照前述的預(yù)設(shè)比例將選框區(qū)域的左上角坐標(biāo)、選框的寬度和高度換算成與原始圖片尺寸對應(yīng)的左上角坐標(biāo)、選框?qū)挾群透叨取?br>[0037]S5、服務(wù)器根據(jù)需要裁剪的圖片區(qū)域和原始圖片裁剪后的顯示尺寸，對原始圖片進(jìn)行裁剪和縮放處理，得到裁剪后的目標(biāo)圖片并存儲，且將目標(biāo)圖片的存放地址返回給客戶端，以供客戶端根據(jù)目標(biāo)圖片的存放地址顯示裁剪處理后的目標(biāo)圖片
[0038]具體的，服務(wù)器接收到客戶端的裁剪參數(shù)(選框的左上角坐標(biāo)、選框的寬度和高度)以及裁剪后的顯示尺寸，利用后端語言對存儲在圖片臨時存放目錄中的原始圖片進(jìn)行裁剪處理和縮放處理，并對裁剪和縮放處理后的目標(biāo)圖片存儲并將目標(biāo)圖片的存儲地址返回給客戶端，以供客戶端根據(jù)目標(biāo)圖片的存儲地址進(jìn)行訪問，并對目標(biāo)圖片以設(shè)定的尺寸進(jìn)行顯示。另外，當(dāng)客戶端對裁剪和縮放處理后的目標(biāo)圖片進(jìn)行了存儲之后，將圖片臨時存放目錄以及存放的原始圖片刪除。
[0039]參見圖2，圖2為客戶端與服務(wù)器的交互過程示意圖。首先，客戶端從本地讀取需要需要上傳的原始圖片文件，利用iframe標(biāo)簽將原始圖片文件生成form表單，以form表單的形式將原始圖片文件上傳至服務(wù)器，服務(wù)器將其進(jìn)行臨時存儲，并將臨時存儲地址返回給客戶端，以供客戶端根據(jù)臨時存儲地址訪問并將原始圖片顯示于設(shè)計界面上?？蛻舳丝梢垣@取用戶通過選框形式截取需要裁剪的圖片區(qū)域以及設(shè)置裁剪后的圖片的顯示尺寸，并發(fā)送給服務(wù)器，服務(wù)器根據(jù)客戶端發(fā)送的需要裁剪的圖片區(qū)域以及設(shè)置裁剪后的圖片的顯示尺寸，利用后端語言對存儲于臨時存儲目錄中的原始圖片進(jìn)行裁剪和縮放處理，得到目標(biāo)圖片，并存儲目標(biāo)圖片，且將目標(biāo)圖片的存儲地址返回給客戶端，以供客戶端根據(jù)目標(biāo)圖片的存儲地址訪問并以設(shè)定的顯示尺寸進(jìn)行顯示。最后，服務(wù)器將圖片臨時存儲目錄以及存儲的原始圖片刪除。
[0040]實(shí)施例二、一種圖片裁剪系統(tǒng)。下面結(jié)合圖3對本實(shí)施例提供的系統(tǒng)進(jìn)行詳細(xì)說明。
[0041]參見圖3，本實(shí)施例提供的系統(tǒng)包括客戶端I和服務(wù)器2，其中，客戶端I包括圖片上傳模塊11、顯示模塊12、獲取模塊13和發(fā)送模塊14，圖片上傳模塊11進(jìn)一步包括讀取單元111和表單生成單元112 ;服務(wù)器2包括第一存儲模塊21、處理模塊12、第二存儲模塊13和刪除模塊14。
[0042]其中，客戶端I中的圖片上傳模塊11，主要用于從本地選擇需要上傳的原始圖片文件，并上傳至服務(wù)器。
[0043]具體的，圖片上傳模塊11進(jìn)一步包括讀取單元111，用于通過本地存儲的網(wǎng)頁標(biāo)簽，讀取需要上傳的原始圖片文件。圖片上傳模塊112還包括表單生成單元112，用于利用iframe標(biāo)簽