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

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

[0003] 基于此，有必要針對(duì)傳統(tǒng)的HTML5構(gòu)建的富媒體無法適配各種屏幕尺寸的設(shè)備的 問題，提供一種Web富媒體跨屏適配方法，能適配不同屏幕尺寸的設(shè)備，不需開發(fā)人員再關(guān) 注屏幕的適配，提高工作效率。
[0004] 此外，還有必要提供一種Web富媒體跨屏適配裝置，能適配不同屏幕尺寸的設(shè)備， 不需開發(fā)人員再關(guān)注屏幕的適配，提高工作效率。
[0005] -種Web富媒體跨屏適配方法，包括：
[0006] 通過瀏覽器的HTML中插入的函數(shù)代碼直接執(zhí)行以下步驟：
[0007] 獲取瀏覽器的可視區(qū)域的寬和高；
[0008] 獲取富媒體的寬和高；
[0009] 獲取選取的填充模式；
[0010] 根據(jù)所述可視區(qū)域的寬和高、富媒體的寬和高以及選取的填充模式獲取所述富媒 體的縮放百分比；
[0011] 根據(jù)所述富媒體的縮放百分比確定所述富媒體在所述可視區(qū)域的位置，將所述富 媒體配置在所述可視區(qū)域的相應(yīng)位置中；
[0012] 對(duì)所述富媒體配置在所述可視區(qū)域后的空白像素進(jìn)行像素填充。
[0013] 一種Web富媒體跨屏適配裝置，包括：
[0014] 第一獲取模塊，用于獲取瀏覽器的可視區(qū)域的寬和高；
[0015] 第二獲取模塊，用于獲取富媒體的寬和高；
[0016] 第三獲取模塊，用于通過瀏覽器的HTML中插入的函數(shù)代碼直接獲取選取的填充模 式；
[0017] 處理模塊，用于通過瀏覽器的HTML中插入的函數(shù)代碼直接根據(jù)所述可視區(qū)域的寬 和高、富媒體的寬和高以及選取的填充模式獲取所述富媒體的縮放百分比；
[0018] 配置模塊，用于通過瀏覽器的HTML中插入的函數(shù)代碼直接根據(jù)所述富媒體的縮放 百分比確定所述富媒體在所述可視區(qū)域的位置，將所述富媒體配置在所述可視區(qū)域的相應(yīng) 位置中；
[0019]像素填充模塊，用于通過瀏覽器的HTML中插入的函數(shù)代碼直接對(duì)所述富媒體配置 在所述可視區(qū)域后的空白像素進(jìn)行像素填充。
[0020] 上述Web富媒體跨屏適配方法和裝置，通過獲取瀏覽器的可視區(qū)域的寬和高、富媒 體的寬和高以及填充模式，并得到富媒體的縮放百分比，根據(jù)富媒體縮放百分比確定富媒 體在可視區(qū)域的位置，并對(duì)配置富媒體到可視區(qū)域后的空白像素進(jìn)行填充，使得富媒體在 瀏覽器的可視區(qū)域中展示，能夠適配不同屏幕尺寸的設(shè)備，不需開發(fā)人員再關(guān)注屏幕的適 配，提高工作效率;且對(duì)富媒體進(jìn)行像素填充，使得產(chǎn)生超分辨率的縮放效果。
【附圖說明】
[0021] 圖1為一個(gè)實(shí)施例中終端的內(nèi)部結(jié)構(gòu)示意圖；
[0022]圖2為一個(gè)實(shí)施例中Web富媒體跨屏適配方法的流程圖；
[0023] 圖3為一個(gè)實(shí)施例中選取填充模式的界面示意圖；
[0024] 圖4為圖3中選取拉伸填充模式的示意圖；
[0025] 圖5為一個(gè)實(shí)施例中選取適應(yīng)模式的效果示意圖；
[0026]圖6為一個(gè)實(shí)施例中拉伸模式的效果不意圖；
[0027] 圖7A為原始圖像再瀏覽器中的示意圖；
[0028] 圖7B為全屏適配后，光標(biāo)移入出現(xiàn)全屏按鈕；
[0029]圖7C為全屏展示的效果示意圖；
[0030]圖8為一個(gè)實(shí)施例中Flappy Bird富媒體在fill模式下適配不同屏幕尺寸的結(jié)果 示意圖；
[0031]圖9為一個(gè)實(shí)施例中Flappy Bird富媒體在fit模式下適配不同屏幕尺寸的結(jié)果示 意圖；
[0032]圖10為一個(gè)實(shí)施例中Web富媒體跨屏適配裝置的結(jié)構(gòu)框圖。
【具體實(shí)施方式】
[0033]為了使本發(fā)明的目的、技術(shù)方案及優(yōu)點(diǎn)更加清楚明白，以下結(jié)合附圖及實(shí)施例，對(duì) 本發(fā)明進(jìn)行進(jìn)一步詳細(xì)說明。應(yīng)當(dāng)理解，此處所描述的具體實(shí)施例僅僅用以解釋本發(fā)明，并 不用于限定本發(fā)明。
[0034]可以理解，本發(fā)明所使用的術(shù)語"第一"、"第二"等可在本文中用于描述各種元件， 但這些元件不受這些術(shù)語限制。這些術(shù)語僅用于將第一個(gè)元件與另一個(gè)元件區(qū)分。舉例來 說，在不脫離本發(fā)明的范圍的情況下，可以將第一客戶端稱為第二客戶端，且類似地，可將 第二客戶端稱為第一客戶端。第一客戶端和第二客戶端兩者都是客戶端，但其不是同一客 戶端。
[0035]圖1為一個(gè)實(shí)施例中終端的內(nèi)部結(jié)構(gòu)示意圖。如圖1所示，該終端包括通過系統(tǒng)總 線連接的處理器、非易失性存儲(chǔ)介質(zhì)、內(nèi)存、網(wǎng)絡(luò)接口、顯示屏和輸入裝置。其中，終端的非 易失性存儲(chǔ)介質(zhì)存儲(chǔ)有操作系統(tǒng)，還包括一種Web富媒體跨屏適配裝置。該處理器用于提供 計(jì)算和控制能力，支撐整個(gè)終端的運(yùn)行，被用于執(zhí)行Web富媒體跨屏視頻方法的流程步驟。 終端中的網(wǎng)絡(luò)接口用于與服務(wù)器進(jìn)行網(wǎng)絡(luò)通信，如發(fā)送富媒體數(shù)據(jù)至服務(wù)器，接收服務(wù)器 返回的富媒體數(shù)據(jù)等。終端的顯示屏可以是液晶顯示屏或者電子墨水顯示屏等，輸入裝置 可以是顯示屏上覆蓋的觸摸層，也可以是終端外殼上設(shè)置的按鍵、軌跡球或觸控板，也可以 是外接的鍵盤、觸控板或鼠標(biāo)等。該終端可以是內(nèi)置瀏覽器或Webview的計(jì)算機(jī)、手機(jī)、電視 機(jī)、個(gè)人數(shù)字助理、手表或穿戴式設(shè)備等。本領(lǐng)域技術(shù)人員可以理解，圖1中示出的結(jié)構(gòu)，僅 僅是與本申請(qǐng)方案相關(guān)的部分結(jié)構(gòu)的框圖，并不構(gòu)成對(duì)本申請(qǐng)方案所應(yīng)用于其上的終端的 限定，具體的終端可以包括比圖中所示更多或更少的部件，或者組合某些部件，或者具有不 同的部件布置。
[0036]圖2為一個(gè)實(shí)施例中Web富媒體跨屏適配方法的流程圖。如圖2所示，一種Web富媒 體跨屏適配方法，包括以下步驟：
[0037] 步驟202,獲取瀏覽器的可視區(qū)域的寬和高。
[0038] 本實(shí)施例中，通過瀏覽器的HTML中的函數(shù)代碼window. innerWidth和 window. innerHeight直接獲取瀏覽器的可視區(qū)域的寬和高。
[0039]步驟204,獲取富媒體的寬和高。
[0040] 本實(shí)施例中，通過瀏覽器的HTML中的函數(shù)代碼canvas. width和canvas. height直 接獲取富媒體的寬和高。富媒體是指canvas/webgl寫的應(yīng)用程序或游戲等，不限于此。
[00411步驟206,獲取選取的填充模式。
[0042]本實(shí)施例中，通過瀏覽器的HTML中的函數(shù)代碼直接獲取選取的填充模式。 alloyscreen提供了四種填充模式用于展示比例調(diào)節(jié)，并提供了restore還原初始狀態(tài)。填 充模式可包括fit適應(yīng)、fill填充、拉伸(stretch)、居中（center)。
[0043]其中，fit適應(yīng)方式是指顯示比例不變，左右撐滿或上下?lián)螡M，無圖像信息丟失，一 般情況下會(huì)出現(xiàn)左右黑邊或上下黑邊。
[0044] fill填充模式是指顯示比例不變，撐滿可視區(qū)域，以丟失部分圖像的成本，保證不 發(fā)生變形。
[0045]拉伸方式是指寬高撐滿可視區(qū)域，一般情況下會(huì)發(fā)生變形。
[0046] center居中方式是指顯示比例不便，寬高不變，在可視區(qū)域居中顯示。
[0047]可視區(qū)域可為終端的整個(gè)屏幕或部分屏幕等。
[0048] 為了實(shí)現(xiàn)fit適應(yīng)方式可在Web程序的HTML中插入對(duì)應(yīng)的代碼，如代碼如下： 〈script src=".?/,./alloy_screen.js"></sci'ipt> <script>
[0049] Vai. as=n.ew AlloyS:Green("#ourl、anvas"） As.fit(); </sGript>
[0050] 其中，#ourCanvas為 i d (標(biāo)識(shí)）是 ourCanvas 的 canvas，需要添加 f i t 效果的 canvas。 canvas是圖形容器。
[0051]同理為了實(shí)現(xiàn)其他的填充模式，可將上述代碼中fit()代替為對(duì)應(yīng)的填充模式。
[0052]圖3為一個(gè)實(shí)施例中選取填充模式的界面示意圖。如圖3所示，在菜單界面中可選 擇分辨率、填充模式、全屏、音效大小調(diào)節(jié)、音樂音量大小調(diào)節(jié)等。填充模式以下拉框的方式 顯示有fit適應(yīng)、fill填充、拉伸、居中。
[0053]圖4為圖3中選取拉伸填充模式的示意圖。如圖4所示，分辨率為1366*768，填充模 式為拉伸。
[0054]步驟208,根據(jù)該可視區(qū)域的寬和高、富媒體的寬和高以及選取的填充模式獲取該 富媒體的縮放百分比。
[0055] 通過瀏覽器的HTML中插入的函數(shù)代碼直接根據(jù)可視區(qū)域的寬和高、富媒體的寬和 高以及選取的填充模式獲取該富媒體的縮放百分比。
[0056] 步驟210,根據(jù)該富媒體的縮放百分比確定該富媒體在該可視區(qū)域的位置，將該富 媒體配置在該可視區(qū)域的相應(yīng)位置中。
[0057] 本實(shí)施例中，通過瀏覽器的H T M L中插入的函數(shù)代碼直接使用 this ? canvas ? getBoundingClientRect()確定富媒體在CSS(Cascading Style Sheets，層 疊樣式表)中的位置。使用CSS Position Fixed固定富媒體在CSS中的位置。
[0058] 步驟212,對(duì)該富媒體配置在該可視區(qū)域后的空白像素進(jìn)行像素填充。
[0059] 本實(shí)施例中，通過瀏覽器的HTML中插入的函數(shù)代碼直接對(duì)富媒體配置在可視區(qū)域 后的空白像素采用插值法進(jìn)行像素填充。
[0060] 圖像插值就是利用已知鄰近像素點(diǎn)的灰度值或RGB圖像中的三色值來產(chǎn)生未知像 素點(diǎn)的灰度值，以便由原始圖像再生出具有更高分辨率的圖像。
[0061 ] 該插值法可包括最近鄰元插值法(nearest neighbor interpolation)、雙線性內(nèi) 插法（bilinear interpolation)、三次卷積內(nèi)插法（cubic convolution interpolation)。
[0062] 其中，最近鄰元插值法:對(duì)于通過反向變換得到的一個(gè)浮點(diǎn)坐標(biāo)，對(duì)其進(jìn)行簡(jiǎn)單的 取整，得到一個(gè)整數(shù)型坐標(biāo)，這個(gè)整數(shù)型坐標(biāo)對(duì)應(yīng)的像素值就是目的像素的像素值，也就是 說，取浮點(diǎn)坐標(biāo)最鄰近的左上角點(diǎn)（對(duì)于DIB是右上角，因?yàn)樗膾呙栊惺悄嫘虼鎯?chǔ)的）對(duì)應(yīng) 的像素值?？梢姡钹徑逯岛?jiǎn)單且直觀。
[0063] 雙線性內(nèi)插值:對(duì)于一個(gè)目的像素，設(shè)置坐標(biāo)通過反向變換得到的浮點(diǎn)坐標(biāo)為（i+ u，j+v)，其中i、j均為非負(fù)整數(shù)，u、v為[0，1)區(qū)間的浮點(diǎn)數(shù)，貝lj這個(gè)像素得值f (i+u，j+v)可 由原圖像中坐標(biāo)為（i，j)、（ i+1，j)、（ i，j+1)、（ i+1，j+1)所對(duì)應(yīng)的周圍四個(gè)像素的值決定， 即：
[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)插值法計(jì)算量大，但縮放后圖像質(zhì)量高，不會(huì)出現(xiàn)像素值不連續(xù)的的情 況。由于雙線性插值具有低通濾波器的性質(zhì)，使高頻分量受損，所以可能會(huì)使圖像輪廓在一 定程度上變得模糊。
[0066]三次卷積法的計(jì)算精度高，其考慮一個(gè)浮點(diǎn)坐標(biāo)（i+u，j+v)周圍的16個(gè)鄰點(diǎn)，目的 像素值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)是對(duì)Sin(x*Pi)/x的逼近(Pi是圓周率--n)。
[0072]上述Web富媒體跨屏適配方法，通過獲取瀏覽器的可視區(qū)域的寬和高、富媒體的寬 和高以及填充模式，并得到富媒體的縮放百分比，根據(jù)富媒體縮放百分比確定富媒體在可 視區(qū)域的位置，并對(duì)配置富媒體到可視區(qū)域后的空白像素進(jìn)行填充，使得富媒體在瀏覽器 的可視區(qū)域中展示，能夠適配不同屏幕尺寸的設(shè)備，不需開發(fā)人員再關(guān)注屏幕的適配，提高 工作效率;且對(duì)富媒體進(jìn)行像素填充，使得產(chǎn)生超分辨率的縮放效果。
[0073] 在一個(gè)實(shí)施例中，根據(jù)該可視區(qū)域的寬和高、富媒體的寬和高以及選取的填充模 式獲取該富媒體的縮放百分比包括：
[0074] 若選取的填充模式為fit適應(yīng)，獲取該富媒體寬高比與該可視區(qū)域的寬高比的比 值，當(dāng)該比值大于1，則該富媒體的寬度百分比為100%，該富媒體的高度百分比為該可視區(qū) 域的寬高比與該富媒體的高寬比乘積的百分比，該富媒體的高度方向上的頂部距該可視區(qū) 域的高度方向上的頂部的百分比為1 〇 〇 %減去該富媒體的高度百分比后再除以2，該富媒體 的寬度方向上的第一側(cè)距該可視區(qū)域的寬度方向上的第一側(cè)的百分比為〇;
[0075] 當(dāng)該比值小于或等于1，則該富媒體的高度百分比為100%，該富媒體的寬度百分 比為該可視區(qū)域的高寬比與該富媒體的寬高比乘積的百分比，該富媒體的高度方向上的頂 部距該可視區(qū)域的高度方向上的頂部的百分比為〇,該富媒體的寬度方向上的第一側(cè)距該 可視區(qū)域的寬度方向上的第一側(cè)的百分比為100%減去該富媒體的寬度百分比后再除以2。
[0076] 圖5為一個(gè)實(shí)施例中選取適應(yīng)模式的效果示意圖。如圖5所示，填充模式為適應(yīng)模 式，則顯示比例不變，富媒體的寬高比與可視區(qū)域的寬高比的比值大于1，富媒體的寬度百 分比為100%，即撐滿左右;富媒體的高度百分比為該可視區(qū)域的寬高比與該富媒體的高寬 比乘積的百分比。該富媒體的高度方向上的頂部距該可視區(qū)域的高度方向上的頂部的百分 比為100%減去該富媒體的高度百分比后再除以2,也就是上下出現(xiàn)黑色區(qū)域。
[0077] 若選取的填充模式為fill填充，則獲取該富媒體寬高比與該可視區(qū)域的寬高比的 比值，當(dāng)該比值大于1，則該富媒體的高度百分比為100%，該富媒體的寬度百分比為該可視 區(qū)域的高寬比與該富媒體的寬高比乘積的百分比，該富媒體的高度方向上的頂部距該可視 區(qū)域的高度方向上的頂部的百分比為〇，該富媒體的寬度方向上的第一側(cè)距該可視區(qū)域的 寬度方向上的第一側(cè)的百分比為100%減去該富媒體的寬度百分比后再除以2;
[0078] 當(dāng)該比值小于或等于1，則該富媒體的寬度百分比為100%，該富媒體的高度百分 比為該可視區(qū)域的寬高比與該富媒體的高寬比乘積的百分比，該富媒體的高度方向上的頂 部距該可視區(qū)域的高度方向上的頂部的百分比為100%減去該富媒體的高度百分比后再除 以2,該富媒體的寬度方向上的第一側(cè)距該可視區(qū)域的寬度方向上的第一側(cè)的百分比為0。
[0079] 若選取的填充模式為拉伸，則該富媒體的寬度百分比為100%，該富媒體的高度百 分比為10 0 %，該富媒體的高度方向上的頂部距該可視區(qū)域的高度方向上的頂部的百分比 為0,該富媒體的寬度方向上的第一側(cè)距該可視區(qū)域的寬度方向上的第一側(cè)的百分比為0。
[0080] 圖6為一個(gè)實(shí)施例中拉伸模式的效果示意圖。如圖6所示，富媒體的圖像被拉伸后， 圖像發(fā)生了變形。
[0081] 若選取的填充模式為居中，則該富媒體的寬度為該富媒體的原始寬度，該富媒體 的高度為該富媒體的原始高度，該富媒體的高度方向上的頂部距該可視區(qū)域的高度方向上 的頂部為該可視區(qū)域的高度與該富媒體的高度的差的一半，該富媒體的寬度方向上的第一 側(cè)與該可視區(qū)域的寬度方向上的第一側(cè)的距離為該可視區(qū)域的寬度與該富媒體的寬度的 差的一半。
[0082]上述各填充模式計(jì)算富媒體的縮放百分比的代碼可如下，其中，width和height分 別是可視區(qū)域的寬和高，canvasWidth和canvasHeight分別是指富媒體的寬和高;rate為 (this ? canvasWidth/this ? canvasHeight)/(this .width/this .height)的值。 flt:function(){ //適應(yīng) fit 買現(xiàn) this.type="fit"；
[0083] if(this.rate>l){ //當(dāng) rate 大于 1 this._fltorfillHeight(); //設(shè)置富媒體的高度 ]else{ this._fitorfill\Vidth( ); //設(shè)置富媒體的寬度 } }， fi!l:function( ){ /7fi丨丨填充實(shí)現(xiàn) this.typc=*'fiir,; if(this.rate>l){ //當(dāng).rate.大于 1 lhis._rilorfillWidih{ ); //設(shè)置富嫫體的寬度 .else； tliis,_fitorfiliHeight(); .//設(shè)置冨媒體的高度 } 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( ){ //拉伸實(shí)現(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(){ //居中模式實(shí)現(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] 其中，表示除法運(yùn)算，表示乘法運(yùn)算。
[0087] 在一個(gè)實(shí)施例中，上述Web富媒體跨屏適配方法還包括：提供全屏組件，并將全屏 組件展示在富媒體上;獲取對(duì)該全屏組件的觸發(fā)操作，將富媒體進(jìn)行全屏展示或退回到原 始狀態(tài)。全屏模式的實(shí)現(xiàn)可采用如下代碼實(shí)現(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] 全屏是指載體（設(shè)備的瀏覽器或應(yīng)用程序里的webview)內(nèi)部全屏。當(dāng)瀏覽器或 webview等是全屏?xí)r，富媒體也是全屏；當(dāng)瀏覽器或webview等是分屏?xí)r，富媒體處于分屏。 不論載體是全屏還是分屏都可采用上述Web富媒體跨屏適配方法對(duì)富媒體進(jìn)行處理。
[0091]在一個(gè)實(shí)施例中，上述Web富媒體跨屏視頻方法還包括:獲取交互行為發(fā)生點(diǎn)的真 實(shí)坐標(biāo)位置。
[0092]交互行為發(fā)生點(diǎn)是指用戶觸摸或點(diǎn)擊或其他交互行為產(chǎn)生的位置。
[0093]具體地，若富媒體canvas被各種css width和height屬性放大或縮小，交互行為發(fā) 生點(diǎn)相對(duì)于左上角的實(shí)際坐標(biāo)重新計(jì)算。若富媒體canvas有top boder或者left boder，交 互行為發(fā)生點(diǎn)相對(duì)于左上角的實(shí)際坐標(biāo)要減去boder的寬度。若boxsizing(盒子模型類型） 為boder-box，交互行為發(fā)生點(diǎn)相對(duì)于左上角的實(shí)際坐標(biāo)重新計(jì)算。
[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 的坐標(biāo) y=pagcY-this.offsctf l]-this.siylc.bordcrTopWidth, //y 的坐標(biāo) 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更形后的真.實(shí)寬度 canvasHcight-=this.sty丨c. borderTopwidth;富媒體變形后的真實(shí)高度 return{x:this.Vvidrh*x/canvasWidth?, y^his.height^y/canvasHeight}; }
[0096] 其中，先獲取富媒體的樣式信息，boxsizing盒子模型類型，borderTopWidth為上 部分邊框?qū)挾?，borderLeftWidth為左部分邊框?qū)挾?，width為變形后寬度，height為變形后 高度，pageX，pageY為交互行為發(fā)生點(diǎn)的坐標(biāo)位置，this .offset[0]和this .offset[1]為富 媒體左上角坐標(biāo)在文檔中的偏移量。
[0097]使用 pageX-this.offset[0]-borderLeftWidth得到x 坐標(biāo)，使用卩&86丫_ this. of f set [ 1 ]_borderTopWidth得到y(tǒng)坐標(biāo)。若盒子模型類型為邊框盒，則canvasWidth為 富媒體變形后的真實(shí)寬度，等于width減去borderLeftWidth得到，canvasHeight為富媒體 變形后的真實(shí)高度，等于height減去borderTopWidth得到。this, width為富媒體的真實(shí)寬 度，this, height為富媒體的真實(shí)高度。
[0098] 富媒體的真實(shí)寬度與富媒體變形后的真實(shí)寬度比值再乘以x坐標(biāo)得到真實(shí)的坐標(biāo) X，富媒體的真實(shí)高度與富媒體變形后的真實(shí)高度比值再乘以y坐標(biāo)得到真實(shí)的坐標(biāo)y。
[0099] 圖7A為原始圖像在瀏覽器中的示意圖；圖7B為全屏適配后，光標(biāo)移入出現(xiàn)全屏按 鈕；圖7C為全屏展示的效果示意圖。如圖7A所示，圖像占瀏覽器的可視區(qū)域的一部分;如圖 7B所示，光標(biāo)移入后在圖像的右上角出現(xiàn)了全屏按鈕;如圖7C所示，點(diǎn)擊全屏按鈕后，圖像 進(jìn)行全屏展示，圖像的填充方式為居中，則圖像位于可視區(qū)域中間，其他采用黑色填充。 [0 100]圖8為一個(gè)實(shí)施例中Flappy Bird富媒體在fill模式下適配不同屏幕尺寸的結(jié)果 示意圖。如圖8所示，第一尺寸、第二尺寸、第三尺寸和第四尺寸，且第一尺寸、第二尺寸、第 三尺寸和第四尺寸逐漸減小。Flappy Bird富媒體在fill模式下將第一尺寸、第二尺寸、第 三尺寸和第四尺寸屏幕均填滿。
[0101]圖9為一個(gè)實(shí)施例中Flappy Bird富媒體在fit模式下適配不同屏幕尺寸的結(jié)果示 意圖。如圖9所示，第一尺寸、第二尺寸、第三尺寸和第四尺寸，且第一尺寸、第二尺寸、第三 尺寸和第四尺寸逐漸減小。Flappy Bird富媒體在fit模式下將第二尺寸、第三尺寸和第四 尺寸屏幕均填滿，在第一尺寸屏幕上將上下?lián)螡M，左右黑邊。
[0102] 此外，center上尺寸比例不變居中stretch是拉伸填滿屏幕。
[0103] 需要說明的是，上述Web富媒體跨屏適配方法，可適用于canvas/webgl或者Dom里 內(nèi)嵌的canvas/webgl的個(gè)人計(jì)算機(jī)或移動(dòng)終端的網(wǎng)站或者HTML5動(dòng)感創(chuàng)意網(wǎng)站或個(gè)人計(jì)算 機(jī)或移動(dòng)終端HTML5游戲應(yīng)用等的適配，甚至適用于任意圖片及HTML5SVG(Scalable Vector Graphics，可縮放矢量圖形)和HTML5Video的展示和播放，讓開發(fā)人員不再關(guān)注屏 幕的適配，專注于視覺的還原、交互和業(yè)務(wù)邏輯的實(shí)現(xiàn)，大大提高了工作效率。
[0104] 相比于Flash，F(xiàn)lash是以插件形式存在瀏覽器中，且僅限于視頻播放，且與某些設(shè) 備的軟件系統(tǒng)兼容性差。上述Web富媒體跨屏適配方法采用瀏覽器的HTML中插入函數(shù)代碼 直接實(shí)現(xiàn)，適用包含HTML5的復(fù)雜應(yīng)用和游戲的適配和全屏，甚至適用于任意圖片及 HTML5SVG和HTML5Video的展示和播放。
[0105]圖10為一個(gè)實(shí)施例中Web富媒體跨屏適配裝置的結(jié)構(gòu)框圖。如圖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ū)域的相應(yīng)位置 中；
[0111] 像素填充模塊1012用于通過瀏覽器的HTML中插入的函數(shù)代碼直接對(duì)該富媒體配 置在該可視區(qū)域后的空白像素進(jìn)行像素填充。
[0112] 本實(shí)施例中，該像素填充模塊1012還用于對(duì)該富媒體配置在該可視區(qū)域后的空白 像素采用插值法進(jìn)行像素填充。
[0113] 上述Web富媒體跨屏適配裝置，通過獲取瀏覽器的可視區(qū)域的寬和高、富媒體的寬 和高以及填充模式，并得到富媒體的縮放百分比，根據(jù)富媒體縮放百分比確定富媒體在可 視區(qū)域的位置，并對(duì)配置富媒體到可視區(qū)域后的空白像素進(jìn)行填充，使得富媒體在瀏覽器 的可視區(qū)域中展示，能夠適配不同屏幕尺寸的設(shè)備，不需開發(fā)人員再關(guān)注屏幕的適配，提高 工作效率;且對(duì)富媒體進(jìn)行像素填充，使得產(chǎn)生超分辨率的縮放效果。
[0114] 在一個(gè)實(shí)施例中，該處理模塊1008還用于若選取的填充模式為fit適應(yīng)，獲取該富 媒體寬高比與該可視區(qū)域的寬高比的比值，當(dāng)該比值大于1，則該富媒體的寬度百分比為 100%，該富媒體的高度百分比為該可視區(qū)域的寬高比與該富媒體的高寬比乘積的百分比， 該富媒體的高度方向上的頂部距該可視區(qū)域的高度方向上的頂部的百分比為100%減去該 富媒體的高度百分比后再除以2,該富媒體的寬度方向上的第一側(cè)距該可視區(qū)域的寬度方 向上的第一側(cè)的百分比為0;
[0115] 當(dāng)該比值小于或等于1，則該富媒體的高度百分比為100%，該富媒體的寬度百分 比為該可視區(qū)域的高寬比與該富媒體的寬高比乘積的百分比，該富媒體的高度方向上的頂 部距該可視區(qū)域的高度方向上的頂部的百分比為〇,該富媒體的寬度方向上的第一側(cè)距該 可視區(qū)域的寬度方向上的第一側(cè)的百分比為100%減去該富媒體的寬度百分比后再除以2; [0116]以及該處理模塊1008還用于若選取的填充模式為fill填充，則獲取該富媒體寬高 比與該可視區(qū)域的寬高比的比值，當(dāng)該比值大于1，則該富媒體的高度百分比為100%，該富 媒體的寬度百分比為該可視區(qū)域的高寬比與該富媒體的寬高比乘積的百分比，該富媒體的 高度方向上的頂部距該可視區(qū)域的高度方向上的頂部的百分比為0，該富媒體的寬度方向 上的第一側(cè)距該可視區(qū)域的寬度方向上的第一側(cè)的百分比為100%減去該富媒體的寬度百 分比后再除以2;
[0117]當(dāng)該比值小于或等于1，則該富媒體的寬度百分比為100%，該富媒體的高度百分 比為該可視區(qū)域的寬高比與該富媒體的高寬比乘積的百分比，該富媒體的高度方向上的頂 部距該可視區(qū)域的高度方向上的頂部的百分比為100%減去該富媒體的高度百分比后再除 以2,該富媒體的寬度方向上的第一側(cè)距該可視區(qū)域的寬度方向上的第一側(cè)的百分比為0。 [0118]該處理模塊1008還用于若選取的填充模式為拉伸，則該富媒體的寬度百分比為 100%，該富媒體的高度百分比為100%，該富媒體的高度方向上的頂部距該可視區(qū)域的高 度方向上的頂部的百分比為0，該富媒體的寬度方向上的第一側(cè)距該可視區(qū)域的寬度方向 上的第一側(cè)的百分比為0;以及
[0119] 該處理模塊1008還用于若選取的填充模式為居中，則該富媒體的寬度為該富媒體 的原始寬度，該富媒體的高度為該富媒體的原始高度，該富媒體的高度方向上的頂部距該 可視區(qū)域的高度方向上的頂部為該可視區(qū)域的高度與該富媒體的高度的差的一半，該富媒 體的寬度方向上的第一側(cè)與該可視區(qū)域的寬度方向上的第一側(cè)的距離為該可視區(qū)域的寬 度與該富媒體的寬度的差的一半。
[0120] 本領(lǐng)域普通技術(shù)人員可以理解實(shí)現(xiàn)上述實(shí)施例方法中的全部或部分流程，是可以 通過計(jì)算機(jī)程序來指令相關(guān)的硬件來完成，所述的程序可存儲(chǔ)于一非易失性計(jì)算機(jī)可讀取 存儲(chǔ)介質(zhì)中，該程序在執(zhí)行時(shí)，可包括如上述各方法的實(shí)施例的流程。其中，所述的非易失 性存儲(chǔ)介質(zhì)可為磁碟、光盤、只讀存儲(chǔ)記憶體(Read-Only Memory，ROM)等。
[0121]以上所述實(shí)施例僅表達(dá)了本發(fā)明的幾種實(shí)施方式，其描述較為具體和詳細(xì)，但并 不能因此而理解為對(duì)本發(fā)明專利范圍的限制。應(yīng)當(dāng)指出的是，對(duì)于本領(lǐng)域的普通技術(shù)人員 來說，在不脫離本發(fā)明構(gòu)思的前提下，還可以做出若干變形和改進(jìn)，這些都屬于本發(fā)明的保 護(hù)范圍。因此，本發(fā)明專利的保護(hù)范圍應(yīng)以所附權(quán)利要求為準(zhǔn)。
【主權(quán)項(xiàng)】
1. 一種Web富媒體跨屏適配方法，包括： 通過瀏覽器的HTML中插入的函數(shù)代碼直接執(zhí)行以下步驟： 獲取瀏覽器的可視區(qū)域的寬和高； 獲取富媒體的寬和高； 獲取選取的填充模式； 根據(jù)所述可視區(qū)域的寬和高、富媒體的寬和高以及選取的填充模式獲取所述富媒體的 縮放百分比； 根據(jù)所述富媒體的縮放百分比確定所述富媒體在所述可視區(qū)域的位置，將所述富媒體 配置在所述可視區(qū)域的相應(yīng)位置中； 對(duì)所述富媒體配置在所述可視區(qū)域后的空白像素進(jìn)行像素填充。2. 根據(jù)權(quán)利要求1所述的方法，其特征在于，所述根據(jù)所述可視區(qū)域的寬和高、富媒體 的寬和高以及選取的填充模式獲取所述富媒體的縮放百分比的步驟包括： 若選取的填充模式為fit適應(yīng)，獲取所述富媒體寬高比與所述可視區(qū)域的寬高比的比 值，當(dāng)所述比值大于1，則所述富媒體的寬度百分比為100%，所述富媒體的高度百分比為所 述可視區(qū)域的寬高比與所述富媒體的高寬比乘積的百分比，所述富媒體的高度方向上的頂 部距所述可視區(qū)域的高度方向上的頂部的百分比為100%減去所述富媒體的高度百分比后 再除以2,所述富媒體的寬度方向上的第一側(cè)距所述可視區(qū)域的寬度方向上的第一側(cè)的百 分比為0; 當(dāng)所述比值小于或等于1，則所述富媒體的高度百分比為100%，所述富媒體的寬度百 分比為所述可視區(qū)域的高寬比與所述富媒體的寬高比乘積的百分比，所述富媒體的高度方 向上的頂部距所述可視區(qū)域的高度方向上的頂部的百分比為0,所述富媒體的寬度方向上 的第一側(cè)距所述可視區(qū)域的寬度方向上的第一側(cè)的百分比為100%減去所述富媒體的寬度 百分比后再除以2。3. 根據(jù)權(quán)利要求1所述的方法，其特征在于，所述根據(jù)所述可視區(qū)域的寬和高、富媒體 的寬和高以及選取的填充模式獲取所述富媒體的縮放百分比的步驟包括： 若選取的填充模式為fill填充，則獲取所述富媒體寬高比與所述可視區(qū)域的寬高比的 比值，當(dāng)所述比值大于1，則所述富媒體的高度百分比為100%，所述富媒體的寬度百分比為 所述可視區(qū)域的高寬比與所述富媒體的寬高比乘積的百分比，所述富媒體的高度方向上的 頂部距所述可視區(qū)域的高度方向上的頂部的百分比為0,所述富媒體的寬度方向上的第一 側(cè)距所述可視區(qū)域的寬度方向上的第一側(cè)的百分比為100%減去所述富媒體的寬度百分比 后再除以2; 當(dāng)所述比值小于或等于1，則所述富媒體的寬度百分比為100%，所述富媒體的高度百 分比為所述可視區(qū)域的寬高比與所述富媒體的高寬比乘積的百分比，所述富媒體的高度方 向上的頂部距所述可視區(qū)域的高度方向上的頂部的百分比為100%減去所述富媒體的高度 百分比后再除以2,所述富媒體的寬度方向上的第一側(cè)距所述可視區(qū)域的寬度方向上的第 一側(cè)的百分比為0。4. 根據(jù)權(quán)利要求1所述的方法，其特征在于，所述根據(jù)所述可視區(qū)域的寬和高、富媒體 的寬和高以及選取的填充模式獲取所述富媒體的縮放百分比的步驟包括： 若選取的填充模式為拉伸，則所述富媒體的寬度百分比為1 〇〇 %，所述富媒體的高度百 分比為100%，所述富媒體的高度方向上的頂部距所述可視區(qū)域的高度方向上的頂部的百 分比為0,所述富媒體的寬度方向上的第一側(cè)距所述可視區(qū)域的寬度方向上的第一側(cè)的百 分比為0。5. 根據(jù)權(quán)利要求1所述的方法，其特征在于，所述根據(jù)所述可視區(qū)域的寬和高、富媒體 的寬和高以及選取的填充模式獲取所述富媒體的縮放百分比的步驟包括： 若選取的填充模式為居中，則所述富媒體的寬度為所述富媒體的原始寬度，所述富媒 體的高度為所述富媒體的原始高度，所述富媒體的高度方向上的頂部距所述可視區(qū)域的高 度方向上的頂部為所述可視區(qū)域的高度與所述富媒體的高度的差的一半，所述富媒體的寬 度方向上的第一側(cè)與所述可視區(qū)域的寬度方向上的第一側(cè)的距離為所述可視區(qū)域的寬度 與所述富媒體的寬度的差的一半。6. 根據(jù)權(quán)利要求1所述的方法，其特征在于，所述對(duì)所述富媒體配置在所述可視區(qū)域后 的空白像素進(jìn)行像素填充的步驟包括： 對(duì)所述富媒體配置在所述可視區(qū)域后的空白像素采用插值法進(jìn)行像素填充。7. -種Web富媒體跨屏適配裝置，其特征在于，包括： 第一獲取模塊，用于通過瀏覽器的HTML中插入的函數(shù)代碼直接獲取瀏覽器的可視區(qū)域 的寬和高； 第二獲取模塊，用于通過瀏覽器的HTML中插入的函數(shù)代碼直接獲取富媒體的寬和高； 第三獲取模塊，用于通過瀏覽器的HTML中插入的函數(shù)代碼直接獲取選取的填充模式； 處理模塊，用于通過瀏覽器的HTML中插入的函數(shù)代碼直接根據(jù)所述可視區(qū)域的寬和 高、富媒體的寬和高以及選取的填充模式獲取所述富媒體的縮放百分比； 配置模塊，用于通過瀏覽器的HTML中插入的函數(shù)代碼直接根據(jù)所述富媒體的縮放百分 比確定所述富媒體在所述可視區(qū)域的位置，將所述富媒體配置在所述可視區(qū)域的相應(yīng)位置 中； 像素填充模塊，用于通過瀏覽器的HTML中插入的函數(shù)代碼直接對(duì)所述富媒體配置在所 述可視區(qū)域后的空白像素進(jìn)行像素填充。8. 根據(jù)權(quán)利要求7所述的裝置，其特征在于，所述處理模塊還用于若選取的填充模式為 fit適應(yīng)，獲取所述富媒體寬高比與所述可視區(qū)域的寬高比的比值，當(dāng)所述比值大于1，則所 述富媒體的寬度百分比為100%，所述富媒體的高度百分比為所述可視區(qū)域的寬高比與所 述富媒體的高寬比乘積的百分比，所述富媒體的高度方向上的頂部距所述可視區(qū)域的高度 方向上的頂部的百分比為100%減去所述富媒體的高度百分比后再除以2,所述富媒體的寬 度方向上的第一側(cè)距所述可視區(qū)域的寬度方向上的第一側(cè)的百分比為〇; 當(dāng)所述比值小于或等于1，則所述富媒體的高度百分比為100%，所述富媒體的寬度百 分比為所述可視區(qū)域的高寬比與所述富媒體的寬高比乘積的百分比，所述富媒體的高度方 向上的頂部距所述可視區(qū)域的高度方向上的頂部的百分比為〇,所述富媒體的寬度方向上 的第一側(cè)距所述可視區(qū)域的寬度方向上的第一側(cè)的百分比為100%減去所述富媒體的寬度 百分比后再除以2; 以及所述處理模塊還用于若選取的填充模式為fill填充，則獲取所述富媒體寬高比與 所述可視區(qū)域的寬高比的比值，當(dāng)所述比值大于1，則所述富媒體的高度百分比為100%，所 述富媒體的寬度百分比為所述可視區(qū)域的高寬比與所述富媒體的寬高比乘積的百分比，所 述富媒體的高度方向上的頂部距所述可視區(qū)域的高度方向上的頂部的百分比為0,所述富 媒體的寬度方向上的第一側(cè)距所述可視區(qū)域的寬度方向上的第一側(cè)的百分比為100%減去 所述富媒體的寬度百分比后再除以2; 當(dāng)所述比值小于或等于1，則所述富媒體的寬度百分比為100%，所述富媒體的高度百 分比為所述可視區(qū)域的寬高比與所述富媒體的高寬比乘積的百分比，所述富媒體的高度方 向上的頂部距所述可視區(qū)域的高度方向上的頂部的百分比為100%減去所述富媒體的高度 百分比后再除以2,所述富媒體的寬度方向上的第一側(cè)距所述可視區(qū)域的寬度方向上的第 一側(cè)的百分比為0。9. 根據(jù)權(quán)利要求7所述的裝置，其特征在于，所述處理模塊還用于若選取的填充模式為 拉伸，則所述富媒體的寬度百分比為100%，所述富媒體的高度百分比為100%，所述富媒體 的高度方向上的頂部距所述可視區(qū)域的高度方向上的頂部的百分比為〇,所述富媒體的寬 度方向上的第一側(cè)距所述可視區(qū)域的寬度方向上的第一側(cè)的百分比為〇;以及 若選取的填充模式為居中，則所述富媒體的寬度為所述富媒體的原始寬度，所述富媒 體的高度為所述富媒體的原始高度，所述富媒體的高度方向上的頂部距所述可視區(qū)域的高 度方向上的頂部為所述可視區(qū)域的高度與所述富媒體的高度的差的一半，所述富媒體的寬 度方向上的第一側(cè)與所述可視區(qū)域的寬度方向上的第一側(cè)的距離為所述可視區(qū)域的寬度 與所述富媒體的寬度的差的一半。10. 根據(jù)權(quán)利要求7所述的裝置，其特征在于，所述像素填充模塊還用于對(duì)所述富媒體 配置在所述可視區(qū)域后的空白像素采用插值法進(jìn)行像素填充。
【文檔編號(hào)】G06F17/30GK105930464SQ201610255770
【公開日】2016年9月7日
【申請(qǐng)日】2016年4月22日
【發(fā)明人】張磊
【申請(qǐng)人】騰訊科技（深圳）有限公司