一種圖片的裁剪方法和瀏覽器裝置的制造方法
【技術(shù)領(lǐng)域】
[0001]本發(fā)明涉及瀏覽器技術(shù)領(lǐng)域,特別是涉及一種圖片的裁剪方法和一種瀏覽器裝置。
【背景技術(shù)】
[0002]用戶(hù)使用瀏覽器瀏覽網(wǎng)頁(yè)時(shí),有時(shí)一些網(wǎng)頁(yè)需要上傳圖片并裁剪后作為用戶(hù)標(biāo)識(shí)等信息,例如上傳頭像等。
[0003]用戶(hù)在瀏覽器中上傳圖片后,通常會(huì)將圖片傳輸給服務(wù)器,并且在頁(yè)面中顯示該圖片,在確定裁切位置的坐標(biāo)后將該坐標(biāo)上傳給服務(wù)器,然后服務(wù)器按照坐標(biāo)對(duì)上傳的圖片進(jìn)行裁剪,并返回裁剪后的圖片以在頁(yè)面中顯示。
[0004]但是,在服務(wù)器進(jìn)行裁剪就需要保證將圖片完整的上傳至服務(wù)器,裁剪后的圖片還要反饋給網(wǎng)頁(yè)顯示,圖片裁剪前、后傳輸過(guò)程耗時(shí)較多,且需要消耗較多的網(wǎng)絡(luò)帶寬資源。
【發(fā)明內(nèi)容】
[0005]本發(fā)明實(shí)施例所要解決的技術(shù)問(wèn)題是提供一種圖片的裁剪方法,以解決圖片裁剪過(guò)程中耗時(shí)較長(zhǎng)且浪費(fèi)資源的問(wèn)題。
[0006]相應(yīng)的,本發(fā)明實(shí)施例還提供了一種瀏覽器裝置,用以保證上述方法的實(shí)現(xiàn)及應(yīng)用。
[0007]為了解決上述問(wèn)題,本發(fā)明公開(kāi)了一種圖片的裁剪方法,包括:瀏覽器接收上傳圖片并將所述上傳圖片壓縮后顯示在當(dāng)前頁(yè)面的裁剪區(qū)域內(nèi);在所述裁剪區(qū)域上顯示裁剪框,并依據(jù)指示信息調(diào)整所述裁剪框確定裁剪信息;按照預(yù)置公式采用所述裁剪信息計(jì)算所述上傳圖片對(duì)應(yīng)裁剪圖片的尺寸信息,并按照所述尺寸信息繪制所述裁剪圖片進(jìn)行預(yù)覽顯示;對(duì)所述裁剪圖片進(jìn)行編碼,并將編碼后的裁剪圖片反饋給服務(wù)器,以在所述服務(wù)器中備份所述裁剪圖片。
[0008]可選的,將所述上傳圖片壓縮后顯示在當(dāng)前頁(yè)面的裁剪區(qū)域內(nèi),包括:獲取當(dāng)前頁(yè)面中裁剪區(qū)域的規(guī)格信息,并依據(jù)所述規(guī)格信息對(duì)所述上傳圖片進(jìn)行等比例壓縮;將壓縮后的上傳圖片添加到所述裁剪區(qū)域內(nèi)進(jìn)行顯示。
[0009]可選的,所述瀏覽器接收上傳圖片之后,還包括:讀取所述上傳圖片的描述信息,并依據(jù)所述描述信息檢測(cè)所述上傳圖片是否符合圖片規(guī)格條件;在所述傳圖片符合圖片規(guī)格條件時(shí),執(zhí)行將所述上傳圖片壓縮后顯示在當(dāng)前頁(yè)面的裁剪區(qū)域內(nèi)的步驟。
[0010]可選的,在所述裁剪區(qū)域上顯示裁剪框,并依據(jù)指示信息調(diào)整所述裁剪框確定裁剪信息,包括:按照預(yù)置裁剪信息生成裁剪框,并將所述裁剪框遮蓋在所述裁剪區(qū)域內(nèi)的上傳圖片上;監(jiān)聽(tīng)鼠標(biāo)事件獲取對(duì)所述裁剪框進(jìn)行調(diào)整的指示信息;依據(jù)所述指示信息調(diào)整所述裁剪框的大小范圍,和/或,調(diào)整裁剪框在所述裁切區(qū)域上的位置,確定調(diào)整后的裁剪信息。
[0011]可選的,按照預(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)裁剪圖片的尺寸信息。
[0012]可選的,按照所述尺寸信息繪制所述裁剪圖片進(jìn)行預(yù)覽顯示,包括:按照所述尺寸信息對(duì)所述上傳圖片和/或壓縮后的上傳圖片進(jìn)行裁剪得到繪制的裁剪圖片;將所述裁剪圖片顯示在當(dāng)前頁(yè)面的預(yù)覽區(qū)域內(nèi)。
[0013]可選的,所述對(duì)所述裁剪圖片進(jìn)行編碼,包括:從所述預(yù)覽區(qū)域內(nèi)獲取裁剪圖片,并按照預(yù)置算法對(duì)所述裁剪圖片進(jìn)行編碼。
[0014]相應(yīng)的,本發(fā)明實(shí)施例還公開(kāi)了一種瀏覽器裝置,包括:接收模塊,用于接收上傳圖片;顯示模塊,用于將所述上傳圖片壓縮后顯示在當(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ù)器中備份所述裁剪圖片。
[0015]可選的,所述顯示模塊,包括:壓縮子模塊,用于獲取當(dāng)前頁(yè)面中裁剪區(qū)域的規(guī)格信息,并依據(jù)所述規(guī)格信息對(duì)所述上傳圖片進(jìn)行等比例壓縮;顯示子模塊,用于將壓縮后的上傳圖片添加到所述裁剪區(qū)域內(nèi)進(jìn)行顯示。
[0016]可選的,還包括:檢測(cè)模塊,用于讀取所述上傳圖片的描述信息,并依據(jù)所述描述信息檢測(cè)所述上傳圖片是否符合圖片規(guī)格條件;在所述傳圖片符合圖片規(guī)格條件時(shí),觸發(fā)顯示模塊。
[0017]與現(xiàn)有技術(shù)相比,本發(fā)明實(shí)施例包括以下優(yōu)點(diǎn):
[0018]瀏覽器接收上傳圖片并將所述上傳圖片壓縮后顯示在當(dāng)前頁(yè)面的裁剪區(qū)域內(nèi);在所述裁剪區(qū)域上顯示裁剪框,并依據(jù)指示信息調(diào)整所述裁剪框確定裁剪信息;按照預(yù)置公式采用所述裁剪信息計(jì)算所述上傳圖片對(duì)應(yīng)裁剪圖片的尺寸信息,并按照所述尺寸信息繪制所述裁剪圖片進(jìn)行預(yù)覽顯示,實(shí)現(xiàn)在瀏覽器中直接對(duì)圖片進(jìn)行裁剪。此后對(duì)所述裁剪圖片進(jìn)行編碼并將編碼后的裁剪圖片反饋給服務(wù)器,從而所述服務(wù)器可以對(duì)裁剪圖片進(jìn)行備份,在減少數(shù)據(jù)量的同時(shí),只需將最終裁剪完成的裁剪圖片反饋服務(wù)器即可,減少了圖片的傳輸時(shí)間。
【附圖說(shuō)明】
[0019]圖1是本發(fā)明的一種圖片的裁剪方法實(shí)施例的步驟流程圖;
[0020]圖2是圖片上傳、裁到TJK意圖;
[0021]圖3是本發(fā)明的一種圖片的裁剪方法實(shí)施例的步驟流程圖;
[0022]圖4是4(a)和4(b)是裁到區(qū)域不意圖;
[0023]圖5(a)和5(b)是圖片裁剪過(guò)程的示意圖;
[0024]圖6是本發(fā)明一種瀏覽器裝置實(shí)施例的結(jié)構(gòu)框圖;
[0025]圖7是本發(fā)明一種瀏覽器裝置實(shí)施例的可選結(jié)構(gòu)框圖。
【具體實(shí)施方式】
[0026]為使本發(fā)明的上述目的、特征和優(yōu)點(diǎn)能夠更加明顯易懂,下面結(jié)合附圖和【具體實(shí)施方式】對(duì)本發(fā)明作進(jìn)一步詳細(xì)的說(shuō)明。
[0027]本發(fā)明實(shí)施例的核心構(gòu)思之一在于,提出一種圖片的裁剪方法,以解決圖片裁剪過(guò)程中耗時(shí)較長(zhǎng)且浪費(fèi)資源的問(wèn)題。其中,瀏覽器接收上傳圖片并將所述上傳圖片壓縮后顯示在當(dāng)前頁(yè)面的裁剪區(qū)域內(nèi);在所述裁剪區(qū)域上顯示裁剪框,并依據(jù)指示信息調(diào)整所述裁剪框確定裁剪信息;按照預(yù)置公式采用所述裁剪信息計(jì)算所述上傳圖片對(duì)應(yīng)裁剪圖片的尺寸信息,并按照所述尺寸信息繪制所述裁剪圖片進(jìn)行預(yù)覽顯示,實(shí)現(xiàn)在瀏覽器中直接對(duì)圖片進(jìn)行裁剪。此后對(duì)所述裁剪圖片進(jìn)行編碼并將編碼后的裁剪圖片反饋給服務(wù)器,從而所述服務(wù)器可以對(duì)裁剪圖片進(jìn)行備份,在減少數(shù)據(jù)量的同時(shí),只需將最終裁剪完成的裁剪圖片反饋服務(wù)器即可,減少了圖片的傳輸時(shí)間。
[0028]參照?qǐng)D1,示出了本發(fā)明的一種圖片的裁剪方法實(shí)施例的步驟流程圖,具體可以包括如下步驟:
[0029]步驟102,瀏覽器接收上傳圖片并將所述上傳圖片壓縮后顯示在當(dāng)前頁(yè)面的裁剪區(qū)域內(nèi)。
[0030]用戶(hù)采用瀏覽器瀏覽網(wǎng)頁(yè)時(shí),有時(shí)一些網(wǎng)頁(yè)需要上傳圖片并裁剪后作為用戶(hù)標(biāo)識(shí),此時(shí)瀏覽器當(dāng)前開(kāi)啟的頁(yè)面內(nèi)上傳相應(yīng)的圖片以對(duì)圖片進(jìn)行處理,瀏覽器可以接收到上傳圖片,然后顯示在當(dāng)前頁(yè)面的裁剪區(qū)域內(nèi),裁剪區(qū)域由于顯示上傳圖片以供選擇裁剪的位置。
[0031]由于上傳圖片通常比較尺寸大,而當(dāng)前頁(yè)面中顯示上傳圖片的裁剪區(qū)域又比較小,無(wú)法顯示全部的上傳圖片,因此可以將上傳圖片進(jìn)行壓縮,然后再顯示在當(dāng)前頁(yè)面的裁剪區(qū)域內(nèi)。
[0032]步驟104,在所述裁剪區(qū)域上顯示裁剪框,并依據(jù)指示信息調(diào)整所述裁剪框確定裁剪信息。
[0033]然后在裁剪區(qū)域上顯示一裁剪框,裁剪框用于確定裁剪的位置,即裁剪框內(nèi)顯示的圖片為裁剪后生成的圖片,可以通過(guò)鼠標(biāo)、鍵盤(pán)等外設(shè)發(fā)送指示信息對(duì)裁剪框進(jìn)行調(diào)整,如調(diào)整裁剪框的大小、位置等,從而確定裁剪信息。
[0034]其中,裁剪信息指的是裁剪框在當(dāng)前壓縮后的上傳圖片的位置信息,通過(guò)裁剪信息可以確定裁剪圖片的尺寸信息。
[0035]步驟106,按照預(yù)置公式采用所述裁剪信息計(jì)算所述上傳圖片對(duì)應(yīng)裁剪圖片的尺寸信息,并按照所述尺寸信息繪制所述裁剪圖片進(jìn)行預(yù)覽顯示。
[0036]本發(fā)明實(shí)施例中預(yù)置了公式計(jì)算裁剪圖片的尺寸信息,其中,可以依據(jù)需求的不同,確定不同尺寸的裁剪圖片,例如對(duì)上傳圖片