一種網(wǎng)頁瀏覽器的Canvas繪圖方法及裝置的制造方法
【技術(shù)領(lǐng)域】
[0001]本發(fā)明涉及圖像處理技術(shù)領(lǐng)域，尤其涉及一種網(wǎng)頁瀏覽器的Canvas繪圖方法及
目.ο
【背景技術(shù)】
[0002]網(wǎng)頁瀏覽器前端程控繪圖的過程模仿了人類自然繪圖的方式，簡單描述為在一定的繪圖空間(畫布)內(nèi)，將“畫筆”反復(fù)在起點與終點間移動，由起點和終點所確定的無數(shù)個點、線、面的集合共同組成最終圖像。
[0003]]^￥1^5是HTML (Hyper Text Markup Language，超文本標(biāo)記語言)最新的修訂版本，2014年10月由W3C(萬維網(wǎng)聯(lián)盟)完成標(biāo)準(zhǔn)制定，目標(biāo)是取代1999年所制定的HTML4.01和XHTML1.0標(biāo)準(zhǔn)，以期能在互聯(lián)網(wǎng)應(yīng)用迅速發(fā)展的時候，使網(wǎng)絡(luò)標(biāo)準(zhǔn)達到符合當(dāng)代的網(wǎng)絡(luò)需求。廣義論及HTML5時，實際指的是包括HTML、CSS (層疊樣式表)和JavaScript在內(nèi)的一套技術(shù)組合，它希望能夠減少網(wǎng)頁瀏覽器對于RIA(Plug-1n-Based Rich InternetApplicat1n，需要插件的富互聯(lián)網(wǎng)應(yīng)用，例如 Adobe Flash、Microsoft SiIverlight、Oracle JavaFX等)的需求，并且提供更多能有效加強互聯(lián)網(wǎng)應(yīng)用的標(biāo)準(zhǔn)集。
[0004]Canvas(畫布)是HTML5中新增的一個重要元素，專門用來繪制圖像，在網(wǎng)頁上放置一個Canvas元素，就相當(dāng)于在網(wǎng)頁上放置一塊“畫布”，可以在其中進行圖像的描繪。HTML5的Canvas使用腳本(通常是JavaScript)在網(wǎng)頁上繪制圖像，在傳統(tǒng)的標(biāo)準(zhǔn)分辨率顯示設(shè)備(簡稱標(biāo)準(zhǔn)顯示設(shè)備)上前端Canvas搭配JavaScript語言編寫繪圖代碼涉及的每個像素與顯示設(shè)備的最小顯示單元一一對應(yīng)，最終渲染輸出的圖像在此顯示設(shè)備上可獲得相對最清晰的效果。
[0005]現(xiàn)有技術(shù)中，標(biāo)準(zhǔn)顯示設(shè)備獲得更高分辨率的方式多為增大顯示面積，以此獲得更多空間用來顯示更多內(nèi)容，例如顯示尺寸由19英寸提升到27英寸(顯示尺寸是指顯像管的可見部分的對角線尺寸，以英寸為單位)，最大分辨率也同時由1280X1024提升到1920X1080或更高。而在新興的高清顯示設(shè)備上，例如視網(wǎng)膜屏幕(分辨率超過人眼識別極限的高分辨率屏幕)、4K/5K屏幕等，更高的分辨率并不用來顯示更多的內(nèi)容，而是用來在同樣面積顯示相同內(nèi)容時提升顯示細(xì)膩度。
[0006]現(xiàn)有技術(shù)中，為了充分發(fā)揮此類高清顯示設(shè)備的顯示能力，需使用比標(biāo)準(zhǔn)顯示設(shè)備上尺寸更大的圖像。以采用視網(wǎng)膜屏幕的iPhone6為例進行說明，需將標(biāo)準(zhǔn)顯示設(shè)備上顯示正常的100X 100像素的圖像重新發(fā)布為200X200像素的圖像；而在iPhone6 Plus上，則需將圖像放大至300X300像素才能獲得最清晰的成像效果。
[0007]而對于沒有進行放大處理的圖像，例如在高清顯示設(shè)備誕生之前已經(jīng)發(fā)布的網(wǎng)頁中所使用的繪圖程序和圖像，或是沒有精力對高清顯示設(shè)備提供支持的情況，高清顯示設(shè)備所使用的軟硬件系統(tǒng)將會自動向下兼容對圖像進行處理后再渲染輸出。高清顯示設(shè)備的自動化處理算法通過將顯示設(shè)備多個最小顯示單元對應(yīng)到原有圖像的一個像素，視覺上將原有圖像進行拉伸放大以保證在“占地面積”上表現(xiàn)正常從而保證既有網(wǎng)頁內(nèi)容排版顯示無誤。
[0008]本發(fā)明人在發(fā)明過程中發(fā)現(xiàn)，為了在高清顯示設(shè)備上獲得清晰的成像效果，同時又保證對既有標(biāo)準(zhǔn)顯示設(shè)備的兼容，不得不對相同圖像發(fā)布多個尺寸規(guī)格以進行適配，造成了存儲空間的浪費以及網(wǎng)絡(luò)傳輸數(shù)據(jù)量的增大。且由于圖像是靜態(tài)的，在需要由程序動態(tài)生成內(nèi)容的場景中此方法會放大上述缺點造成的資源浪費且難以實施。而高清顯示設(shè)備提供的自動化處理方案，借助支持高清顯示設(shè)備的軟硬件系統(tǒng)的兼容能力，在最終成像前自動對圖像進行拉伸放大處理，但對位圖圖像的放大直接導(dǎo)致了模糊現(xiàn)象的產(chǎn)生。

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

[0009]本發(fā)明實施例提供一種網(wǎng)頁瀏覽器的Canvas繪圖方法及裝置，無需針對相同圖像的不同尺寸規(guī)格進行二次或多次重復(fù)開發(fā)，即可在標(biāo)準(zhǔn)顯示設(shè)備和高清顯示設(shè)備上均獲得適用于本設(shè)備的最清晰成像效果，從而有效節(jié)約了存儲空間和網(wǎng)絡(luò)傳輸資源。
[0010]本發(fā)明實施例提供的網(wǎng)頁瀏覽器的Canvas繪圖方法，包括:
[0011]根據(jù)設(shè)置的畫布Canvas的指定尺寸初始化生成Canvas對象，并獲取Canvas繪圖上下文；
[0012]獲取設(shè)備像素比DPR和Canvas繪圖上下文的緩沖區(qū)像素比BSPR，根據(jù)獲取到的DPR值與BSPR值二者之比，確定縮放比例參數(shù)HDPR值；
[0013]實例化Canvas對象，按照確定出的HDPR值對Canvas繪圖上下文進行縮放，按照確定出的HDPR值對Canvas的指定尺寸進行縮放得到Canvas的實際尺寸用以承載繪圖程序產(chǎn)生的圖像數(shù)據(jù)，設(shè)定Canvas的指定尺寸用以頁面內(nèi)容排版；
[0014]網(wǎng)頁瀏覽器基于實例化的Canvas對象進行Canvas繪圖。
[0015]本發(fā)明實施例提供的網(wǎng)頁瀏覽器的Canvas繪圖裝置，包括:
[0016]初始化單元，用于根據(jù)設(shè)置的畫布Canvas的指定尺寸初始化生成Canvas對象，并獲取Canvas繪圖上下文；
[0017]獲取單元，用于獲取設(shè)備像素比DPR和Canvas繪圖上下文的緩沖區(qū)像素比BSPR ;
[0018]確定單元，用于根據(jù)獲取到的DPR值與BSPR值二者之比，確定縮放比例參數(shù)HDPR值；
[0019]繪圖環(huán)境準(zhǔn)備單元，用于實例化Canvas對象，按照確定出的HDPR值對Canvas繪圖上下文進行縮放，按照確定出的HDPR值對Canvas的指定尺寸進行縮放得到Canvas的實際尺寸用以承載繪圖程序產(chǎn)生的圖像數(shù)據(jù)，設(shè)定Canvas的指定尺寸用以頁面內(nèi)容排版。
[0020]本發(fā)明實施例提供的網(wǎng)頁瀏覽器的Canvas繪圖方法及裝置，定義DPR與BSPR 二者之比為縮放比例參數(shù)HDPR，使用自定義的Canvas繪圖裝置替換初始化時網(wǎng)頁瀏覽器的原生Canvas對象，在繪圖環(huán)境準(zhǔn)備環(huán)節(jié)，按照確定出的HDPR值對Canvas繪圖上下文進行縮放，按照確定出的HDPR值對Canvas的指定尺寸進行縮放得到Canvas的實際尺寸用以承載繪圖程序產(chǎn)生的圖像數(shù)據(jù)，設(shè)定Canvas的指定尺寸用以頁面內(nèi)容排版。針對高清顯示設(shè)備來說，經(jīng)過本方案處理的圖像數(shù)據(jù)已經(jīng)按照最終分辨率進行了適應(yīng)性放大，緩沖區(qū)內(nèi)圖像數(shù)據(jù)滿足放大后的成像要求，故最終顯示效果清晰。整個實施過程無需對原有大量的繪圖代碼進行修改；初始化過程可在原有繪圖程序進行繪圖之前全部完成，無需對原有繪圖程序的繪圖邏輯做任何改變即可達到目的，實施簡單快速。
[0021]本申請的其它特征和優(yōu)點將在隨后的說明書中闡述，并且，部分地從說明書中變得顯而易見，或者通過實施本申請而了解。本申請的目的和其他優(yōu)點可通過在所寫的說明書、權(quán)利要求書、以及附圖中所特別指出的結(jié)構(gòu)來實現(xiàn)和獲得。
【附圖說明】
[0022]附圖用來提供對本發(fā)明的進一步理解，并且構(gòu)成說明書的一部分，與本發(fā)明實施例一起用于解釋本發(fā)明，并不構(gòu)成對本發(fā)明的限制。在附圖中:
[0023]圖1為本發(fā)明實施例中網(wǎng)頁瀏覽器的Canvas繪圖方法流程圖；
[0024]圖2為本發(fā)明實施例中網(wǎng)頁瀏覽器的Canvas繪圖裝置框圖。
【具體實施方式】
[0025]本發(fā)明實施例旨在提供一種網(wǎng)頁瀏覽器的Canvas繪圖方法及裝置，無需針對相同圖像的不同尺寸規(guī)格進行二次或多次重復(fù)開發(fā)，即可在標(biāo)準(zhǔn)顯示設(shè)備和高清顯示設(shè)備上均獲得適用于本設(shè)備的最清晰成像效果，從而有效節(jié)約了存儲空間和網(wǎng)絡(luò)傳輸資源。
[0026]以下結(jié)合說明書附圖對本發(fā)明的優(yōu)選實施例進行說明，應(yīng)當(dāng)理解，此處所描述的優(yōu)選實施例僅用于說明和解釋本發(fā)明，并不用于限定本發(fā)明。并且在不沖突的情況下，本申請中的實施例及實施例中的特征可以相互組合。
[0027]現(xiàn)有技術(shù)中，借助高清顯示設(shè)備的自動化處理，其目的只是為了向下兼容未針對高清顯示設(shè)備開發(fā)的網(wǎng)頁內(nèi)容，保證這些既有網(wǎng)頁內(nèi)容在高清顯示設(shè)備上可以正確排版和順利顯示，但對于放大繪圖程序產(chǎn)生的圖像所帶來的模糊問題并沒有進行處理。本發(fā)明實施例提供的網(wǎng)頁瀏覽器的Canvas繪圖方法及裝置，通過識別當(dāng)前顯示環(huán)境，針對高清顯示設(shè)備進行必要處理，使得繪圖程序生成的網(wǎng)頁圖像內(nèi)容動態(tài)適配標(biāo)準(zhǔn)顯示設(shè)備以及高清顯示設(shè)備，不會在標(biāo)準(zhǔn)顯示設(shè)備上進行高清計算而影響性能，而在高清顯示設(shè)備上又可獲得適用于本設(shè)備的清晰成像，以最優(yōu)方案進行匹配，且不造成資源浪費。
[0028]為了便于理解本發(fā)明，首先澄清幾個基本概念，本發(fā)明實施例中，將DPR (devicepixel rat1，設(shè)備像素比)為I的顯示設(shè)備稱之為標(biāo)準(zhǔn)顯示設(shè)備，DPR