CN107197353A - 界面图片的占位图的处理方法 - Google Patents

界面图片的占位图的处理方法 Download PDF

Info

Publication number
CN107197353A
CN107197353A CN201710374263.2A CN201710374263A CN107197353A CN 107197353 A CN107197353 A CN 107197353A CN 201710374263 A CN201710374263 A CN 201710374263A CN 107197353 A CN107197353 A CN 107197353A
Authority
CN
China
Prior art keywords
occupy
place
background color
page
processing method
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN201710374263.2A
Other languages
English (en)
Inventor
边祥国
刘斌
付强
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Universal Wisdom Technology Beijing Co Ltd
Original Assignee
Universal Wisdom Technology Beijing Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Universal Wisdom Technology Beijing Co Ltd filed Critical Universal Wisdom Technology Beijing Co Ltd
Priority to CN201710374263.2A priority Critical patent/CN107197353A/zh
Publication of CN107197353A publication Critical patent/CN107197353A/zh
Pending legal-status Critical Current

Links

Classifications

    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/40—Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
    • H04N21/43—Processing of content or additional data, e.g. demultiplexing additional data from a digital video stream; Elementary client operations, e.g. monitoring of home network or synchronising decoder's clock; Client middleware
    • H04N21/431—Generation of visual interfaces for content selection or interaction; Content or additional data rendering
    • H04N21/4312—Generation of visual interfaces for content selection or interaction; Content or additional data rendering involving specific graphical features, e.g. screen layout, special fonts or colors, blinking icons, highlights or animations
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/40—Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
    • H04N21/47—End-user applications
    • H04N21/485—End-user interface for client configuration
    • H04N21/4854—End-user interface for client configuration for modifying image parameters, e.g. image brightness, contrast
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
    • H04N21/60—Network structure or processes for video distribution between server and client or between remote clients; Control signalling between clients, server and network components; Transmission of management data between server and client, e.g. sending from server to client commands for recording incoming content stream; Communication details between server and client 
    • H04N21/61—Network physical structure; Signal processing
    • H04N21/6156—Network physical structure; Signal processing specially adapted to the upstream path of the transmission network
    • H04N21/6175—Network physical structure; Signal processing specially adapted to the upstream path of the transmission network involving transmission via Internet

Landscapes

  • Engineering & Computer Science (AREA)
  • Multimedia (AREA)
  • Signal Processing (AREA)
  • Human Computer Interaction (AREA)
  • Processing Or Creating Images (AREA)

Abstract

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

Description

界面图片的占位图的处理方法
技术领域
本发明涉及图像处理技术领域，尤其涉及一种界面图片的占位图的处理方法。
背景技术
智能电视是基于互联网应用技术的电视产品，具备开放式操作系统与芯片，拥有开放式应用平台，可实现双向人机交互功能，集影音、娱乐、数据等多种功能于一体，以满足用户多样化和个性化需求。
目前,市面上的智能电视机已经全部提供接入网络的能力，用户在进行网络浏览的时候常常需要加载大量的图片，但是由于部分用户的网络带宽不足或者图片较大、较多，导致页面在加载图片的时候会有几秒的等待时间。
现有技术中一般采用设置占位图的方式,将所有图片位置放置统一的占位图。然而,相同颜色的图案多次重复出现,界面显示单调,用户体验不好。
发明内容
本发明提供了一种界面图片的占位图的处理方法，以解决现有技术中智能电视上网的时候，由于网速慢或者图片较多导致在页面加载过程中相同的占位图重复出现，导致界面显示单调的问题。
本发明实施例提供了一种界面图片的占位图的处理方法，包括：
获取页面加载图片的尺寸数据和位置数据；
根据所述尺寸数据和位置数据生成所述页面加载图片的第一占位图；
获取背景颜色参数值，所述背景颜色参数包含色相、饱和度和亮度；
根据所述背景颜色参数值生成所述第一占位图的背景颜色；
将所述第一占位图叠加在所述背景颜色上，生成第二占位图；
将所述第二占位图在所述页面上加载图片的位置进行显示。
进一步的，所述获取页面加载图片的尺寸数据和位置数据具体包括：
检测页面加载图片，提取所述尺寸数据和位置数据。
进一步的，所述根据所述尺寸数据和位置数据生成所述页面加载图片的第一占位图具体包括：
生成与所述页面加载图片尺寸、位置相同的第一占位图。
进一步的，所述方法还包括：
将所述第一占位图的颜色设置为纯白色，透明度设置为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、或技术领域内所公知的任意其它形式的存储介质中。
以上所述的具体实施方式，对本发明实施例的目的、技术方案和有益效果进行了进一步详细说明，所应理解的是，以上所述仅为本发明实施例的具体实施方式而已，并不用于限定本发明实施例的保护范围，凡在本发明实施例的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本发明实施例的保护范围之内。

Claims (7)

1.一种界面图片的占位图的处理方法，其特征在于，所述方法包括：
获取页面加载图片的尺寸数据和位置数据；
根据所述尺寸数据和位置数据生成所述页面加载图片的第一占位图；
获取背景颜色参数值，所述背景颜色参数包含色相、饱和度和亮度；
根据所述背景颜色参数值生成所述第一占位图的背景颜色；
将所述第一占位图叠加在所述背景颜色上，生成第二占位图；
将所述第二占位图在所述页面上加载图片的位置进行显示。
2.根据权利要求1所述的界面图片的占位图的处理方法，其特征在于，所述获取页面加载图片的尺寸数据和位置数据具体包括：
检测页面加载图片，提取所述尺寸数据和位置数据。
3.根据权利要求1所述的界面图片的占位图的处理方法，其特征在于，所述根据所述尺寸数据和位置数据生成所述页面加载图片的第一占位图具体包括：
生成与所述页面加载图片尺寸、位置相同的第一占位图。
4.根据权利要求1所述的界面图片的占位图的处理方法，其特征在于，所述方法还包括：
将所述第一占位图的颜色设置为纯白色，透明度设置为10％。
5.根据权利要求1所述的界面图片的占位图的处理方法，其特征在于，所述获取背景颜色参数值，所述背景颜色参数包含色相、饱和度和亮度具体包括：
利用随机函数在0-360之间选取色相值；
利用随机函数在15-30之间选取饱和度值；
利用随机函数在50-70之间选取亮度值。
6.根据权利要求5所述的界面图片的占位图的处理方法，其特征在于，所述根据所述背景颜色参数值生成所述第一占位图的背景颜色具体包括：
根据所述色相值、饱和度值和亮度值生成所述第一占位图的背景颜色，并对所述背景颜色进行去重处理。
7.根据权利要求1所述的界面图片的占位图的处理方法，其特征在于，在将所述第二占位图在所述页面上加载图片的位置进行显示之后，所述方法还包括：
将所述页面加载图片覆盖在所述第二占位图上，从而实现图片加载。
CN201710374263.2A 2017-05-24 2017-05-24 界面图片的占位图的处理方法 Pending CN107197353A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201710374263.2A CN107197353A (zh) 2017-05-24 2017-05-24 界面图片的占位图的处理方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201710374263.2A CN107197353A (zh) 2017-05-24 2017-05-24 界面图片的占位图的处理方法

Publications (1)

Publication Number Publication Date
CN107197353A true CN107197353A (zh) 2017-09-22

Family

ID=59874345

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201710374263.2A Pending CN107197353A (zh) 2017-05-24 2017-05-24 界面图片的占位图的处理方法

Country Status (1)

Country Link
CN (1) CN107197353A (zh)

Cited By (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN110096662A (zh) * 2019-04-22 2019-08-06 华为技术有限公司 一种网页显示方法及相关装置
CN111767492A (zh) * 2020-06-30 2020-10-13 中国平安财产保险股份有限公司 图片加载方法、装置、计算机设备及存储介质
CN114066710A (zh) * 2022-01-17 2022-02-18 山东捷瑞数字科技股份有限公司 一种占位图的图像生成方法及系统

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102253942A (zh) * 2010-05-21 2011-11-23 腾讯数码（天津）有限公司 一种图片的显示方法和设备
CN103218989A (zh) * 2013-04-09 2013-07-24 广东欧珀移动通信有限公司 预载图片时的个性显示方法及其终端
CN106294339A (zh) * 2015-05-12 2017-01-04 阿里巴巴集团控股有限公司 应用中加载图片的方法及装置
CN106445970A (zh) * 2015-08-11 2017-02-22 腾讯科技（深圳）有限公司 一种占位图的加载处理方法和装置
CN106528187A (zh) * 2015-09-09 2017-03-22 腾讯科技（深圳）有限公司 一种占位背景色确定方法及装置

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102253942A (zh) * 2010-05-21 2011-11-23 腾讯数码（天津）有限公司 一种图片的显示方法和设备
CN103218989A (zh) * 2013-04-09 2013-07-24 广东欧珀移动通信有限公司 预载图片时的个性显示方法及其终端
CN106294339A (zh) * 2015-05-12 2017-01-04 阿里巴巴集团控股有限公司 应用中加载图片的方法及装置
CN106445970A (zh) * 2015-08-11 2017-02-22 腾讯科技（深圳）有限公司 一种占位图的加载处理方法和装置
CN106528187A (zh) * 2015-09-09 2017-03-22 腾讯科技（深圳）有限公司 一种占位背景色确定方法及装置

Cited By (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN110096662A (zh) * 2019-04-22 2019-08-06 华为技术有限公司 一种网页显示方法及相关装置
CN111767492A (zh) * 2020-06-30 2020-10-13 中国平安财产保险股份有限公司 图片加载方法、装置、计算机设备及存储介质
CN114066710A (zh) * 2022-01-17 2022-02-18 山东捷瑞数字科技股份有限公司 一种占位图的图像生成方法及系统

Similar Documents

Publication Publication Date Title
CN109859295A (zh) 一种特定动漫人脸生成方法、终端设备及存储介质
CN105374007B (zh) 融合骨架笔画和纹理特征的铅笔画生成方法和装置
US8572501B2 (en) Rendering graphical objects based on context
CN107845072B (zh) 图像生成方法、装置、存储介质及终端设备
CN110852941B (zh) 一种基于神经网络的二维虚拟试衣方法
JP7342062B2 (ja) 画像処理方法、装置、電子機器及び記憶媒体
CN108665408A (zh) 肤色调整方法、装置和电子设备
CN107197353A (zh) 界面图片的占位图的处理方法
CN111047509A (zh) 一种图像特效处理方法、装置及终端
CN108765520A (zh) 文本信息的渲染方法和装置、存储介质、电子装置
CN110266970A (zh) 一种短视频制作方法和系统
CN106997608A (zh) 一种生成光晕效果图的方法及装置
CN111383320B (zh) 虚拟模型处理方法、装置、设备及存储介质
Gobron et al. Retina simulation using cellular automata and GPU programming
CN107222773A (zh) 界面图片的占位图的处理系统
Sun et al. Enhance images as you like with unpaired learning
Duong et al. DMT-Net: Deep Multiple Networks for Low-light Image Enhancement Based on Retinex Model
CN106874012A (zh) 主题背景设置方法、装置及电子设备
Kim et al. Game effect sprite generation with minimal data via conditional GAN
Mittal Automatic Contrast Enhancement of Low Contrast Images using MATLAB.
CN111383289A (zh) 图像处理方法、装置、终端设备及计算机可读存储介质
Fischer et al. Imaginenet: restyling apps using neural style transfer
CN109146069A (zh) 运算装置、运算方法和芯片
Zhao et al. Regional Traditional Painting Generation Based on Controllable Disentanglement Model
Tokura et al. A square pointillism image generation, and its GPU acceleration

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
WD01 Invention patent application deemed withdrawn after publication
WD01 Invention patent application deemed withdrawn after publication

Application publication date: 20170922