本发明涉及图像处理技术领域,尤其涉及一种界面图片的占位图的处理方法。

背景技术:

智能电视是基于互联网应用技术的电视产品,具备开放式操作系统与芯片,拥有开放式应用平台,可实现双向人机交互功能,集影音、娱乐、数据等多种功能于一体,以满足用户多样化和个性化需求。

目前,市面上的智能电视机已经全部提供接入网络的能力,用户在进行网络浏览的时候常常需要加载大量的图片,但是由于部分用户的网络带宽不足或者图片较大、较多,导致页面在加载图片的时候会有几秒的等待时间。

现有技术中一般采用设置占位图的方式,将所有图片位置放置统一的占位图。然而,相同颜色的图案多次重复出现,界面显示单调,用户体验不好。

技术实现要素:

本发明提供了一种界面图片的占位图的处理方法,以解决现有技术中智能电视上网的时候,由于网速慢或者图片较多导致在页面加载过程中相同的占位图重复出现,导致界面显示单调的问题。

本发明实施例提供了一种界面图片的占位图的处理方法,包括:

获取页面加载图片的尺寸数据和位置数据;

根据所述尺寸数据和位置数据生成所述页面加载图片的第一占位图;

获取背景颜色参数值,所述背景颜色参数包含色相、饱和度和亮度;

根据所述背景颜色参数值生成所述第一占位图的背景颜色;

将所述第一占位图叠加在所述背景颜色上,生成第二占位图;

将所述第二占位图在所述页面上加载图片的位置进行显示。

进一步的,所述获取页面加载图片的尺寸数据和位置数据具体包括:

检测页面加载图片,提取所述尺寸数据和位置数据。

进一步的,所述根据所述尺寸数据和位置数据生成所述页面加载图片的第一占位图具体包括:

生成与所述页面加载图片尺寸、位置相同的第一占位图。

进一步的,所述方法还包括:

将所述第一占位图的颜色设置为纯白色,透明度设置为10%。

进一步的,所述获取背景颜色参数值,所述背景颜色参数包含色相、饱和度和亮度具体包括:

利用随机函数在0-360之间选取色相值;

利用随机函数在15-30之间选取饱和度值;

利用随机函数在50-70之间选取亮度值。

进一步的,所述根据所述背景颜色参数值生成所述第一占位图的背景颜色具体包括:

根据所述色相值、饱和度值和亮度值生成所述第一占位图的背景颜色,并对所述背景颜色进行去重处理。

进一步的,在将所述第二占位图在所述页面上加载图片的位置进行显示之后,所述方法还包括:

将所述页面加载图片覆盖在所述第二占位图上,从而实现图片加载。

本发明实施例提供的界面图片的占位图的处理方法,获取页面加载图片的尺寸数据和位置数据;根据尺寸数据和位置数据生成页面加载图片的第一占位图;获取背景颜色参数值,背景颜色参数包含色相、饱和度和亮度;根据背景颜色参数值生成第一占位图的背景颜色;将第一占位图叠加在背景颜色上,生成第二占位图;将第二占位图在页面上加载图片的位置进行显示。本发明实施例提供的方法,根据页面加载图片的尺寸和位置,生成不同背景颜色的占位图,避免了相同颜色占位图重复出现的单调,提升了用户体验。

附图说明

图1为本发明实施例提供的界面图片的占位图的处理方法的流程图;

图2为现有技术中的页面加载图片占位图的示意图。

具体实施方式

为了使本发明的目的、技术方案和优点更加清楚,下面将结合附图对本发明作进一步地详细描述,显然,所描述的实施例仅仅是本发明一部份实施例,而不是全部的实施例。基于本发明中的实施例,本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其它实施例,都属于本发明保护的范围。

现有技术中,用户在利用智能电视上网时,由于网速慢或者图片较多,导致在页面加载过程中出现统一、单调的占位图,图2为现有技术中的页面加载图片占位图的示意图,如图2所示,占位图的图案相同,颜色相同,从而影响视觉效果,本发明技术方案针对该问题进行改进。

下面结合图1所示的界面图片的占位图的处理方法流程图,对本发明实施例提供的界面图片的占位图的处理方法进行详细说明。

如图1所示,本发明提供的界面图片的占位图的处理方法主要包括如下步骤:

步骤101,获取页面加载图片的尺寸数据和位置数据。

具体的,检测当前页面中需要加载的图片,提取尺寸数据和位置数据。其中,尺寸数据包括图片的长度、宽度以及面积数据等;位置数据包括该图片在当前页面中的位置坐标等。

获取需要加载的图片的尺寸数据和位置数据的目的是为了确定占位图的尺寸大小和排列位置,占位图的尺寸和位置设定与需要加载的图片的尺寸和位置应该完全相同。

步骤102,根据尺寸数据和位置数据生成页面加载图片的第一占位图。

调用数据库中的占位图,如果调用的占位图的尺寸和页面加载图片的尺寸完全相同,则将调用的占位图作为第一占位图,放置在页面加载图片的位置;如果调用的占位图和页面加载图片的尺寸不同,则将调用的占位图处理成与页面加载图片尺寸相同的第一占位图,放置在页面加载图片的位置,从而实现了占位图和页面加载图片的尺寸、位置完全相同。

步骤103,获取背景颜色参数值,背景颜色参数包含色相、饱和度和亮度。

具体的,利用随机函数在0-360之间选取色相值;在15-30之间选取饱和度值;在50-70之间选取亮度值。

在选取随机函数时,选用rand()和srand()函数。

在一个具体的实施例中,这两个函数的工作过程如下:

1)给srand()提供一个unsigned int类型的种子值,其取值范围从0-65535;

如果未设随机数种子值,rand()在调用时会自动设随机数种子值为1;

2)调用rand(),根据提供给srand()的种子值返回一个随机数(在0到32767之间);

3)根据需要多次调用rand(),从而不间断地得到新的随机数;

4)随时都可以给srand()提供一个新的种子值,从而进一步将rand()的输出结果“随机化”。

其中,rand产生的随机数的范围从0到rand_max,对于产生设定范围的随机数,例如,产生从a到b范围的随机数,因为从a到b共有b-a+1个数,所以要产生从a到b的数,可以写成k=rand()%(b-a+1)+a,从而能够实现产生设定范围的随机数。

在一个具体的实施例中,选用rand()和srand()函数,产生1-100之间的随机数的程序代码如下:

步骤104,根据背景颜色参数值生成第一占位图的背景颜色。

具体的,根据色相值、饱和度值和亮度值生成第一占位图的背景颜色,由于利用随机函数有可能产生重复取值的色相值、饱和度值和亮度值,因此有可能产生相同的背景颜色,导致达不到在页面中显示不同背景颜色占位图的目的,因此为了避免产生重复的背景颜色,可以在步骤103中的随机函数中加入去重处理的语句,具体程序语句如下:

srand((unsigned)time(NULL));//初始化随机数。

步骤105,将第一占位图叠加在背景颜色上,生成第二占位图。

根据不同的背景颜色参数值得到不同的背景颜色时,将第一占位图叠加在不同的背景颜色上,从而得到不同背景颜色的第二占位图。

在一个优选的实施例中,将第一占位图的颜色设置为纯白色,透明度设置为10%。目的是将第一占位图叠加在不同的背景颜色上时,能够显示出不同的背景颜色的占位图,避免了占位图叠加之后完全覆盖背景颜色,导致无法凸显不同颜色的视觉效果。

步骤106,将第二占位图在页面上加载图片的位置进行显示。

将具有不同背景颜色的占位图在加载图片的位置显示,避免了相同图案、相同颜色的占位图的单调,从而呈现出色彩丰富的视觉效果。

在将第二占位图在页面上加载图片的位置进行显示之后,将页面加载图片覆盖在第二占位图上,从而实现图片加载。

本发明实施例提供的界面图片的占位图的处理方法,获取页面加载图片的尺寸数据和位置数据;根据尺寸数据和位置数据生成页面加载图片的第一占位图;获取背景颜色参数值,背景颜色参数包含色相、饱和度和亮度;根据背景颜色参数值生成第一占位图的背景颜色;将第一占位图叠加在背景颜色上,生成第二占位图;将第二占位图在页面上加载图片的位置进行显示。本发明实施例提供的方法,根据页面加载图片的尺寸和位置,生成不同背景颜色的占位图,避免了相同颜色占位图重复出现的单调,提升了用户体验。

专业人员应该还可以进一步意识到,结合本文中所公开的实施例描述的各示例的单元及算法步骤,能够以电子硬件来实现,在上述说明中已经按照功能一般性地描述了各示例的组成及步骤。对每个特定的应用来使用不同方法来实现所描述的功能,但是这种实现不应认为超出本发明实施例的范围。具体地,所述运算和控制部分都可以通络逻辑硬件实现,其可以是使用集成电路工艺制造出来的逻辑集成电路,本实施例对此不作限定。

结合本文中所公开的实施例描述的方法或算法的步骤可以用硬件、处理器执行的软件模块,或者二者的结合来实施。软件模块可以置于随机存储器(RAM)、内存、只读存储器(ROM)、电可编程ROM、电可擦除可编程ROM、寄存器、硬盘、可移动磁盘、CD-ROM、或技术领域内所公知的任意其它形式的存储介质中。

以上所述的具体实施方式,对本发明实施例的目的、技术方案和有益效果进行了进一步详细说明,所应理解的是,以上所述仅为本发明实施例的具体实施方式而已,并不用于限定本发明实施例的保护范围,凡在本发明实施例的精神和原则之内,所做的任何修改、等同替换、改进等,均应包含在本发明实施例的保护范围之内。

html网络图片占位,界面图片的占位图的处理方法与流程相关推荐

  1. html怎么帮图片占位,css 技巧:利用 after 伪对象和 background 属性实现 img 图片标签占位图...

    如图: 图片加载失败了,在浏览器会默认显示一张破图.受各种网速.浏览器等因素影响,我们无法保证图片能够完全加载成功.加载失败时如何更友好的显示是前端要考虑的主要因素. 常见做法都是使用一张默认图代替加 ...

  2. matlab 浮雕,基于MATLAB根据图片快速制作陶瓷浮雕的方法与流程

    本发明属于陶瓷制作技术领域,尤其涉及基于MATLAB根据图片快速制作陶瓷浮雕的方法. 背景技术: 印模成形是传统的陶艺成形工艺之一,它具有制作简便.省时省力.对制作者没有过多的技艺要求的优点,因而直到 ...

  3. html加载占位图片,Skeleton Screen加载占位图(内容出现前显示灰色占位图)的分析与实现...

    今天有几个好友问了这个叫加载占位图的实现方法,我还在此问题下做了个回答. 由于国内对这个的名词是各有各的叫法,所以这里直接用加载占位图来解释. 相信很多人都看到过图中这样的加载方式: 这个图是一个国内 ...

  4. uniapp实现加载图片失败显示占位图

    平常在项目中,我们会经常需要有加载网络图片的功能,但是存在图片地址问题.网络问题等导致图片加载失败,需要展示一个占位图,所以我这里总结了三种办法,仅供大家参考,写的不好大家见谅. 一.导入第三方插件, ...

  5. uniapp页面显示服务器图片,uniapp实现加载图片失败显示占位图

    平常在项目中,我们会经常需要有加载网络图片的功能,但是存在图片地址问题.网络问题等导致图片加载失败,需要展示一个占位图,所以我这里总结了三种办法,仅供大家参考,写的不好大家见谅. 一.导入第三方插件, ...

  6. Android ImageView到底怎么设置圆角图片?背景圆角?控件圆角?图片圆角?占位图圆角?

    前言 在我们实际开发应用的过程中,我想大家或多或少都遇到过需要加载圆角图片的场景,还有一些图片是四周圆角不对称,异性圆角等等情况. 我们可能会去网上或Github上搜索一些RoundImageView ...

  7. html怎么帮图片占位,html图片和css背景图片哪个先开始加载?css占位图怎么操作?...

    如果你的网站是个图片站,首页显示了很多图片.那么你就会有图片多了导致加载比较慢的困扰.这个时候有几个方案解决. 1.物理解决方案:加大网站的带宽+压缩图片大小: 2.用图片懒加载js,图片没加载出来之 ...

  8. html怎么帮图片占位,html占位图img placeholder

    html image placeholder while loading update 2013 11.21 还有两个问题,解决的不是很好. 1.加载的速度太慢,有时候,没看到它加载,通过网络获取的图 ...

  9. html怎么帮图片占位,css+html实现Skeleton Screen 加载占位图动画效果(带动画)

    效果 自上而下渐隐渐现 源码 html,用的angular语法,只要做简单的修改就可以成为你需要的语法 css .skeletonItem { padding: 16px; border-bottom ...

最新文章

  1. (018)java后台开发之语法输出流flush()方法
  2. C++ boost thread学习(二)
  3. [转]十分钟搞定Vue搭建
  4. Kubernetes 系列(三):Kubernetes使用Traefik Ingress暴露服务
  5. 【Java报错】记录一次调用递归方法导致的 StackOverFlowError 及如何重构递归代码避免栈溢出
  6. Java面试必问!Spring事务扩展机制(2)
  7. 蓝桥杯 ADV-146算法提高 计算器
  8. 交换排序图解_10大经典排序算法,20+张图就搞定
  9. java实现续打功能_银行存折套打续打功能 -- 报表如何记录上次打印的位置
  10. APK反编译JAVA源码
  11. 小松鼠短视频完美开源源码
  12. 【GitHub】README.md文件中 markdown语法 插入超链接
  13. MAC系统中安装labelme
  14. i5 6500 HD530 台式机黑苹果记录
  15. Wireshark入门-Wireshark
  16. 基于递归回溯算法实现八皇后游戏问题
  17. 用vmware安装redhat 9出现“光盘无法被挂载”错误的解决办法
  18. C++ decltype类型提示符总结
  19. 啃书:《利用python进行数据分析》第六章——数据加载(三)
  20. 微服务框架之微软Service Fabric

热门文章

  1. Innodb页合并和页分裂
  2. 千锋教育实训day01———Java
  3. BundleTrack
  4. 通知、通告、通报、公告、告示的区别和用法
  5. #每日一句英语0313#
  6. HTML标签大全,存起来总有一天用的上
  7. PEI-BD 聚醚酰亚胺-双马来酰亚胺/mPEG-PCL-g-PEI 聚乙二醇-聚己内酯-聚乙烯亚胺
  8. windows系统安装jdk11
  9. Clickhouse分享
  10. PointNeXt: Revisiting PointNet++ with Improved Training and Scaling Strategies