CN105930464B - Web富媒体跨屏适配方法和装置 - Google Patents

Abstract

本发明涉及一种Web富媒体跨屏适配方法和装置。所述方法包括以下步骤：获取浏览器的可视区域的宽和高；获取富媒体的宽和高；获取选取的填充模式；根据所述可视区域的宽和高、富媒体的宽和高以及选取的填充模式获取所述富媒体的缩放百分比；根据所述富媒体的缩放百分比确定所述富媒体在所述可视区域的位置，将所述富媒体配置在所述可视区域的相应位置中；对所述富媒体配置在所述可视区域后的空白像素进行像素填充。上述Web富媒体跨屏适配方法和装置，使得富媒体在浏览器的可视区域中展示，能够适配不同屏幕尺寸的设备，不需开发人员再关注屏幕的适配，提高工作效率。

Description

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

技术领域

本发明涉及图像处理领域，特别是涉及一种Web富媒体跨屏适配方法和装置。

背景技术

用户通过网络访问Web页面时，有时Web页面中存在富媒体数据，为了播放富媒体数据，通常在浏览器中安装Flash播放器插件，通过Flash播放器插件播放该富媒体，Flash播放器插件提供了画面比例及全屏功能，通过选择画面比例实现富媒体画面显示比例调整和全屏功能实现富媒体的全屏展示。但是许多设备不支持Flash，而采用HTML5(Hyper TextMarkup Language，超文本标记语言)构建富媒体应用。由于设备的屏幕尺寸分辨率多种多样，目前通过HTML5构建的富媒体应用无法适配各种屏幕尺寸的设备。

发明内容

基于此，有必要针对传统的HTML5构建的富媒体无法适配各种屏幕尺寸的设备的问题，提供一种Web富媒体跨屏适配方法，能适配不同屏幕尺寸的设备，不需开发人员再关注屏幕的适配，提高工作效率。

此外，还有必要提供一种Web富媒体跨屏适配装置，能适配不同屏幕尺寸的设备，不需开发人员再关注屏幕的适配，提高工作效率。

一种Web富媒体跨屏适配方法，包括：

通过浏览器的HTML中插入的函数代码直接执行以下步骤：

获取浏览器的可视区域的宽和高；

获取富媒体的宽和高；

获取选取的填充模式；

根据所述可视区域的宽和高、富媒体的宽和高以及选取的填充模式获取所述富媒体的缩放百分比；

根据所述富媒体的缩放百分比确定所述富媒体在所述可视区域的位置，将所述富媒体配置在所述可视区域的相应位置中；

对所述富媒体配置在所述可视区域后的空白像素进行像素填充。

一种Web富媒体跨屏适配装置，包括：

第一获取模块，用于获取浏览器的可视区域的宽和高；

第二获取模块，用于获取富媒体的宽和高；

第三获取模块，用于通过浏览器的HTML中插入的函数代码直接获取选取的填充模式；

处理模块，用于通过浏览器的HTML中插入的函数代码直接根据所述可视区域的宽和高、富媒体的宽和高以及选取的填充模式获取所述富媒体的缩放百分比；

配置模块，用于通过浏览器的HTML中插入的函数代码直接根据所述富媒体的缩放百分比确定所述富媒体在所述可视区域的位置，将所述富媒体配置在所述可视区域的相应位置中；

像素填充模块，用于通过浏览器的HTML中插入的函数代码直接对所述富媒体配置在所述可视区域后的空白像素进行像素填充。

上述Web富媒体跨屏适配方法和装置，通过获取浏览器的可视区域的宽和高、富媒体的宽和高以及填充模式，并得到富媒体的缩放百分比，根据富媒体缩放百分比确定富媒体在可视区域的位置，并对配置富媒体到可视区域后的空白像素进行填充，使得富媒体在浏览器的可视区域中展示，能够适配不同屏幕尺寸的设备，不需开发人员再关注屏幕的适配，提高工作效率；且对富媒体进行像素填充，使得产生超分辨率的缩放效果。

附图说明

图1为一个实施例中终端的内部结构示意图；

图2为一个实施例中Web富媒体跨屏适配方法的流程图；

图3为一个实施例中选取填充模式的界面示意图；

图4为图3中选取拉伸填充模式的示意图；

图5为一个实施例中选取适应模式的效果示意图；

图6为一个实施例中拉伸模式的效果示意图；

图7A为原始图像再浏览器中的示意图；

图7B为全屏适配后，光标移入出现全屏按钮；

图7C为全屏展示的效果示意图；

图8为一个实施例中Flappy Bird富媒体在fill模式下适配不同屏幕尺寸的结果示意图；

图9为一个实施例中Flappy Bird富媒体在fit模式下适配不同屏幕尺寸的结果示意图；

图10为一个实施例中Web富媒体跨屏适配装置的结构框图。

具体实施方式

为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。

可以理解，本发明所使用的术语“第一”、“第二”等可在本文中用于描述各种元件，但这些元件不受这些术语限制。这些术语仅用于将第一个元件与另一个元件区分。举例来说，在不脱离本发明的范围的情况下，可以将第一客户端称为第二客户端，且类似地，可将第二客户端称为第一客户端。第一客户端和第二客户端两者都是客户端，但其不是同一客户端。

图1为一个实施例中终端的内部结构示意图。如图1所示，该终端包括通过系统总线连接的处理器、非易失性存储介质、内存、网络接口、显示屏和输入装置。其中，终端的非易失性存储介质存储有操作系统，还包括一种Web富媒体跨屏适配装置。该处理器用于提供计算和控制能力，支撑整个终端的运行，被用于执行Web富媒体跨屏视频方法的流程步骤。终端中的网络接口用于与服务器进行网络通信，如发送富媒体数据至服务器，接收服务器返回的富媒体数据等。终端的显示屏可以是液晶显示屏或者电子墨水显示屏等，输入装置可以是显示屏上覆盖的触摸层，也可以是终端外壳上设置的按键、轨迹球或触控板，也可以是外接的键盘、触控板或鼠标等。该终端可以是内置浏览器或Webview的计算机、手机、电视机、个人数字助理、手表或穿戴式设备等。本领域技术人员可以理解，图1中示出的结构，仅仅是与本申请方案相关的部分结构的框图，并不构成对本申请方案所应用于其上的终端的限定，具体的终端可以包括比图中所示更多或更少的部件，或者组合某些部件，或者具有不同的部件布置。

图2为一个实施例中Web富媒体跨屏适配方法的流程图。如图2所示，一种Web富媒体跨屏适配方法，包括以下步骤：

步骤202，获取浏览器的可视区域的宽和高。

本实施例中，通过浏览器的HTML中的函数代码window.innerWidth和window.innerHeight直接获取浏览器的可视区域的宽和高。

步骤204，获取富媒体的宽和高。

本实施例中，通过浏览器的HTML中的函数代码canvas.width和canvas.height直接获取富媒体的宽和高。富媒体是指canvas/webgl写的应用程序或游戏等，不限于此。

步骤206，获取选取的填充模式。

本实施例中，通过浏览器的HTML中的函数代码直接获取选取的填充模式。alloyscreen提供了四种填充模式用于展示比例调节，并提供了restore还原初始状态。填充模式可包括fit适应、fill填充、拉伸(stretch)、居中(center)。

其中，fit适应方式是指显示比例不变，左右撑满或上下撑满，无图像信息丢失，一般情况下会出现左右黑边或上下黑边。

fill填充模式是指显示比例不变，撑满可视区域，以丢失部分图像的成本，保证不发生变形。

拉伸方式是指宽高撑满可视区域，一般情况下会发生变形。

center居中方式是指显示比例不便，宽高不变，在可视区域居中显示。

可视区域可为终端的整个屏幕或部分屏幕等。

为了实现fit适应方式可在Web程序的HTML中插入对应的代码，如代码如下：

其中，#ourCanvas为id(标识)是ourCanvas的canvas，需要添加fit效果的canvas。canvas是图形容器。

同理为了实现其他的填充模式，可将上述代码中fit()代替为对应的填充模式。

图3为一个实施例中选取填充模式的界面示意图。如图3所示，在菜单界面中可选择分辨率、填充模式、全屏、音效大小调节、音乐音量大小调节等。填充模式以下拉框的方式显示有fit适应、fill填充、拉伸、居中。

图4为图3中选取拉伸填充模式的示意图。如图4所示，分辨率为1366*768，填充模式为拉伸。

步骤208，根据该可视区域的宽和高、富媒体的宽和高以及选取的填充模式获取该富媒体的缩放百分比。

通过浏览器的HTML中插入的函数代码直接根据可视区域的宽和高、富媒体的宽和高以及选取的填充模式获取该富媒体的缩放百分比。

步骤210，根据该富媒体的缩放百分比确定该富媒体在该可视区域的位置，将该富媒体配置在该可视区域的相应位置中。

本实施例中，通过浏览器的HTML中插入的函数代码直接使用this.canvas.getBoundingClientRect()确定富媒体在CSS(Cascading Style Sheets，层叠样式表)中的位置。使用CSS Position Fixed固定富媒体在CSS中的位置。

步骤212，对该富媒体配置在该可视区域后的空白像素进行像素填充。

本实施例中，通过浏览器的HTML中插入的函数代码直接对富媒体配置在可视区域后的空白像素采用插值法进行像素填充。

图像插值就是利用已知邻近像素点的灰度值或RGB图像中的三色值来产生未知像素点的灰度值，以便由原始图像再生出具有更高分辨率的图像。

该插值法可包括最近邻元插值法(nearest neighbor interpolation)、双线性内插法(bilinear interpolation)、三次卷积内插法(cubic convolution interpolation)。

其中，最近邻元插值法：对于通过反向变换得到的一个浮点坐标，对其进行简单的取整，得到一个整数型坐标，这个整数型坐标对应的像素值就是目的像素的像素值，也就是说，取浮点坐标最邻近的左上角点(对于DIB是右上角，因为它的扫描行是逆序存储的)对应的像素值。可见，最邻近插值简单且直观。

双线性内插值：对于一个目的像素，设置坐标通过反向变换得到的浮点坐标为(i+u,j+v)，其中i、j均为非负整数，u、v为[0,1)区间的浮点数，则这个像素得值f(i+u,j+v)可由原图像中坐标为(i,j)、(i+1,j)、(i,j+1)、(i+1,j+1)所对应的周围四个像素的值决定，即：

f(i+u,j+v)＝(1-u)(1-v)f(i,j)+(1-u)vf(i,j+1)+u(1-v)f(i+1,j)+uvf(i+1,j+1)其中，f(i,j)表示源图像(i,j)处的的像素值，以此类推。

双线性内插值法计算量大，但缩放后图像质量高，不会出现像素值不连续的的情况。由于双线性插值具有低通滤波器的性质，使高频分量受损，所以可能会使图像轮廓在一定程度上变得模糊。

三次卷积法的计算精度高，其考虑一个浮点坐标(i+u,j+v)周围的16个邻点，目的像素值f(i+u,j+v)可由如下插值公式得到：f(i+u,j+v)＝[A]*[B]*[C]

[A]＝[S(u+1)S(u+0)S(u-1)S(u-2)]

S(x)是对Sin(x*Pi)/x的逼近(Pi是圆周率——π)。

上述Web富媒体跨屏适配方法，通过获取浏览器的可视区域的宽和高、富媒体的宽和高以及填充模式，并得到富媒体的缩放百分比，根据富媒体缩放百分比确定富媒体在可视区域的位置，并对配置富媒体到可视区域后的空白像素进行填充，使得富媒体在浏览器的可视区域中展示，能够适配不同屏幕尺寸的设备，不需开发人员再关注屏幕的适配，提高工作效率；且对富媒体进行像素填充，使得产生超分辨率的缩放效果。

在一个实施例中，根据该可视区域的宽和高、富媒体的宽和高以及选取的填充模式获取该富媒体的缩放百分比包括：

若选取的填充模式为fit适应，获取该富媒体宽高比与该可视区域的宽高比的比值，当该比值大于1，则该富媒体的宽度百分比为100％，该富媒体的高度百分比为该可视区域的宽高比与该富媒体的高宽比乘积的百分比，该富媒体的高度方向上的顶部距该可视区域的高度方向上的顶部的百分比为100％减去该富媒体的高度百分比后再除以2，该富媒体的宽度方向上的第一侧距该可视区域的宽度方向上的第一侧的百分比为0；

当该比值小于或等于1，则该富媒体的高度百分比为100％，该富媒体的宽度百分比为该可视区域的高宽比与该富媒体的宽高比乘积的百分比，该富媒体的高度方向上的顶部距该可视区域的高度方向上的顶部的百分比为0，该富媒体的宽度方向上的第一侧距该可视区域的宽度方向上的第一侧的百分比为100％减去该富媒体的宽度百分比后再除以2。

图5为一个实施例中选取适应模式的效果示意图。如图5所示，填充模式为适应模式，则显示比例不变，富媒体的宽高比与可视区域的宽高比的比值大于1，富媒体的宽度百分比为100％，即撑满左右；富媒体的高度百分比为该可视区域的宽高比与该富媒体的高宽比乘积的百分比。该富媒体的高度方向上的顶部距该可视区域的高度方向上的顶部的百分比为100％减去该富媒体的高度百分比后再除以2，也就是上下出现黑色区域。

若选取的填充模式为fill填充，则获取该富媒体宽高比与该可视区域的宽高比的比值，当该比值大于1，则该富媒体的高度百分比为100％，该富媒体的宽度百分比为该可视区域的高宽比与该富媒体的宽高比乘积的百分比，该富媒体的高度方向上的顶部距该可视区域的高度方向上的顶部的百分比为0，该富媒体的宽度方向上的第一侧距该可视区域的宽度方向上的第一侧的百分比为100％减去该富媒体的宽度百分比后再除以2；

当该比值小于或等于1，则该富媒体的宽度百分比为100％，该富媒体的高度百分比为该可视区域的宽高比与该富媒体的高宽比乘积的百分比，该富媒体的高度方向上的顶部距该可视区域的高度方向上的顶部的百分比为100％减去该富媒体的高度百分比后再除以2，该富媒体的宽度方向上的第一侧距该可视区域的宽度方向上的第一侧的百分比为0。

若选取的填充模式为拉伸，则该富媒体的宽度百分比为100％，该富媒体的高度百分比为100％，该富媒体的高度方向上的顶部距该可视区域的高度方向上的顶部的百分比为0，该富媒体的宽度方向上的第一侧距该可视区域的宽度方向上的第一侧的百分比为0。

图6为一个实施例中拉伸模式的效果示意图。如图6所示，富媒体的图像被拉伸后，图像发生了变形。

若选取的填充模式为居中，则该富媒体的宽度为该富媒体的原始宽度，该富媒体的高度为该富媒体的原始高度，该富媒体的高度方向上的顶部距该可视区域的高度方向上的顶部为该可视区域的高度与该富媒体的高度的差的一半，该富媒体的宽度方向上的第一侧与该可视区域的宽度方向上的第一侧的距离为该可视区域的宽度与该富媒体的宽度的差的一半。

上述各填充模式计算富媒体的缩放百分比的代码可如下，其中，width和height分别是可视区域的宽和高，canvasWidth和canvasHeight分别是指富媒体的宽和高；rate为(this.canvasWidth/this.canvasHeight)/(this.width/this.height)的值。

其中，“/”表示除法运算，“*”表示乘法运算。

在一个实施例中，上述Web富媒体跨屏适配方法还包括：提供全屏组件，并将全屏组件展示在富媒体上；获取对该全屏组件的触发操作，将富媒体进行全屏展示或退回到原始状态。全屏模式的实现可采用如下代码实现：

在Web程序的HTML中插入上述代码，其中，#ourCanvas为id是ourCanvas的canvas，需要添加全屏效果的canvas，其中的center代表填充模式，即显示比例不变，宽高不变，居中显示。

全屏是指载体(设备的浏览器或应用程序里的webview)内部全屏。当浏览器或webview等是全屏时，富媒体也是全屏；当浏览器或webview等是分屏时，富媒体处于分屏。不论载体是全屏还是分屏都可采用上述Web富媒体跨屏适配方法对富媒体进行处理。

在一个实施例中，上述Web富媒体跨屏视频方法还包括：获取交互行为发生点的真实坐标位置。

交互行为发生点是指用户触摸或点击或其他交互行为产生的位置。

具体地，若富媒体canvas被各种css width和height属性放大或缩小，交互行为发生点相对于左上角的实际坐标重新计算。若富媒体canvas有top boder或者left boder，交互行为发生点相对于左上角的实际坐标要减去boder的宽度。若boxsizing(盒子模型类型)为boder-box，交互行为发生点相对于左上角的实际坐标重新计算。

具体如下：

其中，先获取富媒体的样式信息，boxsizing盒子模型类型，borderTopWidth为上部分边框宽度，borderLeftWidth为左部分边框宽度，width为变形后宽度，height为变形后高度，pageX，pageY为交互行为发生点的坐标位置，this.offset[0]和this.offset[1]为富媒体左上角坐标在文档中的偏移量。

使用pageX-this.offset[0]-borderLeftWidth得到x坐标，使用pageY-this.offset[1]-borderTopWidth得到y坐标。若盒子模型类型为边框盒，则canvasWidth为富媒体变形后的真实宽度，等于width减去borderLeftWidth得到，canvasHeight为富媒体变形后的真实高度，等于height减去borderTopWidth得到。this.width为富媒体的真实宽度，this.height为富媒体的真实高度。

富媒体的真实宽度与富媒体变形后的真实宽度比值再乘以x坐标得到真实的坐标x，富媒体的真实高度与富媒体变形后的真实高度比值再乘以y坐标得到真实的坐标y。

图7A为原始图像在浏览器中的示意图；图7B为全屏适配后，光标移入出现全屏按钮；图7C为全屏展示的效果示意图。如图7A所示，图像占浏览器的可视区域的一部分；如图7B所示，光标移入后在图像的右上角出现了全屏按钮；如图7C所示，点击全屏按钮后，图像进行全屏展示，图像的填充方式为居中，则图像位于可视区域中间，其他采用黑色填充。

图8为一个实施例中Flappy Bird富媒体在fill模式下适配不同屏幕尺寸的结果示意图。如图8所示，第一尺寸、第二尺寸、第三尺寸和第四尺寸，且第一尺寸、第二尺寸、第三尺寸和第四尺寸逐渐减小。Flappy Bird富媒体在fill模式下将第一尺寸、第二尺寸、第三尺寸和第四尺寸屏幕均填满。

图9为一个实施例中Flappy Bird富媒体在fit模式下适配不同屏幕尺寸的结果示意图。如图9所示，第一尺寸、第二尺寸、第三尺寸和第四尺寸，且第一尺寸、第二尺寸、第三尺寸和第四尺寸逐渐减小。Flappy Bird富媒体在fit模式下将第二尺寸、第三尺寸和第四尺寸屏幕均填满，在第一尺寸屏幕上将上下撑满，左右黑边。

此外，center上尺寸比例不变居中stretch是拉伸填满屏幕。

需要说明的是，上述Web富媒体跨屏适配方法，可适用于canvas/webgl或者Dom里内嵌的canvas/webgl的个人计算机或移动终端的网站或者HTML5动感创意网站或个人计算机或移动终端HTML5游戏应用等的适配，甚至适用于任意图片及HTML5SVG(ScalableVector Graphics，可缩放矢量图形)和HTML5Video的展示和播放，让开发人员不再关注屏幕的适配，专注于视觉的还原、交互和业务逻辑的实现，大大提高了工作效率。

相比于Flash，Flash是以插件形式存在浏览器中，且仅限于视频播放，且与某些设备的软件系统兼容性差。上述Web富媒体跨屏适配方法采用浏览器的HTML中插入函数代码直接实现，适用包含HTML5的复杂应用和游戏的适配和全屏，甚至适用于任意图片及HTML5SVG和HTML5Video的展示和播放。

图10为一个实施例中Web富媒体跨屏适配装置的结构框图。如图10所示，一种Web富媒体跨屏适配装置，包括第一获取模块1002、第二获取模块1004、第三获取模块1006、处理模块1008、配置模块1010和像素填充模块1012。其中：

第一获取模块1002用于通过浏览器的HTML中插入的函数代码直接获取浏览器的可视区域的宽和高；

第二获取模块1004用于通过浏览器的HTML中插入的函数代码直接获取富媒体的宽和高；

第三获取模块1006用于通过浏览器的HTML中插入的函数代码直接获取选取的填充模式；

处理模块1008用于通过浏览器的HTML中插入的函数代码直接根据该可视区域的宽和高、富媒体的宽和高以及选取的填充模式获取该富媒体的缩放百分比；

配置模块1010用于通过浏览器的HTML中插入的函数代码直接根据该富媒体的缩放百分比确定该富媒体在该可视区域的位置，将该富媒体配置在该可视区域的相应位置中；

像素填充模块1012用于通过浏览器的HTML中插入的函数代码直接对该富媒体配置在该可视区域后的空白像素进行像素填充。

本实施例中，该像素填充模块1012还用于对该富媒体配置在该可视区域后的空白像素采用插值法进行像素填充。

上述Web富媒体跨屏适配装置，通过获取浏览器的可视区域的宽和高、富媒体的宽和高以及填充模式，并得到富媒体的缩放百分比，根据富媒体缩放百分比确定富媒体在可视区域的位置，并对配置富媒体到可视区域后的空白像素进行填充，使得富媒体在浏览器的可视区域中展示，能够适配不同屏幕尺寸的设备，不需开发人员再关注屏幕的适配，提高工作效率；且对富媒体进行像素填充，使得产生超分辨率的缩放效果。

在一个实施例中，该处理模块1008还用于若选取的填充模式为fit适应，获取该富媒体宽高比与该可视区域的宽高比的比值，当该比值大于1，则该富媒体的宽度百分比为100％，该富媒体的高度百分比为该可视区域的宽高比与该富媒体的高宽比乘积的百分比，该富媒体的高度方向上的顶部距该可视区域的高度方向上的顶部的百分比为100％减去该富媒体的高度百分比后再除以2，该富媒体的宽度方向上的第一侧距该可视区域的宽度方向上的第一侧的百分比为0；

当该比值小于或等于1，则该富媒体的高度百分比为100％，该富媒体的宽度百分比为该可视区域的高宽比与该富媒体的宽高比乘积的百分比，该富媒体的高度方向上的顶部距该可视区域的高度方向上的顶部的百分比为0，该富媒体的宽度方向上的第一侧距该可视区域的宽度方向上的第一侧的百分比为100％减去该富媒体的宽度百分比后再除以2；

以及该处理模块1008还用于若选取的填充模式为fill填充，则获取该富媒体宽高比与该可视区域的宽高比的比值，当该比值大于1，则该富媒体的高度百分比为100％，该富媒体的宽度百分比为该可视区域的高宽比与该富媒体的宽高比乘积的百分比，该富媒体的高度方向上的顶部距该可视区域的高度方向上的顶部的百分比为0，该富媒体的宽度方向上的第一侧距该可视区域的宽度方向上的第一侧的百分比为100％减去该富媒体的宽度百分比后再除以2；

当该比值小于或等于1，则该富媒体的宽度百分比为100％，该富媒体的高度百分比为该可视区域的宽高比与该富媒体的高宽比乘积的百分比，该富媒体的高度方向上的顶部距该可视区域的高度方向上的顶部的百分比为100％减去该富媒体的高度百分比后再除以2，该富媒体的宽度方向上的第一侧距该可视区域的宽度方向上的第一侧的百分比为0。

该处理模块1008还用于若选取的填充模式为拉伸，则该富媒体的宽度百分比为100％，该富媒体的高度百分比为100％，该富媒体的高度方向上的顶部距该可视区域的高度方向上的顶部的百分比为0，该富媒体的宽度方向上的第一侧距该可视区域的宽度方向上的第一侧的百分比为0；以及

该处理模块1008还用于若选取的填充模式为居中，则该富媒体的宽度为该富媒体的原始宽度，该富媒体的高度为该富媒体的原始高度，该富媒体的高度方向上的顶部距该可视区域的高度方向上的顶部为该可视区域的高度与该富媒体的高度的差的一半，该富媒体的宽度方向上的第一侧与该可视区域的宽度方向上的第一侧的距离为该可视区域的宽度与该富媒体的宽度的差的一半。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的程序可存储于一非易失性计算机可读取存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。其中，所述的非易失性存储介质可为磁碟、光盘、只读存储记忆体(Read-Only Memory，ROM)等。

以上所述实施例仅表达了本发明的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对本发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本发明构思的前提下，还可以做出若干变形和改进，这些都属于本发明的保护范围。因此，本发明专利的保护范围应以所附权利要求为准。

Claims (14)

1.一种Web富媒体跨屏适配方法，包括：

通过浏览器的HTML中插入的函数代码直接执行以下步骤：

通过窗口宽度函数代码和窗口高度函数代码分别获取浏览器的可视区域的宽和高；

通过画布宽度函数代码和画布高度函数代码分别获取富媒体的宽和高；所述富媒体包括用canvas和webgl中一种写的应用程序或游戏；

获取选取的填充模式；

根据所述可视区域的宽和高、富媒体的宽和高以及选取的填充模式获取所述富媒体的缩放百分比；

根据所述富媒体的缩放百分比确定所述富媒体在所述可视区域的位置，将所述富媒体配置在所述可视区域的相应位置中；

对所述富媒体配置在所述可视区域后的空白像素进行像素填充；

当所述富媒体发生交互行为时，获得交互行为发生点的经过重新计算的真实坐标位置。

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所述的方法，其特征在于，所述根据所述可视区域的宽和高、富媒体的宽和高以及选取的填充模式获取所述富媒体的缩放百分比的步骤包括：

若选取的填充模式为拉伸，则所述富媒体的宽度百分比为100％，所述富媒体的高度百分比为100％，所述富媒体的高度方向上的顶部距所述可视区域的高度方向上的顶部的百分比为0，所述富媒体的宽度方向上的第一侧距所述可视区域的宽度方向上的第一侧的百分比为0。

5.根据权利要求1所述的方法，其特征在于，所述根据所述可视区域的宽和高、富媒体的宽和高以及选取的填充模式获取所述富媒体的缩放百分比的步骤包括：

若选取的填充模式为居中，则所述富媒体的宽度为所述富媒体的原始宽度，所述富媒体的高度为所述富媒体的原始高度，所述富媒体的高度方向上的顶部距所述可视区域的高度方向上的顶部为所述可视区域的高度与所述富媒体的高度的差的一半，所述富媒体的宽度方向上的第一侧与所述可视区域的宽度方向上的第一侧的距离为所述可视区域的宽度与所述富媒体的宽度的差的一半。

6.根据权利要求1所述的方法，其特征在于，所述对所述富媒体配置在所述可视区域后的空白像素进行像素填充的步骤包括：

对所述富媒体配置在所述可视区域后的空白像素采用插值法进行像素填充。

7.一种Web富媒体跨屏适配装置，其特征在于，包括：

第一获取模块，用于通过浏览器的HTML中插入的窗口宽度函数代码和窗口高度函数代码直接获取浏览器的可视区域的宽和高；

第二获取模块，用于通过浏览器的HTML中插入的画布宽度函数代码和画布高度函数代码直接获取富媒体的宽和高；所述富媒体包括用canvas和webgl中一种写的应用程序或游戏；

第三获取模块，用于通过浏览器的HTML中插入的函数代码直接获取选取的填充模式；

处理模块，用于通过浏览器的HTML中插入的函数代码直接根据所述可视区域的宽和高、富媒体的宽和高以及选取的填充模式获取所述富媒体的缩放百分比；

配置模块，用于通过浏览器的HTML中插入的函数代码直接根据所述富媒体的缩放百分比确定所述富媒体在所述可视区域的位置，将所述富媒体配置在所述可视区域的相应位置中；

像素填充模块，用于通过浏览器的HTML中插入的函数代码直接对所述富媒体配置在所述可视区域后的空白像素进行像素填充；

所述处理模块还用于当所述富媒体发生交互行为时，获得交互行为发生点的经过重新计算的真实坐标位置。

8.根据权利要求7所述的装置，其特征在于，所述处理模块还用于若选取的填充模式为fit适应，获取所述富媒体宽高比与所述可视区域的宽高比的比值，当所述比值大于1，则所述富媒体的宽度百分比为100％，所述富媒体的高度百分比为所述可视区域的宽高比与所述富媒体的高宽比乘积的百分比，所述富媒体的高度方向上的顶部距所述可视区域的高度方向上的顶部的百分比为100％减去所述富媒体的高度百分比后再除以2，所述富媒体的宽度方向上的第一侧距所述可视区域的宽度方向上的第一侧的百分比为0；

当所述比值小于或等于1，则所述富媒体的高度百分比为100％，所述富媒体的宽度百分比为所述可视区域的高宽比与所述富媒体的宽高比乘积的百分比，所述富媒体的高度方向上的顶部距所述可视区域的高度方向上的顶部的百分比为0，所述富媒体的宽度方向上的第一侧距所述可视区域的宽度方向上的第一侧的百分比为100％减去所述富媒体的宽度百分比后再除以2。

9.根据权利要求7所述的装置，其特征在于，所述处理模块还用于若选取的填充模式为fill填充，则获取所述富媒体宽高比与所述可视区域的宽高比的比值，当所述比值大于1，则所述富媒体的高度百分比为100％，所述富媒体的宽度百分比为所述可视区域的高宽比与所述富媒体的宽高比乘积的百分比，所述富媒体的高度方向上的顶部距所述可视区域的高度方向上的顶部的百分比为0，所述富媒体的宽度方向上的第一侧距所述可视区域的宽度方向上的第一侧的百分比为100％减去所述富媒体的宽度百分比后再除以2；

当所述比值小于或等于1，则所述富媒体的宽度百分比为100％，所述富媒体的高度百分比为所述可视区域的宽高比与所述富媒体的高宽比乘积的百分比，所述富媒体的高度方向上的顶部距所述可视区域的高度方向上的顶部的百分比为100％减去所述富媒体的高度百分比后再除以2，所述富媒体的宽度方向上的第一侧距所述可视区域的宽度方向上的第一侧的百分比为0。

10.根据权利要求7所述的装置，其特征在于，所述处理模块还用于若选取的填充模式为拉伸，则所述富媒体的宽度百分比为100％，所述富媒体的高度百分比为100％，所述富媒体的高度方向上的顶部距所述可视区域的高度方向上的顶部的百分比为0，所述富媒体的宽度方向上的第一侧距所述可视区域的宽度方向上的第一侧的百分比为0。

11.根据权利要求7所述的装置，其特征在于，所述处理模块还用于若选取的填充模式为居中，则所述富媒体的宽度为所述富媒体的原始宽度，所述富媒体的高度为所述富媒体的原始高度，所述富媒体的高度方向上的顶部距所述可视区域的高度方向上的顶部为所述可视区域的高度与所述富媒体的高度的差的一半，所述富媒体的宽度方向上的第一侧与所述可视区域的宽度方向上的第一侧的距离为所述可视区域的宽度与所述富媒体的宽度的差的一半。

12.根据权利要求7所述的装置，其特征在于，所述像素填充模块还用于对所述富媒体配置在所述可视区域后的空白像素采用插值法进行像素填充。

13.一种终端，包括存储器和处理器，所述存储器存储有计算机程序，其特征在于，所述处理器执行所述计算机程序时实现权利要求1至6中任一项所述的方法的步骤。

14.一种非易失性计算机可读存储介质，存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1至6中任一项所述的方法的步骤。

Images