一种网页中的图片的适配方法和装置的制造方法_2

文档序号:9326979阅读:来源:国知局
例的一种网页中的图片的适配装置的示意图。
【具体实施方式】
[0046] 下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了本公开 的示例性实施例,然而应当理解,可以以各种形式实现本公开而不应被这里阐述的实施例 所限制。相反,提供这些实施例是为了能够更透彻地理解本公开,并且能够将本公开的范围 完整的传达给本领域的技术人员。
[0047] 图1示出了根据本发明一个实施例的一种网页中的图片的适配方法的流程图。如 图1所示,该方法包括:
[0048] 步骤S110,接收终端设备上的浏览器发送的获取指定网页的请求。
[0049] 步骤S120,获取用于将指定网页中的原图片与终端设备的显示参数进行适配处理 的代码包。
[0050] 步骤S130,将该代码包返回给终端设备上的浏览器;这使得终端设备上浏览器执 行该代码包将指定网页中的原图片与终端设备的显示参数进行适配处理,并渲染加载包含 经该代码包处理后的图片的指定网页。
[0051] 可见,图1所示的方法响应于终端设备对网页的请求,将用于将网页中的原图片 与终端设备的显示参数进行适配处理的代码包返回给终端设备,由终端设备上的浏览器通 过执行该代码包对网页中的原图片进行适配处理,然后再渲染加载处理后的网页,使得终 端设备上的浏览器在加载网页时,网页中的图片在保证图片信息完整不失真的前提下适配 于当前终端设备而显示,符合用户的浏览需求,大幅提升用户体验。
[0052] 在本发明的一个实施例中,图1所示的方法进一步包括:生成用于获取终端的显 示参数,以及将网页中的原图片与终端设备的显示参数进行适配处理得到处理后的图片的 处理代码,并保存该处理代码;获取并保存各个网页中的原图的图片参数。
[0053] 则图1所示方法的步骤S120,获取用于将指定网页中的原图片与终端设备的显示 参数进行适配处理的代码包的过程可以是:将所述处理代码,以及所述指定网页中的原图 片的图片参数打包为一个代码包;也可以是:将所述处理代码,以及所述指定网页所属网 站的包括所述指定网页在内的所有或部分网页中的原图片的图片参数打包为一个代码包。
[0054] 上述各实施例中,所述代码包在执行时执行如下步骤:步骤S140,获取终端设备 的显示参数,以及获取指定页面中的原图片的图片参数。步骤S150,依据终端设备的显示参 数和指定页面中的原图片的图片参数,将指定页面中的原图片处理为与终端设备的显示参 数适配的图片。
[0055] 具体地,上述步骤S140获取终端设备的显示参数,以及获取指定页面中的原图片 的图片参数包括:获取终端设备的HTML宽度,以及获取指定页面中的原图片的宽度值和字 体大小值。
[0056] 具体地,上述步骤S150依据终端设备的显示参数和指定页面中的原图片的图片 参数,将指定页面中的原图片处理为与终端设备的显示参数适配的图片包括:
[0057] 步骤S151,依据终端设备的HTML宽度与原图片宽度的比值与终端设备侧字体大 小值与原图片字体大小值的比值相等的条件,获得终端设备侧字体大小值。
[0058] 步骤S152,设置终端设备侧表示高度的单位值等于所获得的终端设备侧字体大小 值。
[0059] 步骤S153,依据原图片中的指定元素在原图片中的宽度比例,获得该指定元素在 终端设备上显示时的宽度值,以及根据终端设备侧表示高度的单位值确定该指定元素在终 端设备上显示的高度值。
[0060] 例如,响应于终端设备上的浏览器对指定网页的请求,获取用于将指定网页中的 原图片与终端设备的显示参数进行适配处理的代码包,将该代码包返回给终端设备上的浏 览器,使得终端设备上的浏览器执行该代码包,该代码包的执行过程包括:
[0061] 获取到终端设备的HTML宽度Wl = 320px,指定页面中的原图片的宽度值WO = 640px,指定页面中的原图片的字体大小值FontSizeO = 24px ;设终端设备侧字体大小值 为FontSizel,根据
,得到FontSizel = 12px ;其中,需要说明的是, FontSize是CSS的表征字体大小的属性,实际上FontSize表征的是字体中字符框的高度。 因此,上文中得到的的终端设备侧字体大小实际上能够反映终端设备侧的高度,则在本例 中,根据FontSizel = 12px,设置终端设备侧表示高度的单位值Irem = 12px。假设原图 中的一个指定元素在原图片中的宽度比例为40 %,且该指定元素在原图片中的高度等于3 个FontSize,则该指定元素在终端设备上显示时的宽度值为Wl X40% = 128px,高度值为 3rem = 36px〇
[0062] 在执行完上述过程后,终端设备上的浏览器渲染加载包含上述经该代码包处理后 的图片的指定网页,使得指定网页中的图片适配于终端设备而显示。
[0063] 图2示出了根据本发明一个实施例的一种网页中的图片的适配装置的示意图,如 图2所示,该网页中的图片的适配装置200包括:
[0064] 接收单元210,适于接收终端设备上的浏览器发送的获取指定网页的请求。
[0065] 代码包获取单元220,适于获取用于将指定网页中的原图片与终端设备的显示参 数进行适配处理的代码包。
[0066] 返回单元230,适于将所述代码包返回给终端设备上的浏览器;这使得终端设备 上浏览器执行所述代码包将指定网页中的原图片与所述终端设备的显示参数进行适配处 理,并渲染加载包含经所述代码包处理后的图片的指定网页。
[0067] 可见,图2所示的装置通过各单元的相互配合,响应于终端设备对网页的请求,将 用于将网页中的原图片与终端设备的显示参数进行适配处理的代码包返回给终端设备,由 终端设备上的浏览器通过执行该代码包对网页中的原图片进行适配处理,然后再渲染加载 处理后的网页,使得终端设备上的浏览器在加载网页时,网页中的图片在保证图片信息完 整不失真的前提下适配于当前终端设备而显示,符合用户的浏览需求,大幅提升用户体验。
[0068] 图3示出了根据本发明另一个实施例的一种网页中的图片的适配装置示意图,如 图3所示,该网页中的图片的适配装置300包括:接收单元310、代码生成单元320、参数获 取单元330、代码包获取单元340和返回单元350。
[0069] 其中,接收单元310、代码包获取单元340和返回单元350与图2所示的接收单元 210、代码包获取单元220和返回单元230的功能对应相同,在此不再赘述。
[0070] 代码生成单元320,适于生成用于获取终端的显示参数,以及将网页中的原图片与 终端设备的显示参数进行适配处理得到处理后的图片的处理代码,并保存该处理代码。
[0071] 参数获取单元330,适于获取并保存各个网页中的原图的图片参数。
[0072] 并且,在图3所示的实施例中,代码包获取单元340获取用于将指定网页中的原图 片与终端设备的显示参数进行适配处理的代码包的过程具体为:将所述处理代码,以及所 述指定网页中的原图片的图片参数打包为一个代码包;或者,将所述处理代码,以及所述指 定网页所属网站的包括所述指定网页在内的所有或部分网页中的原图片的图片参数打包 为一个代码包。
[0073] 在上述各实施例中,图2-图3所示装置的代码包获取单元220/340获取的所述代 码包在执行时执行如
当前第2页1 2 3 4 
网友询问留言 已有0条留言
  • 还没有人留言评论。精彩留言会获得点赞!
1