，將需要上傳的原始圖片文件生成一個(gè)form表單，圖片上傳模塊11以form表單的形式將原始圖片文件上傳給服務(wù)器2。
[0044]服務(wù)器2中的第一存儲(chǔ)模塊21，主要用于將接收到的原始圖片文件存儲(chǔ)于圖片臨時(shí)存放目錄，并將圖片臨時(shí)存放地址返回給客戶端I。
[0045]客戶端I中的顯示模塊12，主要用于根據(jù)服務(wù)器2返回的圖片臨時(shí)存放地址進(jìn)行訪問，并將對(duì)應(yīng)的原始圖片顯示于設(shè)計(jì)界面。
[0046]具體的，客戶端I根據(jù)圖片臨時(shí)存放地址進(jìn)行訪問，并將訪問的原始圖片顯示于客戶端I的設(shè)計(jì)界面。另外，當(dāng)原始圖片的尺寸大于預(yù)設(shè)尺寸時(shí)，客戶端I先將原始圖片按照預(yù)設(shè)比例進(jìn)行縮放后再將其顯示于設(shè)計(jì)界面上，若原始圖片的尺寸在預(yù)設(shè)尺寸范圍內(nèi)，則直接將原始圖片顯示于設(shè)計(jì)界面。
[0047]獲取模塊13，主要用于根據(jù)用戶在所述設(shè)計(jì)界面上的選框截取獲得需要裁剪的圖片區(qū)域，以及獲得設(shè)置的原始圖片裁剪后的顯示尺寸。
[0048]發(fā)送模塊14，主要用于將需要裁剪的圖片區(qū)域和裁剪后的顯示尺寸以參數(shù)的形式發(fā)送給服務(wù)器2。
[0049]具體的，客戶端I將原始圖片顯示于設(shè)計(jì)界面后，用戶可以通過選框(即拖拽)的形式截取需要裁剪的圖片區(qū)域，另外，用戶還能在設(shè)計(jì)界面上設(shè)置原始圖片裁剪后的顯示尺寸。客戶端I中的獲取模塊13獲取需要裁剪的圖片區(qū)域以及設(shè)置的原始圖片裁剪后的顯示尺寸。具體為:獲取模塊13獲取用戶選框的起始坐標(biāo)，即選框區(qū)域的左上角坐標(biāo)以及選框的寬度和高度，以及設(shè)置的原始圖片裁剪后的圖片顯示的寬度和高度。發(fā)送模塊14將獲取模塊13的選框區(qū)域的左上角坐標(biāo)、選框的寬度和高度、以及裁剪后的圖片的顯示寬度和高度以參數(shù)的形式發(fā)送給服務(wù)器2。
[0050]另外，若客戶端I上顯示的圖片為按照預(yù)設(shè)比例縮放后的圖片時(shí)，獲取模塊13獲取選框區(qū)域的左上角坐標(biāo)、選框的寬度和高度后，按照前述的預(yù)設(shè)比例將選框區(qū)域的左上角坐標(biāo)、選框的寬度和高度換算成與原始圖片尺寸對(duì)應(yīng)的左上角坐標(biāo)、選框?qū)挾群透叨?。發(fā)送模塊14將換算后的選框區(qū)域的左上角坐標(biāo)、選框的寬度和高度以及裁剪后的圖片的顯示寬度和高度以參數(shù)的形式發(fā)送給服務(wù)器2。
[0051]服務(wù)器2中的處理模塊22，主要用于根據(jù)需要裁剪的圖片區(qū)域和裁剪后的顯示尺寸，對(duì)原始圖片進(jìn)行裁剪和縮放處理，得到目標(biāo)圖片。
[0052]第二存儲(chǔ)模塊23，主要用于存儲(chǔ)所述目標(biāo)圖片，且將目標(biāo)圖片的存放地址返回給客戶端，以供客戶端根據(jù)目標(biāo)圖片的存放地址顯示裁剪處理后的目標(biāo)圖片。
[0053]刪除模塊24，主要用于將存儲(chǔ)原始圖片的臨時(shí)存放目錄以及存放的原始圖片刪除。
[0054]本發(fā)明提供的一種圖片裁剪方法及裁剪系統(tǒng)，通過將原始圖片顯示于客戶端的設(shè)計(jì)界面，用戶可以通過選框(即拖拽)的形式選擇需要裁剪的圖片區(qū)域，并能設(shè)置裁剪后的圖片的顯示尺寸，并將裁剪參數(shù)發(fā)送給服務(wù)器，由服務(wù)器的后端語言根據(jù)裁剪參數(shù)對(duì)原始圖片進(jìn)行裁剪，能夠讓后臺(tái)編輯人員進(jìn)行裁剪圖片的上傳，而不需要美工通過PS(photoshop)進(jìn)行圖片的裁剪以及縮放處理，減少了運(yùn)營成本，提供了圖片裁剪的效率。
[0055]另外，采用html4.0技術(shù)能夠兼容所有瀏覽器，通過服務(wù)器的后端語言對(duì)圖片進(jìn)行裁剪和縮放處理，在涉及到圖片路徑跨域時(shí)，也不影響圖片裁剪的處理。
[0056]以上所述僅為本發(fā)明的較佳實(shí)施例，并不用以限制本發(fā)明，凡在本發(fā)明的精神和原則之內(nèi)，所作的任何修改、等同替換、改進(jìn)等，均應(yīng)包含在本發(fā)明的保護(hù)范圍之內(nèi)。
【主權(quán)項(xiàng)】
1.一種圖片裁剪方法，其特征在于，所述方法包括: 51、從本地選擇需要上傳的原始圖片文件，并上傳至服務(wù)器； 52、服務(wù)器將接收到的原始圖片文件存儲(chǔ)于圖片臨時(shí)存放目錄，并將圖片臨時(shí)存放地址返回給客戶端； 53、客戶端根據(jù)所述圖片臨時(shí)存放地址進(jìn)行訪問，并將對(duì)應(yīng)的原始圖片顯示于設(shè)計(jì)界面； 54、客戶端根據(jù)用戶在所述設(shè)計(jì)界面上的選框截取獲得需要裁剪的圖片區(qū)域，以及獲得設(shè)置的原始圖片裁剪后的顯示尺寸，并將需要裁剪的圖片區(qū)域和裁剪后的顯示尺寸以參數(shù)的形式發(fā)送給服務(wù)器； 55、服務(wù)器根據(jù)需要裁剪的圖片區(qū)域和裁剪后的顯示尺寸，對(duì)原始圖片進(jìn)行裁剪和縮放處理，得到目標(biāo)圖片并存儲(chǔ)，且將目標(biāo)圖片的存放地址返回給客戶端，以供客戶端根據(jù)目標(biāo)圖片的存放地址訪問并顯示裁剪處理后的目標(biāo)圖片。2.如權(quán)利要求1所述的一種圖片裁剪方法，其特征在于，所述步驟SI具體包括: 通過本地存儲(chǔ)的網(wǎng)頁標(biāo)簽，讀取需要上傳的原始圖片文件，其中，所述網(wǎng)頁標(biāo)簽基于HTML4.0 標(biāo)準(zhǔn)； 利用iframe標(biāo)簽，將需要上傳的原始圖片文件生成一個(gè)form表單，以form表單的形式將原始圖片文件上傳給服務(wù)器。3.如權(quán)利要求1所述的一種圖片裁剪方法，其特征在于，所述步驟S4具體包括: 根據(jù)用戶在所述設(shè)計(jì)界面上的選框截取獲得選框區(qū)域的左上角坐標(biāo)和選框區(qū)域的寬度和高度，以及獲取通過設(shè)計(jì)界面設(shè)置的原始圖片裁剪后的顯示尺寸，并將所述選框區(qū)域的左上角坐標(biāo)、選框區(qū)域的寬度和高度、以及原始圖片裁剪后的顯示尺寸發(fā)送給服務(wù)器。4.如權(quán)利要求3所述的一種圖片裁剪方法，其特征在于，所述步驟S3還包括: 若對(duì)應(yīng)的原始圖片的尺寸大于預(yù)設(shè)尺寸，則先將原始圖片按照預(yù)設(shè)比例進(jìn)行縮放后，再將縮放后的圖片顯示于設(shè)計(jì)界面； 所述步驟S4中選框區(qū)域的左上角坐標(biāo)和選框區(qū)域的寬度和高度為通過對(duì)縮放后的原始圖片進(jìn)行選框截取后獲得的。5.如權(quán)利要求4所述的一種圖片裁剪方法，其特征在于，所述步驟S4還包括: 根據(jù)所述預(yù)設(shè)比例，將獲取的選框區(qū)域的左上角坐標(biāo)和選框區(qū)域的寬度和高度還原為未縮放前的原始圖片對(duì)應(yīng)的選框區(qū)域的左上角坐標(biāo)和選框區(qū)域的寬度和高度，并將其發(fā)送給服務(wù)器。6.如權(quán)利要求1所述的一種圖片裁剪方法，其特征在于，所述步驟S5還包括: 將存儲(chǔ)原始圖片的圖片臨時(shí)存放目錄以及存放的原始圖片刪除。7.一種圖片裁剪系統(tǒng)，其特征在于，所述系統(tǒng)包括客戶端和服務(wù)器； 所述客戶端包括: 圖片上傳模塊，用于從本地選擇需要上傳的原始圖片文件，并上傳至服務(wù)器； 顯示模塊，用于根據(jù)所述圖片臨時(shí)存放地址進(jìn)行訪問，并將對(duì)應(yīng)的原始圖片顯示于設(shè)計(jì)界面； 獲取模塊，用于根據(jù)用戶在所述設(shè)計(jì)界面上的選框截取獲得需要裁剪的圖片區(qū)域，以及獲得設(shè)置的原始圖片裁剪后的顯示尺寸； 發(fā)送模塊，用于將需要裁剪的圖片區(qū)域和原始圖片裁剪后的顯示尺寸以參數(shù)的形式發(fā)送給服務(wù)器； 所述服務(wù)器包括: 第一存儲(chǔ)模塊，用于將接收到的原始圖片文件存儲(chǔ)于圖片臨時(shí)存放目錄，并將圖片臨時(shí)存放地址返回給客戶端； 處理模塊，用于根據(jù)需要裁剪的圖片區(qū)域和原始圖片裁剪后的顯示尺寸，對(duì)原始圖片進(jìn)行裁剪和縮放處理，得到目標(biāo)圖片； 第二存儲(chǔ)模塊，用于存儲(chǔ)所述目標(biāo)圖片，且將目標(biāo)圖片的存放地址返回給客戶端，以供客戶端根據(jù)目標(biāo)圖片的存放地址訪問并顯示裁剪處理后的目標(biāo)圖片。8.如權(quán)利要求7所述的一種圖片裁剪系統(tǒng)，其特征在于，所述圖片上傳模塊進(jìn)一步包括: 讀取單元，用于通過本地存儲(chǔ)的網(wǎng)頁標(biāo)簽，讀取需要上傳的原始圖片文件，其中，所述網(wǎng)頁標(biāo)簽基于HTML4.0標(biāo)準(zhǔn)； 表單生成單元，用于利用iframe標(biāo)簽，將需要上傳的原始圖片文件生成一個(gè)form表單； 所述圖片上傳模塊以form表單的形式將原始圖片文件上傳給服務(wù)器。9.如權(quán)利要求7所述的一種圖片裁剪系統(tǒng)，其特征在于，所述獲取模塊，用于根據(jù)用戶在所述設(shè)計(jì)界面上的選框截取獲得需要裁剪的圖片區(qū)域，以及獲得設(shè)置的原始圖片裁剪后的顯示尺寸具體包括: 根據(jù)用戶在所述設(shè)計(jì)界面上的選框截取獲得選框區(qū)域的左上角坐標(biāo)和選框區(qū)域的寬度和高度，以及獲取通過設(shè)計(jì)界面設(shè)置的原始圖片裁剪后的顯示尺寸； 所述發(fā)送模塊，用于將需要裁剪的圖片區(qū)域和裁剪后的顯示尺寸以參數(shù)的形式發(fā)送給服務(wù)器具體包括: 將所述選框區(qū)域的左上角坐標(biāo)、選框區(qū)域的寬度和高度、以及原始圖片裁剪后的顯示尺寸發(fā)送給服務(wù)器。10.如權(quán)利要求7所述的一種圖片裁剪系統(tǒng)，其特征在于，所述服務(wù)器還包括: 刪除模塊，用于將存儲(chǔ)原始圖片的圖片臨時(shí)存放目錄以及存放的原始圖片刪除。
【專利摘要】本發(fā)明公開了一種圖片裁剪方法及裁剪系統(tǒng)，所述方法包括：從本地選擇需要上傳的原始圖片文件上傳至服務(wù)器；服務(wù)器將接收到的原始圖片文件存儲(chǔ)于圖片臨時(shí)存放目錄，并將圖片臨時(shí)存放地址返回給客戶端；客戶端根據(jù)所述圖片臨時(shí)存放地址進(jìn)行訪問，并將對(duì)應(yīng)的原始圖片顯示于設(shè)計(jì)界面；根據(jù)用戶的選框截取獲得需要裁剪的圖片區(qū)域，以及獲得設(shè)置的原始圖片裁剪后的顯示尺寸，并以參數(shù)的形式發(fā)送給服務(wù)器；服務(wù)器對(duì)原始圖片進(jìn)行裁剪和縮放處理，得到目標(biāo)圖片并存儲(chǔ)，且將目標(biāo)圖片的存放地址返回給客戶端，以供客戶端顯示裁剪處理后的目標(biāo)圖片。通過本發(fā)明，能夠兼容所有瀏覽器的圖片裁剪工具，且存在圖片路徑跨域時(shí)，也不影響裁剪工具的使用。
【IPC分類】G06F3/0481, G06T3/00, H04L29/06, G06F3/0486
【公開號(hào)】CN105094563
【申請(qǐng)?zhí)枴緾N201510490730
【發(fā)明人】陳朱堯, 薛龍
【申請(qǐng)人】成都視達(dá)科信息技術(shù)有限公司
【公開日】2015年11月25日
【申請(qǐng)日】2015年8月11日