[發(fā)明專利]一種圖片的裁剪方法和瀏覽器裝置

在審

• 申請(qǐng)?zhí)枺?/td>: 201410371235.1
• 申請(qǐng)日: 2014-07-30
• 公開（公告）號(hào): CN105335925A
• 公開（公告）日: 2016-02-17
• 發(fā)明（設(shè)計(jì)）人: 洪曉健;遲曉靚
• 申請(qǐng)（專利權(quán)）人: 北京暢游天下網(wǎng)絡(luò)技術(shù)有限公司
• 主分類號(hào): G06T3/00
• 分類號(hào): G06T3/00;G06F17/30
• 代理公司: 北京潤(rùn)澤恒知識(shí)產(chǎn)權(quán)代理有限公司 11319
• 代理人: 蘇培華

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

本發(fā)明涉及瀏覽器技術(shù)領(lǐng)域，特別是涉及一種圖片的裁剪方法和一種瀏覽器裝置。

背景技術(shù)

用戶使用瀏覽器瀏覽網(wǎng)頁(yè)時(shí)，有時(shí)一些網(wǎng)頁(yè)需要上傳圖片并裁剪后作為用戶標(biāo)識(shí)等信息，例如上傳頭像等。

用戶在瀏覽器中上傳圖片后，通常會(huì)將圖片傳輸給服務(wù)器，并且在頁(yè)面中顯示該圖片，在確定裁切位置的坐標(biāo)后將該坐標(biāo)上傳給服務(wù)器，然后服務(wù)器按照坐標(biāo)對(duì)上傳的圖片進(jìn)行裁剪，并返回裁剪后的圖片以在頁(yè)面中顯示。

但是，在服務(wù)器進(jìn)行裁剪就需要保證將圖片完整的上傳至服務(wù)器，裁剪后的圖片還要反饋給網(wǎng)頁(yè)顯示，圖片裁剪前、后傳輸過(guò)程耗時(shí)較多，且需要消耗較多的網(wǎng)絡(luò)帶寬資源。

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

本發(fā)明實(shí)施例所要解決的技術(shù)問(wèn)題是提供一種圖片的裁剪方法，以解決圖片裁剪過(guò)程中耗時(shí)較長(zhǎng)且浪費(fèi)資源的問(wèn)題。

相應(yīng)的，本發(fā)明實(shí)施例還提供了一種瀏覽器裝置，用以保證上述方法的實(shí)現(xiàn)及應(yīng)用。

為了解決上述問(wèn)題，本發(fā)明公開了一種圖片的裁剪方法，包括：瀏覽器接收上傳圖片并將所述上傳圖片壓縮后顯示在當(dāng)前頁(yè)面的裁剪區(qū)域內(nèi)；在所述裁剪區(qū)域上顯示裁剪框，并依據(jù)指示信息調(diào)整所述裁剪框確定裁剪信息；按照預(yù)置公式采用所述裁剪信息計(jì)算所述上傳圖片對(duì)應(yīng)裁剪圖片的尺寸信息，并按照所述尺寸信息繪制所述裁剪圖片進(jìn)行預(yù)覽顯示；對(duì)所述裁剪圖片進(jìn)行編碼，并將編碼后的裁剪圖片反饋給服務(wù)器，以在所述服務(wù)器中備份所述裁剪圖片。

可選的，將所述上傳圖片壓縮后顯示在當(dāng)前頁(yè)面的裁剪區(qū)域內(nèi)，包括：獲取當(dāng)前頁(yè)面中裁剪區(qū)域的規(guī)格信息，并依據(jù)所述規(guī)格信息對(duì)所述上傳圖片進(jìn)行等比例壓縮；將壓縮后的上傳圖片添加到所述裁剪區(qū)域內(nèi)進(jìn)行顯示。

可選的，所述瀏覽器接收上傳圖片之后，還包括：讀取所述上傳圖片的描述信息，并依據(jù)所述描述信息檢測(cè)所述上傳圖片是否符合圖片規(guī)格條件；在所述傳圖片符合圖片規(guī)格條件時(shí)，執(zhí)行將所述上傳圖片壓縮后顯示在當(dāng)前頁(yè)面的裁剪區(qū)域內(nèi)的步驟。

可選的，在所述裁剪區(qū)域上顯示裁剪框，并依據(jù)指示信息調(diào)整所述裁剪框確定裁剪信息，包括：按照預(yù)置裁剪信息生成裁剪框，并將所述裁剪框遮蓋在所述裁剪區(qū)域內(nèi)的上傳圖片上；監(jiān)聽鼠標(biāo)事件獲取對(duì)所述裁剪框進(jìn)行調(diào)整的指示信息；依據(jù)所述指示信息調(diào)整所述裁剪框的大小范圍，和/或，調(diào)整裁剪框在所述裁切區(qū)域上的位置，確定調(diào)整后的裁剪信息。

可選的，按照預(yù)置公式采用所述裁剪信息計(jì)算所述上傳圖片對(duì)應(yīng)裁剪圖片的尺寸信息，包括：當(dāng)預(yù)置公式為第一公式時(shí)，按照所述第一公式計(jì)算所述裁剪信息對(duì)應(yīng)在所述上傳圖片中的坐標(biāo)信息，確定所述上傳圖片對(duì)應(yīng)裁剪圖片的尺寸信息；和/或，當(dāng)預(yù)置公式為第二公式時(shí)，按照所述第二公式計(jì)算所述裁剪信息對(duì)應(yīng)在壓縮后的上傳圖片中的坐標(biāo)信息，確定所述上傳圖片對(duì)應(yīng)裁剪圖片的尺寸信息。

可選的，按照所述尺寸信息繪制所述裁剪圖片進(jìn)行預(yù)覽顯示，包括：按照所述尺寸信息對(duì)所述上傳圖片和/或壓縮后的上傳圖片進(jìn)行裁剪得到繪制的裁剪圖片；將所述裁剪圖片顯示在當(dāng)前頁(yè)面的預(yù)覽區(qū)域內(nèi)。

可選的，所述對(duì)所述裁剪圖片進(jìn)行編碼，包括：從所述預(yù)覽區(qū)域內(nèi)獲取裁剪圖片，并按照預(yù)置算法對(duì)所述裁剪圖片進(jìn)行編碼。

相應(yīng)的，本發(fā)明實(shí)施例還公開了一種瀏覽器裝置，包括：接收模塊，用于接收上傳圖片；顯示模塊，用于將所述上傳圖片壓縮后顯示在當(dāng)前頁(yè)面的裁剪區(qū)域內(nèi)；裁剪框調(diào)整模塊，用于在所述裁剪區(qū)域上顯示裁剪框，并依據(jù)指示信息調(diào)整所述裁剪框確定裁剪信息；預(yù)覽顯示模塊，用于按照預(yù)置公式采用所述裁剪信息計(jì)算所述上傳圖片對(duì)應(yīng)裁剪圖片的尺寸信息，并按照所述尺寸信息繪制所述裁剪圖片進(jìn)行預(yù)覽顯示；編碼并反饋模塊，用于對(duì)所述裁剪圖片進(jìn)行編碼，并將編碼后的裁剪圖片反饋給服務(wù)器，以在所述服務(wù)器中備份所述裁剪圖片。

可選的，所述顯示模塊，包括：壓縮子模塊，用于獲取當(dāng)前頁(yè)面中裁剪區(qū)域的規(guī)格信息，并依據(jù)所述規(guī)格信息對(duì)所述上傳圖片進(jìn)行等比例壓縮；顯示子模塊，用于將壓縮后的上傳圖片添加到所述裁剪區(qū)域內(nèi)進(jìn)行顯示。

可選的，還包括：檢測(cè)模塊，用于讀取所述上傳圖片的描述信息，并依據(jù)所述描述信息檢測(cè)所述上傳圖片是否符合圖片規(guī)格條件；在所述傳圖片符合圖片規(guī)格條件時(shí)，觸發(fā)顯示模塊。

與現(xiàn)有技術(shù)相比，本發(fā)明實(shí)施例包括以下優(yōu)點(diǎn)：