[發(fā)明專利]應(yīng)用于web端的圖片預(yù)處理方法

有效

• 申請(qǐng)?zhí)枺?/td>: 201810973089.8
• 申請(qǐng)日: 2018-08-24
• 公開（公告）號(hào): CN109299412B
• 公開（公告）日: 2022-04-05
• 發(fā)明（設(shè)計(jì)）人: 戴德軍;劉江東;詹偉
• 申請(qǐng)（專利權(quán)）人: 四川愛創(chuàng)科技有限公司
• 主分類號(hào): G06F16/957
• 分類號(hào): G06F16/957;G06T3/40;G06T3/60;G06T9/00
• 代理公司: 成都虹橋?qū)＠聞?wù)所(普通合伙) 51124
• 代理人: 李凌峰

本發(fā)明涉及圖片預(yù)處理技術(shù)領(lǐng)域，解決了現(xiàn)有應(yīng)用于web端的圖片預(yù)處理方法對(duì)計(jì)算機(jī)性能消耗過大，導(dǎo)致操作時(shí)出現(xiàn)圖片粘滯的問題。技術(shù)方案概括為：應(yīng)用于web端的圖片預(yù)處理方法，通過div盒子模型在web端顯示待處理圖片，web端根據(jù)對(duì)待處理圖片進(jìn)行的移動(dòng)、裁剪、旋轉(zhuǎn)及縮放操作，實(shí)時(shí)修改div盒子模型背景圖片的顯示位置數(shù)據(jù)、旋轉(zhuǎn)數(shù)據(jù)或縮放比例數(shù)據(jù)并保存，并實(shí)時(shí)更新顯示出操作后的待處理圖片，經(jīng)操作得到需要的圖片后，利用canvas畫布根據(jù)上述保存的div數(shù)據(jù)繪制需要的圖片得到最終canvas畫布對(duì)象再加以保存或上傳。有益效果是：本發(fā)明節(jié)約了計(jì)算機(jī)性能，使得操作時(shí)圖片不會(huì)粘滯。特別適用于在web端進(jìn)行圖片預(yù)處理。

技術(shù)領(lǐng)域

本發(fā)明涉及圖片預(yù)處理技術(shù)領(lǐng)域，特別涉及基于web端的圖片預(yù)處理技術(shù)領(lǐng)域。

背景技術(shù)

目前應(yīng)用于web端的圖片預(yù)處理方法，在對(duì)圖片的處理過程中采用canvas畫布對(duì)圖片進(jìn)行重繪來跟隨處理過程的變化，由于canvas畫布在繪制時(shí)，每次都是繪制一整張畫布，這樣就導(dǎo)致在圖片快速變化時(shí)非常消耗計(jì)算機(jī)性能，例如在快速移動(dòng)圖片時(shí)，canvas畫布的重繪頻率會(huì)達(dá)到毫秒級(jí)別，以毫秒級(jí)別的頻率重繪canvas畫布是十分消耗性能的，在這種情況下就會(huì)出現(xiàn)圖片粘滯的現(xiàn)象，比如在快速移動(dòng)圖片時(shí)表現(xiàn)為圖片不跟手、卡頓。

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

本發(fā)明要解決現(xiàn)有應(yīng)用于web端的圖片預(yù)處理方法對(duì)計(jì)算機(jī)性能消耗過大，導(dǎo)致操作時(shí)出現(xiàn)圖片粘滯現(xiàn)象的問題，提出一種應(yīng)用于web端的圖片預(yù)處理方法。

為解決上述技術(shù)問題，本發(fā)明采用的技術(shù)方案是：應(yīng)用于web端的圖片預(yù)處理方法，包括以下步驟：

步驟一、通過web端選擇待處理圖片，然后建立待處理圖片的div盒子模型，將待處理圖片作為div盒子模型的背景圖片，并通過展示div盒子模型的背景圖片在web端上顯示出待處理圖片；

步驟二、根據(jù)輸入設(shè)備的信號(hào)，對(duì)待處理圖片進(jìn)行縮放和/或旋轉(zhuǎn)和/或移動(dòng)和/或裁剪操作；

步驟三、web端根據(jù)對(duì)待處理圖片進(jìn)行的移動(dòng)和/或裁剪操作，實(shí)時(shí)修改div盒子模型背景圖片的顯示位置數(shù)據(jù)并保存，根據(jù)對(duì)待處理圖片進(jìn)行的旋轉(zhuǎn)操作，實(shí)時(shí)修改div盒子模型背景圖片的旋轉(zhuǎn)數(shù)據(jù)并保存，根據(jù)對(duì)待處理圖片進(jìn)行的縮放操作，實(shí)時(shí)修改div盒子模型背景圖片的縮放比例數(shù)據(jù)并保存，通過展示div盒子模型的背景圖片在web端上實(shí)時(shí)更新顯示出操作后的待處理圖片；

步驟四、若操作后的待處理圖片不是需要的圖片，則重復(fù)步驟二和步驟三繼續(xù)進(jìn)行操作，若操作后的待處理圖片是需要的圖片，則在確定后執(zhí)行步驟五；

步驟五、web端利用canvas畫布根據(jù)待處理圖片和步驟三中的顯示位置數(shù)據(jù)進(jìn)行繪制得到canvas畫布對(duì)象，并根據(jù)步驟三中的旋轉(zhuǎn)數(shù)據(jù)和縮放比例數(shù)據(jù)對(duì)得到的canvas畫布對(duì)象進(jìn)行旋轉(zhuǎn)和縮放，得到最終效果與需要的圖片完全一樣的最終canvas畫布對(duì)象；

步驟六、將最終canvas畫布對(duì)象保存到本地或上傳到服務(wù)器。

作為進(jìn)一步優(yōu)化，所述步驟六中將最終canvas畫布對(duì)象上傳到服務(wù)器的方法采用：將最終canvas畫布對(duì)象轉(zhuǎn)換成blob圖片對(duì)象，然后將blob圖片對(duì)象進(jìn)行壓縮并轉(zhuǎn)碼為base64或arrayBuffer數(shù)據(jù)上傳至服務(wù)器，服務(wù)器保存base64或arrayBuffer數(shù)據(jù)并將數(shù)據(jù)存儲(chǔ)地址返回給web端，web端根據(jù)該數(shù)據(jù)存儲(chǔ)地址顯示上傳的圖片。通過上述方法直接將最終canvas畫布對(duì)象進(jìn)行處理并上傳到服務(wù)器，同時(shí)在web端預(yù)覽上傳到服務(wù)器中的圖片，實(shí)現(xiàn)了圖片預(yù)處理及上傳的一站式操作，避免了在上傳圖片前還要先從本地選擇文件，使得上傳圖片更加方便。

作為進(jìn)一步優(yōu)化，所述步驟六中將最終canvas畫布對(duì)象轉(zhuǎn)換為圖片格式保存到本地。將預(yù)處理得到的圖片保存到本地，方便查看和使用。