Web富媒体跨屏适配方法和装置的制造方法

Web富媒体跨屏适配方法和装置的制造方法
【专利摘要】本发明涉及一种Web富媒体跨屏适配方法和装置。所述方法包括以下步骤：获取浏览器的可视区域的宽和高；获取富媒体的宽和高；获取选取的填充模式；根据所述可视区域的宽和高、富媒体的宽和高以及选取的填充模式获取所述富媒体的缩放百分比；根据所述富媒体的缩放百分比确定所述富媒体在所述可视区域的位置，将所述富媒体配置在所述可视区域的相应位置中；对所述富媒体配置在所述可视区域后的空白像素进行像素填充。上述Web富媒体跨屏适配方法和装置，使得富媒体在浏览器的可视区域中展示，能够适配不同屏幕尺寸的设备，不需开发人员再关注屏幕的适配，提高工作效率。
【专利说明】
Web富媒体跨屏适配方法和装置
技术领域
[0001] 本发明涉及图像处理领域，特别是涉及一种Web富媒体跨屏适配方法和装置。
【背景技术】
[0002] 用户通过网络访问Web页面时，有时Web页面中存在富媒体数据，为了播放富媒体 数据，通常在浏览器中安装Flash播放器插件，通过Flash播放器插件播放该富媒体，Flash 播放器插件提供了画面比例及全屏功能，通过选择画面比例实现富媒体画面显示比例调整 和全屏功能实现富媒体的全屏展示。但是许多设备不支持Flash，而采用HTML5(Hyper Text Markup Language，超文本标记语言）构建富媒体应用。由于设备的屏幕尺寸分辨率多种多 样，目前通过HTML5构建的富媒体应用无法适配各种屏幕尺寸的设备。

【发明内容】

[0003] 基于此，有必要针对传统的HTML5构建的富媒体无法适配各种屏幕尺寸的设备的 问题，提供一种Web富媒体跨屏适配方法，能适配不同屏幕尺寸的设备，不需开发人员再关 注屏幕的适配，提高工作效率。
[0004] 此外，还有必要提供一种Web富媒体跨屏适配装置，能适配不同屏幕尺寸的设备， 不需开发人员再关注屏幕的适配，提高工作效率。
[0005] -种Web富媒体跨屏适配方法，包括：
[0006] 通过浏览器的HTML中插入的函数代码直接执行以下步骤：
[0007] 获取浏览器的可视区域的宽和高；
[0008] 获取富媒体的宽和高；
[0009] 获取选取的填充模式；
[0010] 根据所述可视区域的宽和高、富媒体的宽和高以及选取的填充模式获取所述富媒 体的缩放百分比；
[0011] 根据所述富媒体的缩放百分比确定所述富媒体在所述可视区域的位置，将所述富 媒体配置在所述可视区域的相应位置中；
[0012] 对所述富媒体配置在所述可视区域后的空白像素进行像素填充。
[0013] 一种Web富媒体跨屏适配装置，包括：
[0014] 第一获取模块，用于获取浏览器的可视区域的宽和高；
[0015] 第二获取模块，用于获取富媒体的宽和高；
[0016] 第三获取模块，用于通过浏览器的HTML中插入的函数代码直接获取选取的填充模 式；
[0017] 处理模块，用于通过浏览器的HTML中插入的函数代码直接根据所述可视区域的宽 和高、富媒体的宽和高以及选取的填充模式获取所述富媒体的缩放百分比；
[0018] 配置模块，用于通过浏览器的HTML中插入的函数代码直接根据所述富媒体的缩放 百分比确定所述富媒体在所述可视区域的位置，将所述富媒体配置在所述可视区域的相应 位置中；
[0019]像素填充模块，用于通过浏览器的HTML中插入的函数代码直接对所述富媒体配置 在所述可视区域后的空白像素进行像素填充。
[0020] 上述Web富媒体跨屏适配方法和装置，通过获取浏览器的可视区域的宽和高、富媒 体的宽和高以及填充模式，并得到富媒体的缩放百分比，根据富媒体缩放百分比确定富媒 体在可视区域的位置，并对配置富媒体到可视区域后的空白像素进行填充，使得富媒体在 浏览器的可视区域中展示，能够适配不同屏幕尺寸的设备，不需开发人员再关注屏幕的适 配，提高工作效率;且对富媒体进行像素填充，使得产生超分辨率的缩放效果。
【附图说明】
[0021] 图1为一个实施例中终端的内部结构示意图；
[0022]图2为一个实施例中Web富媒体跨屏适配方法的流程图；
[0023] 图3为一个实施例中选取填充模式的界面示意图；
[0024] 图4为图3中选取拉伸填充模式的示意图；
[0025] 图5为一个实施例中选取适应模式的效果示意图；
[0026]图6为一个实施例中拉伸模式的效果不意图；
[0027] 图7A为原始图像再浏览器中的示意图；
[0028] 图7B为全屏适配后，光标移入出现全屏按钮；
[0029]图7C为全屏展示的效果示意图；
[0030]图8为一个实施例中Flappy Bird富媒体在fill模式下适配不同屏幕尺寸的结果 示意图；
[0031]图9为一个实施例中Flappy Bird富媒体在fit模式下适配不同屏幕尺寸的结果示 意图；
[0032]图10为一个实施例中Web富媒体跨屏适配装置的结构框图。
【具体实施方式】
[0033]为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对 本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并 不用于限定本发明。
[0034]可以理解，本发明所使用的术语"第一"、"第二"等可在本文中用于描述各种元件， 但这些元件不受这些术语限制。这些术语仅用于将第一个元件与另一个元件区分。举例来 说，在不脱离本发明的范围的情况下，可以将第一客户端称为第二客户端，且类似地，可将 第二客户端称为第一客户端。第一客户端和第二客户端两者都是客户端，但其不是同一客 户端。
[0035]图1为一个实施例中终端的内部结构示意图。如图1所示，该终端包括通过系统总 线连接的处理器、非易失性存储介质、内存、网络接口、显示屏和输入装置。其中，终端的非 易失性存储介质存储有操作系统，还包括一种Web富媒体跨屏适配装置。该处理器用于提供 计算和控制能力，支撑整个终端的运行，被用于执行Web富媒体跨屏视频方法的流程步骤。 终端中的网络接口用于与服务器进行网络通信，如发送富媒体数据至服务器，接收服务器 返回的富媒体数据等。终端的显示屏可以是液晶显示屏或者电子墨水显示屏等，输入装置 可以是显示屏上覆盖的触摸层，也可以是终端外壳上设置的按键、轨迹球或触控板，也可以 是外接的键盘、触控板或鼠标等。该终端可以是内置浏览器或Webview的计算机、手机、电视 机、个人数字助理、手表或穿戴式设备等。本领域技术人员可以理解，图1中示出的结构，仅 仅是与本申请方案相关的部分结构的框图，并不构成对本申请方案所应用于其上的终端的 限定，具体的终端可以包括比图中所示更多或更少的部件，或者组合某些部件，或者具有不 同的部件布置。
[0036]图2为一个实施例中Web富媒体跨屏适配方法的流程图。如图2所示，一种Web富媒 体跨屏适配方法，包括以下步骤：
[0037] 步骤202,获取浏览器的可视区域的宽和高。
[0038] 本实施例中，通过浏览器的HTML中的函数代码window. innerWidth和 window. innerHeight直接获取浏览器的可视区域的宽和高。
[0039]步骤204,获取富媒体的宽和高。
[0040] 本实施例中，通过浏览器的HTML中的函数代码canvas. width和canvas. height直 接获取富媒体的宽和高。富媒体是指canvas/webgl写的应用程序或游戏等，不限于此。
[00411步骤206,获取选取的填充模式。
[0042]本实施例中，通过浏览器的HTML中的函数代码直接获取选取的填充模式。 alloyscreen提供了四种填充模式用于展示比例调节，并提供了restore还原初始状态。填 充模式可包括fit适应、fill填充、拉伸(stretch)、居中（center)。
[0043]其中，fit适应方式是指显示比例不变，左右撑满或上下撑满，无图像信息丢失，一 般情况下会出现左右黑边或上下黑边。
[0044] fill填充模式是指显示比例不变，撑满可视区域，以丢失部分图像的成本，保证不 发生变形。
[0045]拉伸方式是指宽高撑满可视区域，一般情况下会发生变形。
[0046] center居中方式是指显示比例不便，宽高不变，在可视区域居中显示。
[0047]可视区域可为终端的整个屏幕或部分屏幕等。
[0048] 为了实现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]同理为了实现其他的填充模式，可将上述代码中fit()代替为对应的填充模式。
[0052]图3为一个实施例中选取填充模式的界面示意图。如图3所示，在菜单界面中可选 择分辨率、填充模式、全屏、音效大小调节、音乐音量大小调节等。填充模式以下拉框的方式 显示有fit适应、fill填充、拉伸、居中。
[0053]图4为图3中选取拉伸填充模式的示意图。如图4所示，分辨率为1366*768，填充模 式为拉伸。
[0054]步骤208,根据该可视区域的宽和高、富媒体的宽和高以及选取的填充模式获取该 富媒体的缩放百分比。
[0055] 通过浏览器的HTML中插入的函数代码直接根据可视区域的宽和高、富媒体的宽和 高以及选取的填充模式获取该富媒体的缩放百分比。
[0056] 步骤210,根据该富媒体的缩放百分比确定该富媒体在该可视区域的位置，将该富 媒体配置在该可视区域的相应位置中。
[0057] 本实施例中，通过浏览器的H T M L中插入的函数代码直接使用 this ? canvas ? getBoundingClientRect()确定富媒体在CSS(Cascading Style Sheets，层 叠样式表)中的位置。使用CSS Position Fixed固定富媒体在CSS中的位置。
[0058] 步骤212,对该富媒体配置在该可视区域后的空白像素进行像素填充。
[0059] 本实施例中，通过浏览器的HTML中插入的函数代码直接对富媒体配置在可视区域 后的空白像素采用插值法进行像素填充。
[0060] 图像插值就是利用已知邻近像素点的灰度值或RGB图像中的三色值来产生未知像 素点的灰度值，以便由原始图像再生出具有更高分辨率的图像。
[0061 ] 该插值法可包括最近邻元插值法(nearest neighbor interpolation)、双线性内 插法（bilinear interpolation)、三次卷积内插法（cubic convolution interpolation)。
[0062] 其中，最近邻元插值法:对于通过反向变换得到的一个浮点坐标，对其进行简单的 取整，得到一个整数型坐标，这个整数型坐标对应的像素值就是目的像素的像素值，也就是 说，取浮点坐标最邻近的左上角点（对于DIB是右上角，因为它的扫描行是逆序存储的）对应 的像素值。可见，最邻近插值简单且直观。
[0063] 双线性内插值:对于一个目的像素，设置坐标通过反向变换得到的浮点坐标为（i+ u，j+v)，其中i、j均为非负整数，u、v为[0，1)区间的浮点数，贝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]双线性内插值法计算量大，但缩放后图像质量高，不会出现像素值不连续的的情 况。由于双线性插值具有低通滤波器的性质，使高频分量受损，所以可能会使图像轮廓在一 定程度上变得模糊。
[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富媒体跨屏适配方法，通过获取浏览器的可视区域的宽和高、富媒体的宽 和高以及填充模式，并得到富媒体的缩放百分比，根据富媒体缩放百分比确定富媒体在可 视区域的位置，并对配置富媒体到可视区域后的空白像素进行填充，使得富媒体在浏览器 的可视区域中展示，能够适配不同屏幕尺寸的设备，不需开发人员再关注屏幕的适配，提高 工作效率;且对富媒体进行像素填充，使得产生超分辨率的缩放效果。
[0073] 在一个实施例中，根据该可视区域的宽和高、富媒体的宽和高以及选取的填充模 式获取该富媒体的缩放百分比包括：
[0074] 若选取的填充模式为fit适应，获取该富媒体宽高比与该可视区域的宽高比的比 值，当该比值大于1，则该富媒体的宽度百分比为100%，该富媒体的高度百分比为该可视区 域的宽高比与该富媒体的高宽比乘积的百分比，该富媒体的高度方向上的顶部距该可视区 域的高度方向上的顶部的百分比为1 〇 〇 %减去该富媒体的高度百分比后再除以2，该富媒体 的宽度方向上的第一侧距该可视区域的宽度方向上的第一侧的百分比为〇;
[0075] 当该比值小于或等于1，则该富媒体的高度百分比为100%，该富媒体的宽度百分 比为该可视区域的高宽比与该富媒体的宽高比乘积的百分比，该富媒体的高度方向上的顶 部距该可视区域的高度方向上的顶部的百分比为〇,该富媒体的宽度方向上的第一侧距该 可视区域的宽度方向上的第一侧的百分比为100%减去该富媒体的宽度百分比后再除以2。
[0076] 图5为一个实施例中选取适应模式的效果示意图。如图5所示，填充模式为适应模 式，则显示比例不变，富媒体的宽高比与可视区域的宽高比的比值大于1，富媒体的宽度百 分比为100%，即撑满左右;富媒体的高度百分比为该可视区域的宽高比与该富媒体的高宽 比乘积的百分比。该富媒体的高度方向上的顶部距该可视区域的高度方向上的顶部的百分 比为100%减去该富媒体的高度百分比后再除以2,也就是上下出现黑色区域。
[0077] 若选取的填充模式为fill填充，则获取该富媒体宽高比与该可视区域的宽高比的 比值，当该比值大于1，则该富媒体的高度百分比为100%，该富媒体的宽度百分比为该可视 区域的高宽比与该富媒体的宽高比乘积的百分比，该富媒体的高度方向上的顶部距该可视 区域的高度方向上的顶部的百分比为〇，该富媒体的宽度方向上的第一侧距该可视区域的 宽度方向上的第一侧的百分比为100%减去该富媒体的宽度百分比后再除以2;
[0078] 当该比值小于或等于1，则该富媒体的宽度百分比为100%，该富媒体的高度百分 比为该可视区域的宽高比与该富媒体的高宽比乘积的百分比，该富媒体的高度方向上的顶 部距该可视区域的高度方向上的顶部的百分比为100%减去该富媒体的高度百分比后再除 以2,该富媒体的宽度方向上的第一侧距该可视区域的宽度方向上的第一侧的百分比为0。
[0079] 若选取的填充模式为拉伸，则该富媒体的宽度百分比为100%，该富媒体的高度百 分比为10 0 %，该富媒体的高度方向上的顶部距该可视区域的高度方向上的顶部的百分比 为0,该富媒体的宽度方向上的第一侧距该可视区域的宽度方向上的第一侧的百分比为0。
[0080] 图6为一个实施例中拉伸模式的效果示意图。如图6所示，富媒体的图像被拉伸后， 图像发生了变形。
[0081] 若选取的填充模式为居中，则该富媒体的宽度为该富媒体的原始宽度，该富媒体 的高度为该富媒体的原始高度，该富媒体的高度方向上的顶部距该可视区域的高度方向上 的顶部为该可视区域的高度与该富媒体的高度的差的一半，该富媒体的宽度方向上的第一 侧与该可视区域的宽度方向上的第一侧的距离为该可视区域的宽度与该富媒体的宽度的 差的一半。
[0082]上述各填充模式计算富媒体的缩放百分比的代码可如下，其中，width和height分 别是可视区域的宽和高，canvasWidth和canvasHeight分别是指富媒体的宽和高;rate为 (this ? canvasWidth/this ? canvasHeight)/(this .width/this .height)的值。 flt:function(){ //适应 fit 买现 this.type="fit"；
[0083] if(this.rate>l){ //当 rate 大于 1 this._fltorfillHeight(); //设置富媒体的高度 ]else{ this._fitorfill\Vidth( ); //设置富媒体的宽度 } }， fi!l:function( ){ /7fi丨丨填充实现 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( ){ //拉伸实现 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(){ //居中模式实现 This, type:' 'center"； This._befbre"; This._css(this.canvas, i "left"：（this.,width-this,canvas\vidrh)/2+"px"， //left 为可视区域的览度减去富 媒体宽度之差的一半 "k>p"：（lhis.lidght-lhisxanvasHeiglr!.)Z2+"px",//U)p 为可视区域的高 媒体高度之差的一半 "wi<ith"_:thi_s，.ess.Width, "宽度为原冨媒体宽度 "heighr:this.cssl [eight .//高度为原富媒体高度 })；
[0086] 其中，表示除法运算，表示乘法运算。
[0087] 在一个实施例中，上述Web富媒体跨屏适配方法还包括：提供全屏组件，并将全屏 组件展示在富媒体上;获取对该全屏组件的触发操作，将富媒体进行全屏展示或退回到原 始状态。全屏模式的实现可采用如下代码实现： <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)内部全屏。当浏览器或 webview等是全屏时，富媒体也是全屏；当浏览器或webview等是分屏时，富媒体处于分屏。 不论载体是全屏还是分屏都可采用上述Web富媒体跨屏适配方法对富媒体进行处理。
[0091]在一个实施例中，上述Web富媒体跨屏视频方法还包括:获取交互行为发生点的真 实坐标位置。
[0092]交互行为发生点是指用户触摸或点击或其他交互行为产生的位置。
[0093]具体地，若富媒体canvas被各种css width和height属性放大或缩小，交互行为发 生点相对于左上角的实际坐标重新计算。若富媒体canvas有top boder或者left boder，交 互行为发生点相对于左上角的实际坐标要减去boder的宽度。若boxsizing(盒子模型类型） 为boder-box，交互行为发生点相对于左上角的实际坐标重新计算。
[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左边边框宽度 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为上 部分边框宽度，borderLeftWidth为左部分边框宽度，width为变形后宽度，height为变形后 高度，pageX，pageY为交互行为发生点的坐标位置，this .offset[0]和this .offset[1]为富 媒体左上角坐标在文档中的偏移量。
[0097]使用 pageX-this.offset[0]-borderLeftWidth得到x 坐标，使用卩&86丫_ this. of f set [ 1 ]_borderTopWidth得到y坐标。若盒子模型类型为边框盒，则canvasWidth为 富媒体变形后的真实宽度，等于width减去borderLeftWidth得到，canvasHeight为富媒体 变形后的真实高度，等于height减去borderTopWidth得到。this, width为富媒体的真实宽 度，this, height为富媒体的真实高度。
[0098] 富媒体的真实宽度与富媒体变形后的真实宽度比值再乘以x坐标得到真实的坐标 X，富媒体的真实高度与富媒体变形后的真实高度比值再乘以y坐标得到真实的坐标y。
[0099] 图7A为原始图像在浏览器中的示意图；图7B为全屏适配后，光标移入出现全屏按 钮；图7C为全屏展示的效果示意图。如图7A所示，图像占浏览器的可视区域的一部分;如图 7B所示，光标移入后在图像的右上角出现了全屏按钮;如图7C所示，点击全屏按钮后，图像 进行全屏展示，图像的填充方式为居中，则图像位于可视区域中间，其他采用黑色填充。 [0 100]图8为一个实施例中Flappy Bird富媒体在fill模式下适配不同屏幕尺寸的结果 示意图。如图8所示，第一尺寸、第二尺寸、第三尺寸和第四尺寸，且第一尺寸、第二尺寸、第 三尺寸和第四尺寸逐渐减小。Flappy Bird富媒体在fill模式下将第一尺寸、第二尺寸、第 三尺寸和第四尺寸屏幕均填满。
[0101]图9为一个实施例中Flappy Bird富媒体在fit模式下适配不同屏幕尺寸的结果示 意图。如图9所示，第一尺寸、第二尺寸、第三尺寸和第四尺寸，且第一尺寸、第二尺寸、第三 尺寸和第四尺寸逐渐减小。Flappy Bird富媒体在fit模式下将第二尺寸、第三尺寸和第四 尺寸屏幕均填满，在第一尺寸屏幕上将上下撑满，左右黑边。
[0102] 此外，center上尺寸比例不变居中stretch是拉伸填满屏幕。
[0103] 需要说明的是，上述Web富媒体跨屏适配方法，可适用于canvas/webgl或者Dom里 内嵌的canvas/webgl的个人计算机或移动终端的网站或者HTML5动感创意网站或个人计算 机或移动终端HTML5游戏应用等的适配，甚至适用于任意图片及HTML5SVG(Scalable Vector Graphics，可缩放矢量图形)和HTML5Video的展示和播放，让开发人员不再关注屏 幕的适配，专注于视觉的还原、交互和业务逻辑的实现，大大提高了工作效率。
[0104] 相比于Flash，Flash是以插件形式存在浏览器中，且仅限于视频播放，且与某些设 备的软件系统兼容性差。上述Web富媒体跨屏适配方法采用浏览器的HTML中插入函数代码 直接实现，适用包含HTML5的复杂应用和游戏的适配和全屏，甚至适用于任意图片及 HTML5SVG和HTML5Video的展示和播放。
[0105]图10为一个实施例中Web富媒体跨屏适配装置的结构框图。如图10所示，一种Web 富媒体跨屏适配装置，包括第一获取模块1002、第二获取模块1004、第三获取模块1006、处 理模块1008、配置模块1010和像素填充模块1012。其中：
[0106] 第一获取模块1002用于通过浏览器的HTML中插入的函数代码直接获取浏览器的 可视区域的宽和高；
[0107] 第二获取模块1004用于通过浏览器的HTML中插入的函数代码直接获取富媒体的 宽和高；
[0108] 第三获取模块1006用于通过浏览器的HTML中插入的函数代码直接获取选取的填 充模式；
[0109] 处理模块1008用于通过浏览器的HTML中插入的函数代码直接根据该可视区域的 宽和高、富媒体的宽和高以及选取的填充模式获取该富媒体的缩放百分比；
[0110] 配置模块1010用于通过浏览器的HTML中插入的函数代码直接根据该富媒体的缩 放百分比确定该富媒体在该可视区域的位置，将该富媒体配置在该可视区域的相应位置 中；
[0111] 像素填充模块1012用于通过浏览器的HTML中插入的函数代码直接对该富媒体配 置在该可视区域后的空白像素进行像素填充。
[0112] 本实施例中，该像素填充模块1012还用于对该富媒体配置在该可视区域后的空白 像素采用插值法进行像素填充。
[0113] 上述Web富媒体跨屏适配装置，通过获取浏览器的可视区域的宽和高、富媒体的宽 和高以及填充模式，并得到富媒体的缩放百分比，根据富媒体缩放百分比确定富媒体在可 视区域的位置，并对配置富媒体到可视区域后的空白像素进行填充，使得富媒体在浏览器 的可视区域中展示，能够适配不同屏幕尺寸的设备，不需开发人员再关注屏幕的适配，提高 工作效率;且对富媒体进行像素填充，使得产生超分辨率的缩放效果。
[0114] 在一个实施例中，该处理模块1008还用于若选取的填充模式为fit适应，获取该富 媒体宽高比与该可视区域的宽高比的比值，当该比值大于1，则该富媒体的宽度百分比为 100%，该富媒体的高度百分比为该可视区域的宽高比与该富媒体的高宽比乘积的百分比， 该富媒体的高度方向上的顶部距该可视区域的高度方向上的顶部的百分比为100%减去该 富媒体的高度百分比后再除以2,该富媒体的宽度方向上的第一侧距该可视区域的宽度方 向上的第一侧的百分比为0;
[0115] 当该比值小于或等于1，则该富媒体的高度百分比为100%，该富媒体的宽度百分 比为该可视区域的高宽比与该富媒体的宽高比乘积的百分比，该富媒体的高度方向上的顶 部距该可视区域的高度方向上的顶部的百分比为〇,该富媒体的宽度方向上的第一侧距该 可视区域的宽度方向上的第一侧的百分比为100%减去该富媒体的宽度百分比后再除以2; [0116]以及该处理模块1008还用于若选取的填充模式为fill填充，则获取该富媒体宽高 比与该可视区域的宽高比的比值，当该比值大于1，则该富媒体的高度百分比为100%，该富 媒体的宽度百分比为该可视区域的高宽比与该富媒体的宽高比乘积的百分比，该富媒体的 高度方向上的顶部距该可视区域的高度方向上的顶部的百分比为0，该富媒体的宽度方向 上的第一侧距该可视区域的宽度方向上的第一侧的百分比为100%减去该富媒体的宽度百 分比后再除以2;
[0117]当该比值小于或等于1，则该富媒体的宽度百分比为100%，该富媒体的高度百分 比为该可视区域的宽高比与该富媒体的高宽比乘积的百分比，该富媒体的高度方向上的顶 部距该可视区域的高度方向上的顶部的百分比为100%减去该富媒体的高度百分比后再除 以2,该富媒体的宽度方向上的第一侧距该可视区域的宽度方向上的第一侧的百分比为0。 [0118]该处理模块1008还用于若选取的填充模式为拉伸，则该富媒体的宽度百分比为 100%，该富媒体的高度百分比为100%，该富媒体的高度方向上的顶部距该可视区域的高 度方向上的顶部的百分比为0，该富媒体的宽度方向上的第一侧距该可视区域的宽度方向 上的第一侧的百分比为0;以及
[0119] 该处理模块1008还用于若选取的填充模式为居中，则该富媒体的宽度为该富媒体 的原始宽度，该富媒体的高度为该富媒体的原始高度，该富媒体的高度方向上的顶部距该 可视区域的高度方向上的顶部为该可视区域的高度与该富媒体的高度的差的一半，该富媒 体的宽度方向上的第一侧与该可视区域的宽度方向上的第一侧的距离为该可视区域的宽 度与该富媒体的宽度的差的一半。
[0120] 本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以 通过计算机程序来指令相关的硬件来完成，所述的程序可存储于一非易失性计算机可读取 存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。其中，所述的非易失 性存储介质可为磁碟、光盘、只读存储记忆体(Read-Only Memory，ROM)等。
[0121]以上所述实施例仅表达了本发明的几种实施方式，其描述较为具体和详细，但并 不能因此而理解为对本发明专利范围的限制。应当指出的是，对于本领域的普通技术人员 来说，在不脱离本发明构思的前提下，还可以做出若干变形和改进，这些都属于本发明的保 护范围。因此，本发明专利的保护范围应以所附权利要求为准。
【主权项】
1. 一种Web富媒体跨屏适配方法，包括： 通过浏览器的HTML中插入的函数代码直接执行以下步骤： 获取浏览器的可视区域的宽和高； 获取富媒体的宽和高； 获取选取的填充模式； 根据所述可视区域的宽和高、富媒体的宽和高以及选取的填充模式获取所述富媒体的 缩放百分比； 根据所述富媒体的缩放百分比确定所述富媒体在所述可视区域的位置，将所述富媒体 配置在所述可视区域的相应位置中； 对所述富媒体配置在所述可视区域后的空白像素进行像素填充。2. 根据权利要求1所述的方法，其特征在于，所述根据所述可视区域的宽和高、富媒体 的宽和高以及选取的填充模式获取所述富媒体的缩放百分比的步骤包括： 若选取的填充模式为fit适应，获取所述富媒体宽高比与所述可视区域的宽高比的比 值，当所述比值大于1，则所述富媒体的宽度百分比为100%，所述富媒体的高度百分比为所 述可视区域的宽高比与所述富媒体的高宽比乘积的百分比，所述富媒体的高度方向上的顶 部距所述可视区域的高度方向上的顶部的百分比为100%减去所述富媒体的高度百分比后 再除以2,所述富媒体的宽度方向上的第一侧距所述可视区域的宽度方向上的第一侧的百 分比为0; 当所述比值小于或等于1，则所述富媒体的高度百分比为100%，所述富媒体的宽度百 分比为所述可视区域的高宽比与所述富媒体的宽高比乘积的百分比，所述富媒体的高度方 向上的顶部距所述可视区域的高度方向上的顶部的百分比为0,所述富媒体的宽度方向上 的第一侧距所述可视区域的宽度方向上的第一侧的百分比为100%减去所述富媒体的宽度 百分比后再除以2。3. 根据权利要求1所述的方法，其特征在于，所述根据所述可视区域的宽和高、富媒体 的宽和高以及选取的填充模式获取所述富媒体的缩放百分比的步骤包括： 若选取的填充模式为fill填充，则获取所述富媒体宽高比与所述可视区域的宽高比的 比值，当所述比值大于1，则所述富媒体的高度百分比为100%，所述富媒体的宽度百分比为 所述可视区域的高宽比与所述富媒体的宽高比乘积的百分比，所述富媒体的高度方向上的 顶部距所述可视区域的高度方向上的顶部的百分比为0,所述富媒体的宽度方向上的第一 侧距所述可视区域的宽度方向上的第一侧的百分比为100%减去所述富媒体的宽度百分比 后再除以2; 当所述比值小于或等于1，则所述富媒体的宽度百分比为100%，所述富媒体的高度百 分比为所述可视区域的宽高比与所述富媒体的高宽比乘积的百分比，所述富媒体的高度方 向上的顶部距所述可视区域的高度方向上的顶部的百分比为100%减去所述富媒体的高度 百分比后再除以2,所述富媒体的宽度方向上的第一侧距所述可视区域的宽度方向上的第 一侧的百分比为0。4. 根据权利要求1所述的方法，其特征在于，所述根据所述可视区域的宽和高、富媒体 的宽和高以及选取的填充模式获取所述富媒体的缩放百分比的步骤包括： 若选取的填充模式为拉伸，则所述富媒体的宽度百分比为1 〇〇 %，所述富媒体的高度百 分比为100%，所述富媒体的高度方向上的顶部距所述可视区域的高度方向上的顶部的百 分比为0,所述富媒体的宽度方向上的第一侧距所述可视区域的宽度方向上的第一侧的百 分比为0。5. 根据权利要求1所述的方法，其特征在于，所述根据所述可视区域的宽和高、富媒体 的宽和高以及选取的填充模式获取所述富媒体的缩放百分比的步骤包括： 若选取的填充模式为居中，则所述富媒体的宽度为所述富媒体的原始宽度，所述富媒 体的高度为所述富媒体的原始高度，所述富媒体的高度方向上的顶部距所述可视区域的高 度方向上的顶部为所述可视区域的高度与所述富媒体的高度的差的一半，所述富媒体的宽 度方向上的第一侧与所述可视区域的宽度方向上的第一侧的距离为所述可视区域的宽度 与所述富媒体的宽度的差的一半。6. 根据权利要求1所述的方法，其特征在于，所述对所述富媒体配置在所述可视区域后 的空白像素进行像素填充的步骤包括： 对所述富媒体配置在所述可视区域后的空白像素采用插值法进行像素填充。7. -种Web富媒体跨屏适配装置，其特征在于，包括： 第一获取模块，用于通过浏览器的HTML中插入的函数代码直接获取浏览器的可视区域 的宽和高； 第二获取模块，用于通过浏览器的HTML中插入的函数代码直接获取富媒体的宽和高； 第三获取模块，用于通过浏览器的HTML中插入的函数代码直接获取选取的填充模式； 处理模块，用于通过浏览器的HTML中插入的函数代码直接根据所述可视区域的宽和 高、富媒体的宽和高以及选取的填充模式获取所述富媒体的缩放百分比； 配置模块，用于通过浏览器的HTML中插入的函数代码直接根据所述富媒体的缩放百分 比确定所述富媒体在所述可视区域的位置，将所述富媒体配置在所述可视区域的相应位置 中； 像素填充模块，用于通过浏览器的HTML中插入的函数代码直接对所述富媒体配置在所 述可视区域后的空白像素进行像素填充。8. 根据权利要求7所述的装置，其特征在于，所述处理模块还用于若选取的填充模式为 fit适应，获取所述富媒体宽高比与所述可视区域的宽高比的比值，当所述比值大于1，则所 述富媒体的宽度百分比为100%，所述富媒体的高度百分比为所述可视区域的宽高比与所 述富媒体的高宽比乘积的百分比，所述富媒体的高度方向上的顶部距所述可视区域的高度 方向上的顶部的百分比为100%减去所述富媒体的高度百分比后再除以2,所述富媒体的宽 度方向上的第一侧距所述可视区域的宽度方向上的第一侧的百分比为〇; 当所述比值小于或等于1，则所述富媒体的高度百分比为100%，所述富媒体的宽度百 分比为所述可视区域的高宽比与所述富媒体的宽高比乘积的百分比，所述富媒体的高度方 向上的顶部距所述可视区域的高度方向上的顶部的百分比为〇,所述富媒体的宽度方向上 的第一侧距所述可视区域的宽度方向上的第一侧的百分比为100%减去所述富媒体的宽度 百分比后再除以2; 以及所述处理模块还用于若选取的填充模式为fill填充，则获取所述富媒体宽高比与 所述可视区域的宽高比的比值，当所述比值大于1，则所述富媒体的高度百分比为100%，所 述富媒体的宽度百分比为所述可视区域的高宽比与所述富媒体的宽高比乘积的百分比，所 述富媒体的高度方向上的顶部距所述可视区域的高度方向上的顶部的百分比为0,所述富 媒体的宽度方向上的第一侧距所述可视区域的宽度方向上的第一侧的百分比为100%减去 所述富媒体的宽度百分比后再除以2; 当所述比值小于或等于1，则所述富媒体的宽度百分比为100%，所述富媒体的高度百 分比为所述可视区域的宽高比与所述富媒体的高宽比乘积的百分比，所述富媒体的高度方 向上的顶部距所述可视区域的高度方向上的顶部的百分比为100%减去所述富媒体的高度 百分比后再除以2,所述富媒体的宽度方向上的第一侧距所述可视区域的宽度方向上的第 一侧的百分比为0。9. 根据权利要求7所述的装置，其特征在于，所述处理模块还用于若选取的填充模式为 拉伸，则所述富媒体的宽度百分比为100%，所述富媒体的高度百分比为100%，所述富媒体 的高度方向上的顶部距所述可视区域的高度方向上的顶部的百分比为〇,所述富媒体的宽 度方向上的第一侧距所述可视区域的宽度方向上的第一侧的百分比为〇;以及 若选取的填充模式为居中，则所述富媒体的宽度为所述富媒体的原始宽度，所述富媒 体的高度为所述富媒体的原始高度，所述富媒体的高度方向上的顶部距所述可视区域的高 度方向上的顶部为所述可视区域的高度与所述富媒体的高度的差的一半，所述富媒体的宽 度方向上的第一侧与所述可视区域的宽度方向上的第一侧的距离为所述可视区域的宽度 与所述富媒体的宽度的差的一半。10. 根据权利要求7所述的装置，其特征在于，所述像素填充模块还用于对所述富媒体 配置在所述可视区域后的空白像素采用插值法进行像素填充。
【文档编号】G06F17/30GK105930464SQ201610255770
【公开日】2016年9月7日
【申请日】2016年4月22日
【发明人】张磊
【申请人】腾讯科技（深圳）有限公司