亚洲狠狠干,亚洲国产福利精品一区二区,国产八区,激情文学亚洲色图

Web富媒體跨屏適配方法和裝置的制造方法

文檔序號:10570030閱讀:239來源:國知局
Web富媒體跨屏適配方法和裝置的制造方法
【專利摘要】本發(fā)明涉及一種Web富媒體跨屏適配方法和裝置。所述方法包括以下步驟:獲取瀏覽器的可視區(qū)域的寬和高;獲取富媒體的寬和高;獲取選取的填充模式;根據(jù)所述可視區(qū)域的寬和高、富媒體的寬和高以及選取的填充模式獲取所述富媒體的縮放百分比;根據(jù)所述富媒體的縮放百分比確定所述富媒體在所述可視區(qū)域的位置,將所述富媒體配置在所述可視區(qū)域的相應位置中;對所述富媒體配置在所述可視區(qū)域后的空白像素進行像素填充。上述Web富媒體跨屏適配方法和裝置,使得富媒體在瀏覽器的可視區(qū)域中展示,能夠適配不同屏幕尺寸的設備,不需開發(fā)人員再關注屏幕的適配,提高工作效率。
【專利說明】
Web富媒體跨屏適配方法和裝置
技術領域
[0001] 本發(fā)明涉及圖像處理領域,特別是涉及一種Web富媒體跨屏適配方法和裝置。
【背景技術】
[0002] 用戶通過網(wǎng)絡訪問Web頁面時,有時Web頁面中存在富媒體數(shù)據(jù),為了播放富媒體 數(shù)據(jù),通常在瀏覽器中安裝Flash播放器插件,通過Flash播放器插件播放該富媒體,F(xiàn)lash 播放器插件提供了畫面比例及全屏功能,通過選擇畫面比例實現(xiàn)富媒體畫面顯示比例調(diào)整 和全屏功能實現(xiàn)富媒體的全屏展示。但是許多設備不支持Flash,而采用HTML5(Hyper Text Markup Language,超文本標記語言)構建富媒體應用。由于設備的屏幕尺寸分辨率多種多 樣,目前通過HTML5構建的富媒體應用無法適配各種屏幕尺寸的設備。

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

[0003] 基于此,有必要針對傳統(tǒng)的HTML5構建的富媒體無法適配各種屏幕尺寸的設備的 問題,提供一種Web富媒體跨屏適配方法,能適配不同屏幕尺寸的設備,不需開發(fā)人員再關 注屏幕的適配,提高工作效率。
[0004] 此外,還有必要提供一種Web富媒體跨屏適配裝置,能適配不同屏幕尺寸的設備, 不需開發(fā)人員再關注屏幕的適配,提高工作效率。
[0005] -種Web富媒體跨屏適配方法,包括:
[0006] 通過瀏覽器的HTML中插入的函數(shù)代碼直接執(zhí)行以下步驟:
[0007] 獲取瀏覽器的可視區(qū)域的寬和高;
[0008] 獲取富媒體的寬和高;
[0009] 獲取選取的填充模式;
[0010] 根據(jù)所述可視區(qū)域的寬和高、富媒體的寬和高以及選取的填充模式獲取所述富媒 體的縮放百分比;
[0011] 根據(jù)所述富媒體的縮放百分比確定所述富媒體在所述可視區(qū)域的位置,將所述富 媒體配置在所述可視區(qū)域的相應位置中;
[0012] 對所述富媒體配置在所述可視區(qū)域后的空白像素進行像素填充。
[0013] 一種Web富媒體跨屏適配裝置,包括:
[0014] 第一獲取模塊,用于獲取瀏覽器的可視區(qū)域的寬和高;
[0015] 第二獲取模塊,用于獲取富媒體的寬和高;
[0016] 第三獲取模塊,用于通過瀏覽器的HTML中插入的函數(shù)代碼直接獲取選取的填充模 式;
[0017] 處理模塊,用于通過瀏覽器的HTML中插入的函數(shù)代碼直接根據(jù)所述可視區(qū)域的寬 和高、富媒體的寬和高以及選取的填充模式獲取所述富媒體的縮放百分比;
[0018] 配置模塊,用于通過瀏覽器的HTML中插入的函數(shù)代碼直接根據(jù)所述富媒體的縮放 百分比確定所述富媒體在所述可視區(qū)域的位置,將所述富媒體配置在所述可視區(qū)域的相應 位置中;
[0019]像素填充模塊,用于通過瀏覽器的HTML中插入的函數(shù)代碼直接對所述富媒體配置 在所述可視區(qū)域后的空白像素進行像素填充。
[0020] 上述Web富媒體跨屏適配方法和裝置,通過獲取瀏覽器的可視區(qū)域的寬和高、富媒 體的寬和高以及填充模式,并得到富媒體的縮放百分比,根據(jù)富媒體縮放百分比確定富媒 體在可視區(qū)域的位置,并對配置富媒體到可視區(qū)域后的空白像素進行填充,使得富媒體在 瀏覽器的可視區(qū)域中展示,能夠適配不同屏幕尺寸的設備,不需開發(fā)人員再關注屏幕的適 配,提高工作效率;且對富媒體進行像素填充,使得產(chǎn)生超分辨率的縮放效果。
【附圖說明】
[0021] 圖1為一個實施例中終端的內(nèi)部結構示意圖;
[0022]圖2為一個實施例中Web富媒體跨屏適配方法的流程圖;
[0023] 圖3為一個實施例中選取填充模式的界面示意圖;
[0024] 圖4為圖3中選取拉伸填充模式的示意圖;
[0025] 圖5為一個實施例中選取適應模式的效果示意圖;
[0026]圖6為一個實施例中拉伸模式的效果不意圖;
[0027] 圖7A為原始圖像再瀏覽器中的示意圖;
[0028] 圖7B為全屏適配后,光標移入出現(xiàn)全屏按鈕;
[0029]圖7C為全屏展示的效果示意圖;
[0030]圖8為一個實施例中Flappy Bird富媒體在fill模式下適配不同屏幕尺寸的結果 示意圖;
[0031]圖9為一個實施例中Flappy Bird富媒體在fit模式下適配不同屏幕尺寸的結果示 意圖;
[0032]圖10為一個實施例中Web富媒體跨屏適配裝置的結構框圖。
【具體實施方式】
[0033]為了使本發(fā)明的目的、技術方案及優(yōu)點更加清楚明白,以下結合附圖及實施例,對 本發(fā)明進行進一步詳細說明。應當理解,此處所描述的具體實施例僅僅用以解釋本發(fā)明,并 不用于限定本發(fā)明。
[0034]可以理解,本發(fā)明所使用的術語"第一"、"第二"等可在本文中用于描述各種元件, 但這些元件不受這些術語限制。這些術語僅用于將第一個元件與另一個元件區(qū)分。舉例來 說,在不脫離本發(fā)明的范圍的情況下,可以將第一客戶端稱為第二客戶端,且類似地,可將 第二客戶端稱為第一客戶端。第一客戶端和第二客戶端兩者都是客戶端,但其不是同一客 戶端。
[0035]圖1為一個實施例中終端的內(nèi)部結構示意圖。如圖1所示,該終端包括通過系統(tǒng)總 線連接的處理器、非易失性存儲介質(zhì)、內(nèi)存、網(wǎng)絡接口、顯示屏和輸入裝置。其中,終端的非 易失性存儲介質(zhì)存儲有操作系統(tǒng),還包括一種Web富媒體跨屏適配裝置。該處理器用于提供 計算和控制能力,支撐整個終端的運行,被用于執(zhí)行Web富媒體跨屏視頻方法的流程步驟。 終端中的網(wǎng)絡接口用于與服務器進行網(wǎng)絡通信,如發(fā)送富媒體數(shù)據(jù)至服務器,接收服務器 返回的富媒體數(shù)據(jù)等。終端的顯示屏可以是液晶顯示屏或者電子墨水顯示屏等,輸入裝置 可以是顯示屏上覆蓋的觸摸層,也可以是終端外殼上設置的按鍵、軌跡球或觸控板,也可以 是外接的鍵盤、觸控板或鼠標等。該終端可以是內(nèi)置瀏覽器或Webview的計算機、手機、電視 機、個人數(shù)字助理、手表或穿戴式設備等。本領域技術人員可以理解,圖1中示出的結構,僅 僅是與本申請方案相關的部分結構的框圖,并不構成對本申請方案所應用于其上的終端的 限定,具體的終端可以包括比圖中所示更多或更少的部件,或者組合某些部件,或者具有不 同的部件布置。
[0036]圖2為一個實施例中Web富媒體跨屏適配方法的流程圖。如圖2所示,一種Web富媒 體跨屏適配方法,包括以下步驟:
[0037] 步驟202,獲取瀏覽器的可視區(qū)域的寬和高。
[0038] 本實施例中,通過瀏覽器的HTML中的函數(shù)代碼window. innerWidth和 window. innerHeight直接獲取瀏覽器的可視區(qū)域的寬和高。
[0039]步驟204,獲取富媒體的寬和高。
[0040] 本實施例中,通過瀏覽器的HTML中的函數(shù)代碼canvas. width和canvas. height直 接獲取富媒體的寬和高。富媒體是指canvas/webgl寫的應用程序或游戲等,不限于此。
[00411步驟206,獲取選取的填充模式。
[0042]本實施例中,通過瀏覽器的HTML中的函數(shù)代碼直接獲取選取的填充模式。 alloyscreen提供了四種填充模式用于展示比例調(diào)節(jié),并提供了restore還原初始狀態(tài)。填 充模式可包括fit適應、fill填充、拉伸(stretch)、居中(center)。
[0043]其中,fit適應方式是指顯示比例不變,左右撐滿或上下?lián)螡M,無圖像信息丟失,一 般情況下會出現(xiàn)左右黑邊或上下黑邊。
[0044] fill填充模式是指顯示比例不變,撐滿可視區(qū)域,以丟失部分圖像的成本,保證不 發(fā)生變形。
[0045]拉伸方式是指寬高撐滿可視區(qū)域,一般情況下會發(fā)生變形。
[0046] center居中方式是指顯示比例不便,寬高不變,在可視區(qū)域居中顯示。
[0047]可視區(qū)域可為終端的整個屏幕或部分屏幕等。
[0048] 為了實現(xiàn)fit適應方式可在Web程序的HTML中插入對應的代碼,如代碼如下: 〈script src=".?/,./alloy_screen.js"></sci'ipt> <script>
[0049] Vai. as=n.ew AlloyS:Green("#ourl、anvas") As.fit(); </sGript>
[0050] 其中,#ourCanvas為 i d (標識)是 ourCanvas 的 canvas,需要添加 f i t 效果的 canvas。 canvas是圖形容器。
[0051]同理為了實現(xiàn)其他的填充模式,可將上述代碼中fit()代替為對應的填充模式。
[0052]圖3為一個實施例中選取填充模式的界面示意圖。如圖3所示,在菜單界面中可選 擇分辨率、填充模式、全屏、音效大小調(diào)節(jié)、音樂音量大小調(diào)節(jié)等。填充模式以下拉框的方式 顯示有fit適應、fill填充、拉伸、居中。
[0053]圖4為圖3中選取拉伸填充模式的示意圖。如圖4所示,分辨率為1366*768,填充模 式為拉伸。
[0054]步驟208,根據(jù)該可視區(qū)域的寬和高、富媒體的寬和高以及選取的填充模式獲取該 富媒體的縮放百分比。
[0055] 通過瀏覽器的HTML中插入的函數(shù)代碼直接根據(jù)可視區(qū)域的寬和高、富媒體的寬和 高以及選取的填充模式獲取該富媒體的縮放百分比。
[0056] 步驟210,根據(jù)該富媒體的縮放百分比確定該富媒體在該可視區(qū)域的位置,將該富 媒體配置在該可視區(qū)域的相應位置中。
[0057] 本實施例中,通過瀏覽器的H T M L中插入的函數(shù)代碼直接使用 this ? canvas ? getBoundingClientRect()確定富媒體在CSS(Cascading Style Sheets,層 疊樣式表)中的位置。使用CSS Position Fixed固定富媒體在CSS中的位置。
[0058] 步驟212,對該富媒體配置在該可視區(qū)域后的空白像素進行像素填充。
[0059] 本實施例中,通過瀏覽器的HTML中插入的函數(shù)代碼直接對富媒體配置在可視區(qū)域 后的空白像素采用插值法進行像素填充。
[0060] 圖像插值就是利用已知鄰近像素點的灰度值或RGB圖像中的三色值來產(chǎn)生未知像 素點的灰度值,以便由原始圖像再生出具有更高分辨率的圖像。
[0061 ] 該插值法可包括最近鄰元插值法(nearest neighbor interpolation)、雙線性內(nèi) 插法(bilinear interpolation)、三次卷積內(nèi)插法(cubic convolution interpolation)。
[0062] 其中,最近鄰元插值法:對于通過反向變換得到的一個浮點坐標,對其進行簡單的 取整,得到一個整數(shù)型坐標,這個整數(shù)型坐標對應的像素值就是目的像素的像素值,也就是 說,取浮點坐標最鄰近的左上角點(對于DIB是右上角,因為它的掃描行是逆序存儲的)對應 的像素值。可見,最鄰近插值簡單且直觀。
[0063] 雙線性內(nèi)插值:對于一個目的像素,設置坐標通過反向變換得到的浮點坐標為(i+ u,j+v),其中i、j均為非負整數(shù),u、v為[0,1)區(qū)間的浮點數(shù),貝lj這個像素得值f (i+u,j+v)可 由原圖像中坐標為(i,j)、( i+1,j)、( i,j+1)、( i+1,j+1)所對應的周圍四個像素的值決定, 即:
[0064] f(i+u, j+v) = (l-u)(l-v)f(i , j) + (l-u)vf(i, j+l)+u(l-v)f (i+1, j)+uvf (i+1, j+ 1)其中,f(i,j)表示源圖像(i,j)處的的像素值,以此類推。
[0065]雙線性內(nèi)插值法計算量大,但縮放后圖像質(zhì)量高,不會出現(xiàn)像素值不連續(xù)的的情 況。由于雙線性插值具有低通濾波器的性質(zhì),使高頻分量受損,所以可能會使圖像輪廓在一 定程度上變得模糊。
[0066]三次卷積法的計算精度高,其考慮一個浮點坐標(i+u,j+v)周圍的16個鄰點,目的 像素值f(i+u, j+v)可由如下插值公式得到:f(i+u, j+v) = [A]*[B]*[C]
[0067] [A] = [S(u+l)S(u+0)S(u-l)S(u-2)] - r(/-1、/-1) /(/--!,/ + 0) /(/ -1,/ + 1) f(i-\,j + 2)~
[0068] m= f(/ + 0^'-1) /〇' + 〇5i' + 〇) ./〇' + 〇v/ + l) /(/ + 0,7+2) + /(/+l,./ + 〇) /(/ + !,./ + D /(/ + l,./ + 2) _f(f+2J-l) /(/ + 2J+0) /(/4-2,./-i-l) /(f+2J + 2)_ '^(v + l)' S(v+0)
[0069] [C] = S(v -1) _5(v-2)_ 1 - 2s:" ,4/xv(a'): -f Ahs(x) ' ,0 < Abs(x) < 1
[0070] S{ v) =4-8* ^fov(,v)f5^ Abs(x)" - /ib.v(A*)\() < Abs(x) < 2 0 , Abs(x) > 2
[0071 ] S(x)是對Sin(x*Pi)/x的逼近(Pi是圓周率--n)。
[0072]上述Web富媒體跨屏適配方法,通過獲取瀏覽器的可視區(qū)域的寬和高、富媒體的寬 和高以及填充模式,并得到富媒體的縮放百分比,根據(jù)富媒體縮放百分比確定富媒體在可 視區(qū)域的位置,并對配置富媒體到可視區(qū)域后的空白像素進行填充,使得富媒體在瀏覽器 的可視區(qū)域中展示,能夠適配不同屏幕尺寸的設備,不需開發(fā)人員再關注屏幕的適配,提高 工作效率;且對富媒體進行像素填充,使得產(chǎn)生超分辨率的縮放效果。
[0073] 在一個實施例中,根據(jù)該可視區(qū)域的寬和高、富媒體的寬和高以及選取的填充模 式獲取該富媒體的縮放百分比包括:
[0074] 若選取的填充模式為fit適應,獲取該富媒體寬高比與該可視區(qū)域的寬高比的比 值,當該比值大于1,則該富媒體的寬度百分比為100%,該富媒體的高度百分比為該可視區(qū) 域的寬高比與該富媒體的高寬比乘積的百分比,該富媒體的高度方向上的頂部距該可視區(qū) 域的高度方向上的頂部的百分比為1 〇 〇 %減去該富媒體的高度百分比后再除以2,該富媒體 的寬度方向上的第一側距該可視區(qū)域的寬度方向上的第一側的百分比為〇;
[0075] 當該比值小于或等于1,則該富媒體的高度百分比為100%,該富媒體的寬度百分 比為該可視區(qū)域的高寬比與該富媒體的寬高比乘積的百分比,該富媒體的高度方向上的頂 部距該可視區(qū)域的高度方向上的頂部的百分比為〇,該富媒體的寬度方向上的第一側距該 可視區(qū)域的寬度方向上的第一側的百分比為100%減去該富媒體的寬度百分比后再除以2。
[0076] 圖5為一個實施例中選取適應模式的效果示意圖。如圖5所示,填充模式為適應模 式,則顯示比例不變,富媒體的寬高比與可視區(qū)域的寬高比的比值大于1,富媒體的寬度百 分比為100%,即撐滿左右;富媒體的高度百分比為該可視區(qū)域的寬高比與該富媒體的高寬 比乘積的百分比。該富媒體的高度方向上的頂部距該可視區(qū)域的高度方向上的頂部的百分 比為100%減去該富媒體的高度百分比后再除以2,也就是上下出現(xiàn)黑色區(qū)域。
[0077] 若選取的填充模式為fill填充,則獲取該富媒體寬高比與該可視區(qū)域的寬高比的 比值,當該比值大于1,則該富媒體的高度百分比為100%,該富媒體的寬度百分比為該可視 區(qū)域的高寬比與該富媒體的寬高比乘積的百分比,該富媒體的高度方向上的頂部距該可視 區(qū)域的高度方向上的頂部的百分比為〇,該富媒體的寬度方向上的第一側距該可視區(qū)域的 寬度方向上的第一側的百分比為100%減去該富媒體的寬度百分比后再除以2;
[0078] 當該比值小于或等于1,則該富媒體的寬度百分比為100%,該富媒體的高度百分 比為該可視區(qū)域的寬高比與該富媒體的高寬比乘積的百分比,該富媒體的高度方向上的頂 部距該可視區(qū)域的高度方向上的頂部的百分比為100%減去該富媒體的高度百分比后再除 以2,該富媒體的寬度方向上的第一側距該可視區(qū)域的寬度方向上的第一側的百分比為0。
[0079] 若選取的填充模式為拉伸,則該富媒體的寬度百分比為100%,該富媒體的高度百 分比為10 0 %,該富媒體的高度方向上的頂部距該可視區(qū)域的高度方向上的頂部的百分比 為0,該富媒體的寬度方向上的第一側距該可視區(qū)域的寬度方向上的第一側的百分比為0。
[0080] 圖6為一個實施例中拉伸模式的效果示意圖。如圖6所示,富媒體的圖像被拉伸后, 圖像發(fā)生了變形。
[0081] 若選取的填充模式為居中,則該富媒體的寬度為該富媒體的原始寬度,該富媒體 的高度為該富媒體的原始高度,該富媒體的高度方向上的頂部距該可視區(qū)域的高度方向上 的頂部為該可視區(qū)域的高度與該富媒體的高度的差的一半,該富媒體的寬度方向上的第一 側與該可視區(qū)域的寬度方向上的第一側的距離為該可視區(qū)域的寬度與該富媒體的寬度的 差的一半。
[0082]上述各填充模式計算富媒體的縮放百分比的代碼可如下,其中,width和height分 別是可視區(qū)域的寬和高,canvasWidth和canvasHeight分別是指富媒體的寬和高;rate為 (this ? canvasWidth/this ? canvasHeight)/(this .width/this .height)的值。 flt:function(){ //適應 fit 買現(xiàn) this.type="fit";
[0083] if(this.rate>l){ //當 rate 大于 1 this._fltorfillHeight(); //設置富媒體的高度 ]else{ this._fitorfill\Vidth( ); //設置富媒體的寬度 } }, fi!l:function( ){ /7fi丨丨填充實現(xiàn) this.typc=*'fiir,; if(this.rate>l){ //當.rate.大于 1 lhis._rilorfillWidih{ ); //設置富嫫體的寬度 .else; tliis,_fitorfiliHeight(); .//設置冨媒體的高度 } h. ru〇rri!IHeight;.runclion() { this._before{); var height=this/vyidth^thisxan¥asHeiglil/this,caiiva$width/tliia.heigM [0084] _ , this. _css{ this.canvas^ { "lefTf 'Opx", //left 為 0 "top":( 10()-heighi)/2+"lMr,//top 為(10()-lieigVi)/2*% "Width":5'100%", //寬度為 100% '免eight":height+"%" //高度為高度加上% f); }, _fi to rfi I! vvi dti 1: fu n c f i o 11 ( ) { This._before(); 上 eight*tWs*can^_idth/tMsxaiivasHteight/this-wMth#100; This.__css(this,canvas9 { "lefT:( ( lOO-width) /2)+"%, //left 為 U00-width) /2,%
[0085] 1〇|)":"0難", //top 為 0 '?width":width+"%", //width 的百分比為 width% "heigh廣:" 100%" //高度百分比為100% }); Stretch:function( ){ //拉伸實現(xiàn) Tlai.s,type="stretcli,,; This._bcforc(); This._css(this.canvas, { "left'V'Opx", //left 為 0 "top'V'Opx", //top 為 0 '?width":" 100%", //寬度苜分比為 1 ()0% '?height":" 100%" //高度百分 A為丨 00% }); }5 Center:function(){ //居中模式實現(xiàn) This, type:' 'center"; This._befbre"; This._css(this.canvas, i "left":(this.,width-this,canvas\vidrh)/2+"px", //left 為可視區(qū)域的覽度減去富 媒體寬度之差的一半 "k>p":(lhis.lidght-lhisxanvasHeiglr!.)Z2+"px",//U)p 為可視區(qū)域的高 媒體高度之差的一半 "wi<ith"_:thi_s,.ess.Width, "寬度為原冨媒體寬度 "heighr:this.cssl [eight .//高度為原富媒體高度 });
[0086] 其中,表示除法運算,表示乘法運算。
[0087] 在一個實施例中,上述Web富媒體跨屏適配方法還包括:提供全屏組件,并將全屏 組件展示在富媒體上;獲取對該全屏組件的觸發(fā)操作,將富媒體進行全屏展示或退回到原 始狀態(tài)。全屏模式的實現(xiàn)可采用如下代碼實現(xiàn): <script src=,,../../alloy_screen,js,,x/scnpt> <script src=,,../../alIoy_screen.ui.js,?></script> <script> var au=riew AlloyScreen.UI("#ourCanvas",{
[0088] type:"center", //填充模式為居中模式 fullscreen:".'/asset/fullscreen.png", //全屏展示 :exit:"../asset/fullsci.een_exiLpng" //退出全屏 }); </script>
[0089] 在Web程序的HTML中插入上述代碼,其中,#ourCanvas為id是ourCanvas的canvas, 需要添加全屏效果的canvas,其中的center代表填充模式,即顯示比例不變,寬高不變,居 中顯示。
[0090] 全屏是指載體(設備的瀏覽器或應用程序里的webview)內(nèi)部全屏。當瀏覽器或 webview等是全屏時,富媒體也是全屏;當瀏覽器或webview等是分屏時,富媒體處于分屏。 不論載體是全屏還是分屏都可采用上述Web富媒體跨屏適配方法對富媒體進行處理。
[0091]在一個實施例中,上述Web富媒體跨屏視頻方法還包括:獲取交互行為發(fā)生點的真 實坐標位置。
[0092]交互行為發(fā)生點是指用戶觸摸或點擊或其他交互行為產(chǎn)生的位置。
[0093]具體地,若富媒體canvas被各種css width和height屬性放大或縮小,交互行為發(fā) 生點相對于左上角的實際坐標重新計算。若富媒體canvas有top boder或者left boder,交 互行為發(fā)生點相對于左上角的實際坐標要減去boder的寬度。若boxsizing(盒子模型類型) 為boder-box,交互行為發(fā)生點相對于左上角的實際坐標重新計算。
[0094] 具體如下:
[0095] "getstyle" : futieti0n( ){ var style=window.getComputedstyie (thisxanvas, null); //獲取富媒體的 樣式信息 return { Boxsizing:styie.boxsizing, border TopWidth: parse丨nt (style.borderTopWidtli).,//上部分邊框筧度 borderLeftWidth: parselm (style.borderLeftWidlh),V左邊邊框?qū)挾?width:parselnt ( style.width )- //哭形后的筧度 height:parseliit ( style.lieight) //變形.后的高度. I; }, ^-eorreetion^ifuiiGtion (pageX,pageT ) { var x=pageX-this.offset[0]-this.styIe.borderLefiWidth, //x 的坐標 y=pagcY-this.offsctf l]-this.siylc.bordcrTopWidth, //y 的坐標 can vas Wi dtl v-tli i s. sty I e. w i dtli, /7'IT媒體更形后的真買寬度 canvaslleight=this.style.height: //富媒體變形后的真買高度 ifCthi.s. sty.k.bQxsizing=='%Q]:der-bQ.x" "邊框盒 canvasWidtlnhis.style.borderLeftwidth;富媒侔7更形后的真.實寬度 canvasHcight-=this.sty丨c. borderTopwidth;富媒體變形后的真實高度 return{x:this.Vvidrh*x/canvasWidth?, y^his.height^y/canvasHeight}; }
[0096] 其中,先獲取富媒體的樣式信息,boxsizing盒子模型類型,borderTopWidth為上 部分邊框?qū)挾龋琤orderLeftWidth為左部分邊框?qū)挾?,width為變形后寬度,height為變形后 高度,pageX,pageY為交互行為發(fā)生點的坐標位置,this .offset[0]和this .offset[1]為富 媒體左上角坐標在文檔中的偏移量。
[0097]使用 pageX-this.offset[0]-borderLeftWidth得到x 坐標,使用卩&86丫_ this. of f set [ 1 ]_borderTopWidth得到y(tǒng)坐標。若盒子模型類型為邊框盒,則canvasWidth為 富媒體變形后的真實寬度,等于width減去borderLeftWidth得到,canvasHeight為富媒體 變形后的真實高度,等于height減去borderTopWidth得到。this, width為富媒體的真實寬 度,this, height為富媒體的真實高度。
[0098] 富媒體的真實寬度與富媒體變形后的真實寬度比值再乘以x坐標得到真實的坐標 X,富媒體的真實高度與富媒體變形后的真實高度比值再乘以y坐標得到真實的坐標y。
[0099] 圖7A為原始圖像在瀏覽器中的示意圖;圖7B為全屏適配后,光標移入出現(xiàn)全屏按 鈕;圖7C為全屏展示的效果示意圖。如圖7A所示,圖像占瀏覽器的可視區(qū)域的一部分;如圖 7B所示,光標移入后在圖像的右上角出現(xiàn)了全屏按鈕;如圖7C所示,點擊全屏按鈕后,圖像 進行全屏展示,圖像的填充方式為居中,則圖像位于可視區(qū)域中間,其他采用黑色填充。 [0 100]圖8為一個實施例中Flappy Bird富媒體在fill模式下適配不同屏幕尺寸的結果 示意圖。如圖8所示,第一尺寸、第二尺寸、第三尺寸和第四尺寸,且第一尺寸、第二尺寸、第 三尺寸和第四尺寸逐漸減小。Flappy Bird富媒體在fill模式下將第一尺寸、第二尺寸、第 三尺寸和第四尺寸屏幕均填滿。
[0101]圖9為一個實施例中Flappy Bird富媒體在fit模式下適配不同屏幕尺寸的結果示 意圖。如圖9所示,第一尺寸、第二尺寸、第三尺寸和第四尺寸,且第一尺寸、第二尺寸、第三 尺寸和第四尺寸逐漸減小。Flappy Bird富媒體在fit模式下將第二尺寸、第三尺寸和第四 尺寸屏幕均填滿,在第一尺寸屏幕上將上下?lián)螡M,左右黑邊。
[0102] 此外,center上尺寸比例不變居中stretch是拉伸填滿屏幕。
[0103] 需要說明的是,上述Web富媒體跨屏適配方法,可適用于canvas/webgl或者Dom里 內(nèi)嵌的canvas/webgl的個人計算機或移動終端的網(wǎng)站或者HTML5動感創(chuàng)意網(wǎng)站或個人計算 機或移動終端HTML5游戲應用等的適配,甚至適用于任意圖片及HTML5SVG(Scalable Vector Graphics,可縮放矢量圖形)和HTML5Video的展示和播放,讓開發(fā)人員不再關注屏 幕的適配,專注于視覺的還原、交互和業(yè)務邏輯的實現(xiàn),大大提高了工作效率。
[0104] 相比于Flash,F(xiàn)lash是以插件形式存在瀏覽器中,且僅限于視頻播放,且與某些設 備的軟件系統(tǒng)兼容性差。上述Web富媒體跨屏適配方法采用瀏覽器的HTML中插入函數(shù)代碼 直接實現(xiàn),適用包含HTML5的復雜應用和游戲的適配和全屏,甚至適用于任意圖片及 HTML5SVG和HTML5Video的展示和播放。
[0105]圖10為一個實施例中Web富媒體跨屏適配裝置的結構框圖。如圖10所示,一種Web 富媒體跨屏適配裝置,包括第一獲取模塊1002、第二獲取模塊1004、第三獲取模塊1006、處 理模塊1008、配置模塊1010和像素填充模塊1012。其中:
[0106] 第一獲取模塊1002用于通過瀏覽器的HTML中插入的函數(shù)代碼直接獲取瀏覽器的 可視區(qū)域的寬和高;
[0107] 第二獲取模塊1004用于通過瀏覽器的HTML中插入的函數(shù)代碼直接獲取富媒體的 寬和高;
[0108] 第三獲取模塊1006用于通過瀏覽器的HTML中插入的函數(shù)代碼直接獲取選取的填 充模式;
[0109] 處理模塊1008用于通過瀏覽器的HTML中插入的函數(shù)代碼直接根據(jù)該可視區(qū)域的 寬和高、富媒體的寬和高以及選取的填充模式獲取該富媒體的縮放百分比;
[0110] 配置模塊1010用于通過瀏覽器的HTML中插入的函數(shù)代碼直接根據(jù)該富媒體的縮 放百分比確定該富媒體在該可視區(qū)域的位置,將該富媒體配置在該可視區(qū)域的相應位置 中;
[0111] 像素填充模塊1012用于通過瀏覽器的HTML中插入的函數(shù)代碼直接對該富媒體配 置在該可視區(qū)域后的空白像素進行像素填充。
[0112] 本實施例中,該像素填充模塊1012還用于對該富媒體配置在該可視區(qū)域后的空白 像素采用插值法進行像素填充。
[0113] 上述Web富媒體跨屏適配裝置,通過獲取瀏覽器的可視區(qū)域的寬和高、富媒體的寬 和高以及填充模式,并得到富媒體的縮放百分比,根據(jù)富媒體縮放百分比確定富媒體在可 視區(qū)域的位置,并對配置富媒體到可視區(qū)域后的空白像素進行填充,使得富媒體在瀏覽器 的可視區(qū)域中展示,能夠適配不同屏幕尺寸的設備,不需開發(fā)人員再關注屏幕的適配,提高 工作效率;且對富媒體進行像素填充,使得產(chǎn)生超分辨率的縮放效果。
[0114] 在一個實施例中,該處理模塊1008還用于若選取的填充模式為fit適應,獲取該富 媒體寬高比與該可視區(qū)域的寬高比的比值,當該比值大于1,則該富媒體的寬度百分比為 100%,該富媒體的高度百分比為該可視區(qū)域的寬高比與該富媒體的高寬比乘積的百分比, 該富媒體的高度方向上的頂部距該可視區(qū)域的高度方向上的頂部的百分比為100%減去該 富媒體的高度百分比后再除以2,該富媒體的寬度方向上的第一側距該可視區(qū)域的寬度方 向上的第一側的百分比為0;
[0115] 當該比值小于或等于1,則該富媒體的高度百分比為100%,該富媒體的寬度百分 比為該可視區(qū)域的高寬比與該富媒體的寬高比乘積的百分比,該富媒體的高度方向上的頂 部距該可視區(qū)域的高度方向上的頂部的百分比為〇,該富媒體的寬度方向上的第一側距該 可視區(qū)域的寬度方向上的第一側的百分比為100%減去該富媒體的寬度百分比后再除以2; [0116]以及該處理模塊1008還用于若選取的填充模式為fill填充,則獲取該富媒體寬高 比與該可視區(qū)域的寬高比的比值,當該比值大于1,則該富媒體的高度百分比為100%,該富 媒體的寬度百分比為該可視區(qū)域的高寬比與該富媒體的寬高比乘積的百分比,該富媒體的 高度方向上的頂部距該可視區(qū)域的高度方向上的頂部的百分比為0,該富媒體的寬度方向 上的第一側距該可視區(qū)域的寬度方向上的第一側的百分比為100%減去該富媒體的寬度百 分比后再除以2;
[0117]當該比值小于或等于1,則該富媒體的寬度百分比為100%,該富媒體的高度百分 比為該可視區(qū)域的寬高比與該富媒體的高寬比乘積的百分比,該富媒體的高度方向上的頂 部距該可視區(qū)域的高度方向上的頂部的百分比為100%減去該富媒體的高度百分比后再除 以2,該富媒體的寬度方向上的第一側距該可視區(qū)域的寬度方向上的第一側的百分比為0。 [0118]該處理模塊1008還用于若選取的填充模式為拉伸,則該富媒體的寬度百分比為 100%,該富媒體的高度百分比為100%,該富媒體的高度方向上的頂部距該可視區(qū)域的高 度方向上的頂部的百分比為0,該富媒體的寬度方向上的第一側距該可視區(qū)域的寬度方向 上的第一側的百分比為0;以及
[0119] 該處理模塊1008還用于若選取的填充模式為居中,則該富媒體的寬度為該富媒體 的原始寬度,該富媒體的高度為該富媒體的原始高度,該富媒體的高度方向上的頂部距該 可視區(qū)域的高度方向上的頂部為該可視區(qū)域的高度與該富媒體的高度的差的一半,該富媒 體的寬度方向上的第一側與該可視區(qū)域的寬度方向上的第一側的距離為該可視區(qū)域的寬 度與該富媒體的寬度的差的一半。
[0120] 本領域普通技術人員可以理解實現(xiàn)上述實施例方法中的全部或部分流程,是可以 通過計算機程序來指令相關的硬件來完成,所述的程序可存儲于一非易失性計算機可讀取 存儲介質(zhì)中,該程序在執(zhí)行時,可包括如上述各方法的實施例的流程。其中,所述的非易失 性存儲介質(zhì)可為磁碟、光盤、只讀存儲記憶體(Read-Only Memory,ROM)等。
[0121]以上所述實施例僅表達了本發(fā)明的幾種實施方式,其描述較為具體和詳細,但并 不能因此而理解為對本發(fā)明專利范圍的限制。應當指出的是,對于本領域的普通技術人員 來說,在不脫離本發(fā)明構思的前提下,還可以做出若干變形和改進,這些都屬于本發(fā)明的保 護范圍。因此,本發(fā)明專利的保護范圍應以所附權利要求為準。
【主權項】
1. 一種Web富媒體跨屏適配方法,包括: 通過瀏覽器的HTML中插入的函數(shù)代碼直接執(zhí)行以下步驟: 獲取瀏覽器的可視區(qū)域的寬和高; 獲取富媒體的寬和高; 獲取選取的填充模式; 根據(jù)所述可視區(qū)域的寬和高、富媒體的寬和高以及選取的填充模式獲取所述富媒體的 縮放百分比; 根據(jù)所述富媒體的縮放百分比確定所述富媒體在所述可視區(qū)域的位置,將所述富媒體 配置在所述可視區(qū)域的相應位置中; 對所述富媒體配置在所述可視區(qū)域后的空白像素進行像素填充。2. 根據(jù)權利要求1所述的方法,其特征在于,所述根據(jù)所述可視區(qū)域的寬和高、富媒體 的寬和高以及選取的填充模式獲取所述富媒體的縮放百分比的步驟包括: 若選取的填充模式為fit適應,獲取所述富媒體寬高比與所述可視區(qū)域的寬高比的比 值,當所述比值大于1,則所述富媒體的寬度百分比為100%,所述富媒體的高度百分比為所 述可視區(qū)域的寬高比與所述富媒體的高寬比乘積的百分比,所述富媒體的高度方向上的頂 部距所述可視區(qū)域的高度方向上的頂部的百分比為100%減去所述富媒體的高度百分比后 再除以2,所述富媒體的寬度方向上的第一側距所述可視區(qū)域的寬度方向上的第一側的百 分比為0; 當所述比值小于或等于1,則所述富媒體的高度百分比為100%,所述富媒體的寬度百 分比為所述可視區(qū)域的高寬比與所述富媒體的寬高比乘積的百分比,所述富媒體的高度方 向上的頂部距所述可視區(qū)域的高度方向上的頂部的百分比為0,所述富媒體的寬度方向上 的第一側距所述可視區(qū)域的寬度方向上的第一側的百分比為100%減去所述富媒體的寬度 百分比后再除以2。3. 根據(jù)權利要求1所述的方法,其特征在于,所述根據(jù)所述可視區(qū)域的寬和高、富媒體 的寬和高以及選取的填充模式獲取所述富媒體的縮放百分比的步驟包括: 若選取的填充模式為fill填充,則獲取所述富媒體寬高比與所述可視區(qū)域的寬高比的 比值,當所述比值大于1,則所述富媒體的高度百分比為100%,所述富媒體的寬度百分比為 所述可視區(qū)域的高寬比與所述富媒體的寬高比乘積的百分比,所述富媒體的高度方向上的 頂部距所述可視區(qū)域的高度方向上的頂部的百分比為0,所述富媒體的寬度方向上的第一 側距所述可視區(qū)域的寬度方向上的第一側的百分比為100%減去所述富媒體的寬度百分比 后再除以2; 當所述比值小于或等于1,則所述富媒體的寬度百分比為100%,所述富媒體的高度百 分比為所述可視區(qū)域的寬高比與所述富媒體的高寬比乘積的百分比,所述富媒體的高度方 向上的頂部距所述可視區(qū)域的高度方向上的頂部的百分比為100%減去所述富媒體的高度 百分比后再除以2,所述富媒體的寬度方向上的第一側距所述可視區(qū)域的寬度方向上的第 一側的百分比為0。4. 根據(jù)權利要求1所述的方法,其特征在于,所述根據(jù)所述可視區(qū)域的寬和高、富媒體 的寬和高以及選取的填充模式獲取所述富媒體的縮放百分比的步驟包括: 若選取的填充模式為拉伸,則所述富媒體的寬度百分比為1 〇〇 %,所述富媒體的高度百 分比為100%,所述富媒體的高度方向上的頂部距所述可視區(qū)域的高度方向上的頂部的百 分比為0,所述富媒體的寬度方向上的第一側距所述可視區(qū)域的寬度方向上的第一側的百 分比為0。5. 根據(jù)權利要求1所述的方法,其特征在于,所述根據(jù)所述可視區(qū)域的寬和高、富媒體 的寬和高以及選取的填充模式獲取所述富媒體的縮放百分比的步驟包括: 若選取的填充模式為居中,則所述富媒體的寬度為所述富媒體的原始寬度,所述富媒 體的高度為所述富媒體的原始高度,所述富媒體的高度方向上的頂部距所述可視區(qū)域的高 度方向上的頂部為所述可視區(qū)域的高度與所述富媒體的高度的差的一半,所述富媒體的寬 度方向上的第一側與所述可視區(qū)域的寬度方向上的第一側的距離為所述可視區(qū)域的寬度 與所述富媒體的寬度的差的一半。6. 根據(jù)權利要求1所述的方法,其特征在于,所述對所述富媒體配置在所述可視區(qū)域后 的空白像素進行像素填充的步驟包括: 對所述富媒體配置在所述可視區(qū)域后的空白像素采用插值法進行像素填充。7. -種Web富媒體跨屏適配裝置,其特征在于,包括: 第一獲取模塊,用于通過瀏覽器的HTML中插入的函數(shù)代碼直接獲取瀏覽器的可視區(qū)域 的寬和高; 第二獲取模塊,用于通過瀏覽器的HTML中插入的函數(shù)代碼直接獲取富媒體的寬和高; 第三獲取模塊,用于通過瀏覽器的HTML中插入的函數(shù)代碼直接獲取選取的填充模式; 處理模塊,用于通過瀏覽器的HTML中插入的函數(shù)代碼直接根據(jù)所述可視區(qū)域的寬和 高、富媒體的寬和高以及選取的填充模式獲取所述富媒體的縮放百分比; 配置模塊,用于通過瀏覽器的HTML中插入的函數(shù)代碼直接根據(jù)所述富媒體的縮放百分 比確定所述富媒體在所述可視區(qū)域的位置,將所述富媒體配置在所述可視區(qū)域的相應位置 中; 像素填充模塊,用于通過瀏覽器的HTML中插入的函數(shù)代碼直接對所述富媒體配置在所 述可視區(qū)域后的空白像素進行像素填充。8. 根據(jù)權利要求7所述的裝置,其特征在于,所述處理模塊還用于若選取的填充模式為 fit適應,獲取所述富媒體寬高比與所述可視區(qū)域的寬高比的比值,當所述比值大于1,則所 述富媒體的寬度百分比為100%,所述富媒體的高度百分比為所述可視區(qū)域的寬高比與所 述富媒體的高寬比乘積的百分比,所述富媒體的高度方向上的頂部距所述可視區(qū)域的高度 方向上的頂部的百分比為100%減去所述富媒體的高度百分比后再除以2,所述富媒體的寬 度方向上的第一側距所述可視區(qū)域的寬度方向上的第一側的百分比為〇; 當所述比值小于或等于1,則所述富媒體的高度百分比為100%,所述富媒體的寬度百 分比為所述可視區(qū)域的高寬比與所述富媒體的寬高比乘積的百分比,所述富媒體的高度方 向上的頂部距所述可視區(qū)域的高度方向上的頂部的百分比為〇,所述富媒體的寬度方向上 的第一側距所述可視區(qū)域的寬度方向上的第一側的百分比為100%減去所述富媒體的寬度 百分比后再除以2; 以及所述處理模塊還用于若選取的填充模式為fill填充,則獲取所述富媒體寬高比與 所述可視區(qū)域的寬高比的比值,當所述比值大于1,則所述富媒體的高度百分比為100%,所 述富媒體的寬度百分比為所述可視區(qū)域的高寬比與所述富媒體的寬高比乘積的百分比,所 述富媒體的高度方向上的頂部距所述可視區(qū)域的高度方向上的頂部的百分比為0,所述富 媒體的寬度方向上的第一側距所述可視區(qū)域的寬度方向上的第一側的百分比為100%減去 所述富媒體的寬度百分比后再除以2; 當所述比值小于或等于1,則所述富媒體的寬度百分比為100%,所述富媒體的高度百 分比為所述可視區(qū)域的寬高比與所述富媒體的高寬比乘積的百分比,所述富媒體的高度方 向上的頂部距所述可視區(qū)域的高度方向上的頂部的百分比為100%減去所述富媒體的高度 百分比后再除以2,所述富媒體的寬度方向上的第一側距所述可視區(qū)域的寬度方向上的第 一側的百分比為0。9. 根據(jù)權利要求7所述的裝置,其特征在于,所述處理模塊還用于若選取的填充模式為 拉伸,則所述富媒體的寬度百分比為100%,所述富媒體的高度百分比為100%,所述富媒體 的高度方向上的頂部距所述可視區(qū)域的高度方向上的頂部的百分比為〇,所述富媒體的寬 度方向上的第一側距所述可視區(qū)域的寬度方向上的第一側的百分比為〇;以及 若選取的填充模式為居中,則所述富媒體的寬度為所述富媒體的原始寬度,所述富媒 體的高度為所述富媒體的原始高度,所述富媒體的高度方向上的頂部距所述可視區(qū)域的高 度方向上的頂部為所述可視區(qū)域的高度與所述富媒體的高度的差的一半,所述富媒體的寬 度方向上的第一側與所述可視區(qū)域的寬度方向上的第一側的距離為所述可視區(qū)域的寬度 與所述富媒體的寬度的差的一半。10. 根據(jù)權利要求7所述的裝置,其特征在于,所述像素填充模塊還用于對所述富媒體 配置在所述可視區(qū)域后的空白像素采用插值法進行像素填充。
【文檔編號】G06F17/30GK105930464SQ201610255770
【公開日】2016年9月7日
【申請日】2016年4月22日
【發(fā)明人】張磊
【申請人】騰訊科技(深圳)有限公司
網(wǎng)友詢問留言 已有0條留言
  • 還沒有人留言評論。精彩留言會獲得點贊!
1