前端网页主题颜色调节方法及装置制造方法及图纸

技术编号:24682000 阅读:69 留言:0更新日期:2020-06-27 07:38
本发明专利技术公开一种前端网页主题颜色调节方法及装置,涉及互联网技术领域,能够灵活的对网页的主体颜色自适应调节,提升网页的视觉效果。该方法包括:待网页加载完毕,截取网页图像以获取网页图像中的全部像素点数据;根据每个像素点对应的RGB像素值以及网页图像的尺寸值,计算网页图像的RGB像素均值;采用RGB像素均值对应的颜色对网页主题配色。该装置应用有上述方案所提的方法。

Method and device for adjusting theme color of front page

【技术实现步骤摘要】
前端网页主题颜色调节方法及装置
本专利技术涉及互联网
,尤其涉及一种前端网页主题颜色调节方法及装置。
技术介绍
随着网速的不断提升以及前端技术的快速发展,网页中的元素被设计的越来越丰富,图片作为网页的一个重要元素,目前很多网页的图片是根据网页内容动态获取的,也就是说一个网页要展示的图片并不固定,而网页主题配色常用的有两种方案,第一种为预配色方案,第二种为自定义配色方案。对于预配色方案,是指在浏览器中预先缓存多组配色方案,当动态获取到图片时根据图片的色调选择其中一组配色方案对网页页面进行调色,以使网页页面的颜色与图片的色调相匹配;对于自定义配色方案,对用户来说操作稍显繁琐,如果每次网页返回的图片不一样,用户每次都需要手动设置网页的调色参数。可见,第一种预配色方案的功能单一,对于网页元素多变的网页界面(如,网页中存在多张不同色调的图片)来说,不能够提升网页页面的整体视觉效果。第二种自定义配色方案的操作复杂,只有对颜色调节有一定知识基础的用户才能完成。
技术实现思路
本专利技术的目的在于提供一种前端网页主题颜本文档来自技高网...

【技术保护点】
1.一种前端网页主题颜色调节方法,其特征在于,包括:/n待网页加载完毕,截取网页图像以获取网页图像中的全部像素点数据;/n根据每个像素点对应的RGB像素值以及网页图像的尺寸值,计算网页图像的RGB像素均值;/n采用RGB像素均值对应的颜色对网页主题配色。/n

【技术特征摘要】
1.一种前端网页主题颜色调节方法,其特征在于,包括:
待网页加载完毕,截取网页图像以获取网页图像中的全部像素点数据;
根据每个像素点对应的RGB像素值以及网页图像的尺寸值,计算网页图像的RGB像素均值;
采用RGB像素均值对应的颜色对网页主题配色。


2.根据权利要求1所述的方法,其特征在于,在步骤采用RGB像素均值对应的颜色对网页主题配色之后还包括:
将RGB像素均值转换为HSL参数,并判断HSL参数是否属于预设的HSL阈值区间范围;
当判断结果为否时,调节HSL参数至HSL阈值区间范围内后配置于网页主题上显示;
当判断结果为是时,将当前HSL参数配置于网页主题上显示。


3.根据权利要求1或2所述的方法,其特征在于,截取网页图像以获取网页图像中的全部像素点数据的方法包括:
采集网页中的全部文档元素,并基于文档元素所处网页的位置坐标顺序将文档元素存入对象文件中;
依次调取对象文件中的文档元素,将文档元素结合CSS元素属性保存到canvas画布上,完成对网页图像的截取;
调用canvas画布的getImageData功能,获取网页图像的全部像素点数据,所述像素点数据包括像素点所处网页图像的位置坐标和网页图像的尺寸值。


4.根据权利要求3所述的方法,其特征在于,根据每个像素点对应的RGB像素值和网页图像的尺寸值,计算网页图像的RGB像素均值的方法包括:
根据网页图像的尺寸值计算像素点的总数量;
汇总网页图像中全部像素点的R像素值之和、G像素值之和、B像素值之和,分别将R像素值之和、G像素值之和、B像素值之和除以像素点的总数量得到网页图像的RGB像素均值。


5.根据权利要求4所述的方法,其特征在于,除计算每个像素点对应的RGB像素值之外还包括:
计算每个像素点对应的阿尔法值,所述阿尔法值用于表示像素点的显示透明度;
每个像素点的RGB像素值与阿尔法值的...

【专利技术属性】
技术研发人员:李政王功贺
申请(专利权)人:苏宁云计算有限公司
类型:发明
国别省市:江苏;32

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1