太阳城集团

  • / 9
  • 下载费用:30 金币  

一种定位图片系统及方法.pdf

摘要
申请专利号:

太阳城集团CN201510569947.9

申请日:

2015.09.09

公开号:

CN105094930A

公开日:

2015.11.25

当前法律状态:

实审

有效性:

审中

法律详情: 实质审查的生效IPC(主分类):G06F 9/445申请日:20150909|||公开
IPC分类号: G06F9/445; G06F17/30 主分类号: G06F9/445
申请人: 上海斐讯数据通信技术有限公司
发明人: 唐芬芬
地址: 201616上海市松江区思贤路3666号
优先权:
专利代理机构: 上海硕力知识产权代理事务所31251 代理人: 郭桂峰
PDF完整版下载: PDF下载
法律状态
申请(专利)号:

太阳城集团CN201510569947.9

授权太阳城集团号:

|||

法律状态太阳城集团日:

太阳城集团2015.12.23|||2015.11.25

法律状态类型:

实质审查的生效|||公开

摘要

太阳城集团本发明通过将多幅图片按照一定的合成规则合并在一个合成图片文件中,当太阳城集团网页时,只需加载一张图片文件,便等于加载了此网页所需显示的所有图片。再通过对CSS的属性设置,将此合成图片文件设置为背景图片,通过设置背景图片的边距值使得背景图片进行相对移动,使得网页中图片显示位置能够显示所需的包含在合并图片文件中的对应图片。这种对同一图片文件单次加载,多次使用的应用方式无疑大大降低了网页中较多图片显示时的延时以及图片显示不全现象。

权利要求书

1.一种定位图片系统,其特征在于,包括:
图片合成模块,用于将多幅图片生成一个合成图片文件;
图片定位模块,用于在合成图片中定位所需显示的图片;
图片显示模块,用于显示定位后的图片;
所述图片定位模块加载图片合成模块生成的合成图片文件并定位所需显
示的文件后通过图片显示模块在网页上进行展示。
2.根据权利要求1所述的一种定位图片系统,其特征在于,所述合成模
块包括图片输入模块和图片输出模块,所述图片输出模块用于将图片输入模
块输入的多幅图片按照系统参数输出为一个合成图片文件。
3.根据权利要求2所述的一种定位图片系统,其特征在于,所述系统参
数包括图片尺寸,图片分辨率,图片排布位置及方式。
4.根据权利要求1所述的一种定位图片系统,其特征在于,所述图片定
位模块采用CSS样式进行处理,包括属性定义模块和位置定义模块;所述属
性定义模块用于加载所需的合成图片以及定义图片显示方式;所述位置定义
模块通过设定像素值定义欲显示的图片在合成图片中的位置。
5.根据权利要求4所述的一种定位图片系统,其特征在于,所述图片显
示方式包括平铺、重复。
6.根据权利要求1所述的一种定位图片系统,其特征在于,所述图片显
示模块包括图片对象模块和图片截取模块;所述图片对象模块用于在网页上
显示图片;所述图片截取模块根据网页上的图片对象的尺寸属性,截取对应
尺寸的定位图片并在图片对象中显示。
7.一种定位图片方法,其特征在于:将欲在网页中显示的多个图片文件
按照合成规则合并为一个合成图片文件,通过在网页中需要显示图片的位置
通过定义CSS样式加载合成图片文件并定位合成图片文件中单个图片文件的
位置,实现所需图片在网页中的显示。
8.根据权利要求7所述的一种定位图片方法,其特征在于,通过CSS定
位并显示合成图片文件中单个图片文件的具体步骤为:
S1在网页中需要显示图片的位置建立图片对象并定义一个CSS样式并将
其背景属性值定义为加载合成图片文件;
S2设置背景属性中的合成图片的显示方式为不重复显示;
S3设置背景属性中的边距参数来获取合成图片中单个图片的位置参数;
S4根据网页中图片对象的高度值和宽度值对定位后的单个图片进行截取
并在图片对象中显示。

说明书

一种定位图片系统及方法

技术领域

本发明涉及图片处理技术领域,尤指一种在网页中定位及显示图片的方法。

背景技术

为了使网站丰富多彩,更有表现力,网页中往往需要应用到大量的图片,
但如何处理这些图片,并且使其不影响网页载入和解析是一个不小的问题,这
直接关系到用户体验。

目前的做法是,需要哪张图片就处理哪张图片,在网页上需要显示图片的
区域单独引用并加载某一张或某一组特定图片。此方法在做图片切换时,如果
做了两张不同的图片时,若网络信号或网络速度不佳,后续图片不能及时加载
并显示出来,并且如果图片较大加载需要等待较长的太阳城集团,这样会经常出现图
片丢失,未加载等现象,影响用户太阳城集团网页太阳城集团。

发明内容

本发明为了解决上述技术在网速不佳状态下无法顺畅显示图片的问题,提
供一种利用多幅合成图片提高网页中图片的加载及显示速度,提高用户访
问网页时的流畅度。

为了实现本发明以上发明目的,本发明是通过以下技术方案实现的:

这种定位图片系统,包括:图片合成模块,用于将多幅图片生成一个合成
图片文件;图片定位模块,用于在合成图片中定位所需显示的图片;图片显示
模块,用于显示定位后的图片;所述图片定位模块加载图片合成模块生成的合
成图片文件并定位所需显示的文件后通过图片显示模块在网页上进行展示。

所述合成模块包括图片输入模块和图片输出模块,所述图片输出模块用于
将图片输入模块输入的多幅图片按照系统参数输出为一个合成图片文件。

所述系统参数包括图片尺寸,图片分辨率,图片排布位置及方式。

所述图片定位模块采用CSS样式进行处理,包括属性定义模块和位置定义
模块;所述属性定义模块用于加载所需的合成图片以及定义图片显示方式;所
述位置定义模块通过设定像素值定义欲显示的图片在合成图片中的位置。

所述图片显示方式包括平铺、重复。

所述图片显示模块包括图片对象模块和图片截取模块;所述图片对象模块
用于在网页上显示图片;所述图片截取模块根据网页上的图片对象的尺寸属性,
截取对应尺寸的定位图片并在图片对象中显示。

将欲在网页中显示的多个图片文件按照合成规则合并为一个合成图片文
件,通过在网页中需要显示图片的位置通过定义CSS(层叠样式表)加载合成
图片文件并定位合成图片文件中单个图片文件的位置,实现所需图片在网页中
的显示。

网页中需要显示图片的位置建立图片对象并定义一个CSS样式并将其背
景属性值定义为加载合成图片文件;

设置背景属性中的合成图片的显示方式为不重复显示;

设置背景属性中的边距参数来获取合成图片中单个图片的位置参数;

根据网页中图片对象的高度值和宽度值对定位后的单个图片进行截取并
在图片对象中显示。

本发明通过将多幅图片按照一定的合成规则合并在一个合成图片文件中,
当太阳城集团网页时,只需加载一张图片文件,便等于加载了此网页所需显示的所有
图片。再通过对CSS(层叠样式表)的属性设置,将此合成图片文件设置为背
景图片,通过设置背景图片的边距值使得背景图片进行相对移动,使得网页中
图片显示位置能够显示所需的包含在合并图片文件中的对应图片。这种对同一
图片文件单次加载,多次使用的应用方式无疑大大降低了网页中较多图片显示
时的延时以及图片显示不全现象。

附图说明

下面结合附图和具体实施方式对本发明作进一步详细说明:

图1为定位图片系统的第一实施例示意图;

图2为定位图片方法的第一实施例流程示意图;

图3为定位图片系统的第二实施例示意图;

图4为定位图片系统的第二实施例的通过CSS定位并显示合成图片文件中
单个图片文件的流程示意图;

图5为定位图片系统的第三实施例的合成图片文件示意图;

图中:

1图片合并模块1.1图片输入模块1.2图片输出模块2图片定位模
块2.1属性定义模块2.2位置定义模块3图像显示模块3.1图片对象
模块3.2图片截取模块。

具体实施方式

为了更清楚地说明本发明实施例或现有技术中的技术方案,下面将对实施
例或现有技术描述中所需要使用的附图作简单地介绍,显而易见地,以下说明
和附图对于本发明是示例性的,并且不应被理解为限制本发明。以下说明描述
了众多具体细节以方便对本发明理解。然而,在某些实例中,熟知的或常规的
细节并未说明,以满足说明书简洁的要求。

CSS,全称为CascadingStyleSheets,中文名为层叠样式表,也称作层叠样
式表,是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标
准通用标记语言的一个子集)等文件样式的计算机语言。通过样式表可以定义
如何显示HTML元素,例如字体标签和颜色属性等。样式通常保存在外部
的.css文件中。通过仅仅编辑一个简单的CSS文档,外部样式表能够同时改
变站点中所有页面的布局和外观,只需简单地改变样式,然后网站中的所有元
素均会自动地更新。

CSS样式包括背景、文本、字体、链接、列表、表格和轮廓。CSS的背景
属性允许应用纯色为背景,也允许使用图像作为背景。CSS的文本属性可以改
变文字的颜色、字符间距、对齐文本等。CSS的字体属性可以定义文本所使用
的字体、大小,风格(如斜体)等。

第一实施例

如图1所示的定位图片系统的第一实施例示意图以及如图2所示的定位图
片方法的第一实施例流程示意图,这种定位图片系统,包括:图片合成模块1,
用于将多幅图片生成一个合成图片文件;图片定位模块2,用于在合成图片中
定位所需显示的图片;图片显示模块3,用于显示定位后的图片;所述图片定
位模块加载图片合成模块生成的合成图片文件并定位所需显示的文件后通过
图片显示模块在网页上进行展示。

第二实施例

如图3所示的定位图片系统的第二实施例示意图,图片合成模块1包括图
片输入模块1.1和图片输出模块1.2,图片输出模块1.2用于将图片输入模块1.1
输入的多幅图片按照系统参数输出为一个合成图片文件。

系统参数包括图片尺寸,图片分辨率,图片排布位置及方式。

图片定位模块2采用CSS(层叠样式表),包括属性定义模块2.1和位置
定义模块2.2;所述属性定义模块2.1用于加载所需的合成图片以及定义图片显
示方式;所述位置定义模块2.2通过设定像素值定义欲显示的图片在合成图片
中的位置。

图片显示方式包括平铺、重复。

图片显示模块3包括图片对象模块3.1和图片截取模块3.2;所述图片对象
模块3.1用于在网页上显示图片;所述图片截取模块3.2根据网页上的图片对
象的尺寸属性,截取对应尺寸的定位图片并在图片对象中显示。

如图4所示的定位图片系统的第二实施例的通过CSS定位并显示合成图片
文件中单个图片文件的流程示意图,通过这种定位图片的方法,

S1在网页中需要显示图片的位置建立图片对象并定义一个CSS样式并将
其背景属性值定义为加载合成图片文件;

S2设置背景属性中的合成图片的显示方式为不重复显示;

S3设置背景属性中的边距参数来获取合成图片中单个图片的位置参数;

S4根据网页中图片对象的高度值和宽度值对定位后的单个图片进行截取
并在图片对象中显示;

将欲在网页中显示的多个图片文件按照合成规则合并为一个合成图片文
件,通过在网页中需要显示图片的位置通过定义CSS加载合成图片文件并定位
合成图片文件中单个图片文件的位置,实现所需图片在网页中的显示。

第三实施例

以图5所示定位图片系统的第三实施例的合成图片文件,以两个图片,图
片A与图片B为例,首先将图片A、B均处理为100×100像素大小,然后将
图片A、B由上至下依次排列,形成100×200像素的合成图片文件,合成图片
文件名设为ltlogo.tif并保存备用。此处合成图片文件格式不仅限于GIF格式,
任何可通过图片对象显示的图片格式均可供选择。

通过CSS定位并显示合成图片文件中单个图片文件的具体步骤为:

在网页中需要显示图片的位置建立图片对象并定义一个CSS(层叠样式表)
样式并将其背景属性值定义为之前保存的100×200像素的合成图片文件;具
体的CSS表达式为{background:url("img/ltlogo.tif")no-repeatleft101px;},通过
background的背景属性加载之前保存的合成图片文件ltlogo.tif,no-repeat设置
图片的显示方式为不重复,即按原图片文件格式显示,不做拉伸、平铺等处理;
left101px用于设置背景属性中的左边距参数来获取合成图片中单个图片的位
置参数;若需显示合成图片文件中排列第二的图片,则将左边距设置为101像
素,则可显示从左侧向下第101像素开始显示的图片,左侧1至100像素内的
图片,即排列第一的图片不会显示。

最后,根据网页上图片对象模块3.1的尺寸属性,图像截取模块3.2对定
位后的图片进行截取,使其适合在图片对象模块3.1中显示。

在网页上不同图片对象模块上重复上述方法,通过一次性加载同一个合成
图像文件,并通过CSS进行图片定位,使得各个图片对象模块可以显示所需的
图片。这种单次加载,多次使用的图片加载和使用方式,能够有效地提高网页
中图片显示的流畅度,提高用户体验。

关 键 词:
一种 定位 图片 系统 方法
  专利查询网所有资源均是用户自行上传分享,仅供网友学习交流,未经上传用户书面授权,请勿作他用。
太阳城集团本文
本文标题:一种定位图片系统及方法.pdf
链接地址:http://zh228.com/p-6401742.html
太阳城集团我们 - 网站声明 - 网站地图 - 资源地图 - 友情链接 - 网站客服客服 - 联系我们

copyright@ 2017-2018 zhuanlichaxun.net网站版权所有
经营许可证编号:粤ICP备17046363号-1 
 


收起
展开
葡京赌场|welcome document.write ('');