CN117828212A - 骨架纹理的色彩调节方法及装置、存储介质、电子设备 - Google Patents

Abstract

本发明公开了一种骨架纹理的色彩调节方法及装置、存储介质、电子设备，涉及前端开发技术领域，其中，该方法包括：依据目标骨架纹理获取目标元素，其中，目标元素是指目标浏览器在加载待展示内容的过程中，使用目标骨架纹理对预设展示位置进行填充所应用的页面元素；基于目标元素的前景色样式值计算目标骨架纹理的背景色样式值；基于背景色样式值生成样式配置文件，其中，样式配置文件用于记录目标元素的元素配置项；使用样式配置文件对目标骨架纹理进行渲染，得到色彩调节后的目标骨架纹理。本发明解决了相关技术中忽略骨架纹理与其他页面元素之间的色彩协调性，降低用户对网页的整体阅读体验的技术问题。

Description

骨架纹理的色彩调节方法及装置、存储介质、电子设备

技术领域

本发明涉及前端开发技术领域，具体而言，涉及一种骨架纹理的色彩调节方法及装置、存储介质、电子设备。

背景技术

目前，在前端领域，通常采用灰色块的骨架屏纹理形式来模拟即将出现的真实内容的位置和布局，然而，在大部分骨架屏生成技术中，只关注模拟真实内容的位置和布局，却忽略了骨架纹理色值与真实内容、与周围环境之间的色彩协调问题，粗略的直接使用灰色作为通用骨架屏纹理可能会导致对比度问题进而影响网页阅读效果，即，占位符元素与页面其他部分形成过于鲜明的对比，给用户带来视觉压力，破坏了设计一致性，影响了用户对网页页面的整体感知。

针对上述的问题，目前尚未提出有效的解决方案。

发明内容

本发明实施例提供了一种骨架纹理的色彩调节方法及装置、存储介质、电子设备，以至少解决相关技术中忽略骨架纹理与其他页面元素之间的色彩协调性，降低用户对网页的整体阅读体验的技术问题。

根据本发明实施例的一个方面，提供了一种骨架纹理的色彩调节方法，包括：依据目标骨架纹理获取目标元素，其中，所述目标元素是指目标浏览器在加载待展示内容的过程中，使用所述目标骨架纹理对预设展示位置进行填充所应用的页面元素；基于所述目标元素的前景色样式值计算所述目标骨架纹理的背景色样式值；基于所述背景色样式值生成样式配置文件，其中，所述样式配置文件用于记录所述目标元素的元素配置项；使用所述样式配置文件对所述目标骨架纹理进行渲染，得到色彩调节后的所述目标骨架纹理。

可选地，基于所述目标元素的前景色样式值计算所述目标骨架纹理的背景色样式值的步骤，包括：通过指定样式计算接口获取所述目标网页中所述目标元素的所述前景色样式值；对所述前景色样式值进行格式转换，得到所述目标元素对应的元素色值坐标，其中，所述元素色值坐标中至少包含N个颜色通道的通道值，N为正整数；依据预设色彩调节公式和所述前景色样式值计算得到所述目标骨架纹理的所述背景色样式值。

可选地，在所述待展示内容的类型为文字的情况下，所述骨架纹理的色彩调节方法还包括：通过指定样式计算接口获取待展示文字的文字颜色值；基于所述文字颜色值计算所述目标骨架纹理的背景色样式值。

可选地，依据预设色彩调节公式和所述前景色样式值计算得到所述骨架纹理对应的所述背景色样式值的步骤，包括：调整所述目标骨架纹理所应用的所述页面元素的亮度调节系数；依据所述亮度调节系数、所述预设色彩调节公式对所述元素色值坐标中的所有所述通道值进行调整，得到所述目标骨架纹理对应的骨架纹理色值坐标；基于所述骨架纹理色值坐标生成所述目标骨架纹理对应的所述背景色样式值。

可选地，通过指定样式计算接口获取所述目标网页中所述目标元素的所述前景色样式值的步骤，包括：以所述目标网页中的所述目标元素作为调用参数，调用指定样式计算接口；接收所述指定样式计算接口返回的所述目标元素对应的计算样式对象；基于所述计算样式对象，获取所述目标元素对应的计算样式属性值，其中，所述计算样式属性值中至少包含：所述前景色样式值。

可选地，在使用所述样式配置文件对所述目标骨架纹理进行渲染之前，还包括：基于第一预设百分数调整所述目标骨架纹理所应用的所述页面元素的色块高度占比系数；基于第二预设百分数调整所述目标骨架纹理所应用的所述页面元素的色彩减淡效果系数；将所述色块高度占比系数和所述色彩减淡效果系数写入至所述样式配置文件。

可选地，使用所述样式配置文件对所述目标骨架纹理进行渲染，得到色彩调节后的所述目标骨架纹理的步骤，包括：通过所述目标网页所在的目标浏览器，将历史骨架纹理加载为图像资源；依据所述样式配置文件对所述图像资源进行重新着色处理；将重新着色处理后的所述图像资源渲染至所述目标浏览器的展示画布，得到色彩调节后的所述目标骨架纹理。

根据本发明实施例的另一方面，还提供了一种骨架纹理的色彩调节装置，包括：获取单元，用于依据目标骨架纹理获取目标元素，其中，所述目标元素是指目标浏览器在加载待展示内容的过程中，使用所述目标骨架纹理对预设展示位置进行填充所应用的页面元素；计算单元，用于基于所述目标元素的前景色样式值计算所述目标骨架纹理的背景色样式值；生成单元，用于基于所述背景色样式值生成样式配置文件，其中，所述样式配置文件用于记录所述目标元素的元素配置项；渲染单元，用于使用所述样式配置文件对所述目标骨架纹理进行渲染，得到色彩调节后的所述目标骨架纹理。

可选地，所述计算单元包括：第一获取模块，用于通过指定样式计算接口获取所述目标网页中所述目标元素的所述前景色样式值；格式转换模块，用于对所述前景色样式值进行格式转换，得到所述目标元素对应的元素色值坐标，其中，所述元素色值坐标中至少包含N个颜色通道的通道值，N为正整数；第一计算模块，用于依据预设色彩调节公式和所述前景色样式值计算得到所述目标骨架纹理的所述背景色样式值。

可选地，所述骨架纹理的色彩调节装置还包括：第二获取模块，用于在所述待展示内容的类型为文字的情况下，通过指定样式计算接口获取待展示文字的文字颜色值；第二计算模块，用于基于所述文字颜色值计算所述目标骨架纹理的背景色样式值。

可选地，所述第一计算模块包括：第一调整子模块，用于调整所述目标骨架纹理所应用的所述页面元素的亮度调节系数；第二调整子模块，用于依据所述亮度调节系数、所述预设色彩调节公式对所述元素色值坐标中的所有所述通道值进行调整，得到所述目标骨架纹理对应的骨架纹理色值坐标；生成子模块，用于基于所述骨架纹理色值坐标生成所述目标骨架纹理对应的所述背景色样式值。

可选地，所述第一获取模块包括：调用子模块，用于以所述目标网页中的所述目标元素作为调用参数，调用指定样式计算接口；接收子模块，用于接收所述指定样式计算接口返回的所述目标元素对应的计算样式对象；获取子模块，用于基于所述计算样式对象，获取所述目标元素对应的计算样式属性值，其中，所述计算样式属性值中至少包含：所述前景色样式值。

可选地，所述骨架纹理的色彩调节装置还包括：第一调整模块，用于基于第一预设百分数调整所述目标骨架纹理所应用的所述页面元素的色块高度占比系数；第二调整模块，用于基于第二预设百分数调整所述目标骨架纹理所应用的所述页面元素的色彩减淡效果系数；写入模块，用于将所述色块高度占比系数和所述色彩减淡效果系数写入至所述样式配置文件。

可选地，所述渲染单元包括：加载模块，用于通过所述目标网页所在的目标浏览器，将历史骨架纹理加载为图像资源；着色模块，用于依据所述样式配置文件对所述图像资源进行重新着色处理；渲染模块，用于将重新着色处理后的所述图像资源渲染至所述目标浏览器的展示画布，得到色彩调节后的所述目标骨架纹理。

根据本发明实施例的另一方面，还提供了一种计算机可读存储介质，所述计算机可读存储介质包括存储的计算机程序，其中，在所述计算机程序运行时控制所述计算机可读存储介质所在设备执行上述任意一项所述的骨架纹理的色彩调节方法。

根据本发明实施例的另一方面，还提供了一种电子设备，包括一个或多个处理器和存储器，所述存储器用于存储一个或多个程序，其中，当所述一个或多个程序被所述一个或多个处理器执行时，使得所述一个或多个处理器实现上述任意一项所述的骨架纹理的色彩调节方法。

本发明中，提出一种骨架纹理的色彩调节方法，先依据目标骨架纹理获取目标元素，其中，目标元素是指目标浏览器在加载待展示内容的过程中，使用目标骨架纹理对预设展示位置进行填充所应用的页面元素，再基于目标元素的前景色样式值计算目标骨架纹理的背景色样式值，然后基于背景色样式值生成样式配置文件，其中，样式配置文件用于记录目标元素的元素配置项，最后使用样式配置文件对目标骨架纹理进行渲染，得到色彩调节后的目标骨架纹理。

本发明中，通过提取骨架纹理所在的页面元素的前景色样式值，通过色值转换计算，得到与该页面元素的前景色样式相协调的色彩样式的色值，将该色彩样式的色值作为骨架纹理的背景色样式值，将背景色样式值作为目标元素的元素配置项，生成骨架纹理的样式配置文件，并使用样式配置文件进一步对目标骨架纹理进行渲染，本发明通过页面元素的前景色样式值推算骨架纹理的背景色样式值，并对历史骨架纹理的初始色块/纹理进行覆盖，实现了在加载浏览器网页的过程中，保持骨架纹理与其他页面元素之间的色彩协调性，确保骨架纹理能真实地反映待展示内容的色彩样式，为用户提供连贯的视觉体验，进一步提升用户对浏览器网页的整体阅读体验，进而解决了相关技术中忽略骨架纹理与其他页面元素之间的色彩协调性，降低用户对网页的整体阅读体验的技术问题。

附图说明

此处所说明的附图用来提供对本发明的进一步理解，构成本申请的一部分，本发明的示意性实施例及其说明用于解释本发明，并不构成对本发明的不当限定。在附图中：

图1是根据本发明实施例的一种可选的骨架纹理的色彩调节方法的流程图；

图2是根据本发明实施例的一种可选的基于前景色的骨架纹理色彩协调方法的流程图；

图3是根据本发明实施例的一种可选的色彩协调前后的骨架纹理的对比图；

图4是根据本发明实施例的一种可选的骨架纹理的色彩调节装置的示意图；

图5是根据本发明实施例的一种骨架纹理的色彩调节方法的电子设备(或移动设备)的硬件结构框图。

具体实施方式

为了使本技术领域的人员更好地理解本发明方案，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分的实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都应当属于本发明保护的范围。

需要说明的是，本发明的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本发明的实施例能够以除了在这里图示或描述的那些以外的顺序实施。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。

为便于本领域技术人员理解本发明，下面对本发明各实施例中涉及的部分术语或名词做出解释：

骨架纹理，即骨架屏的骨架纹理，是指在加载真实内容之前，用于填充页面或组件空白区域的一种虚拟图案或占位符，通常以灰色色块的形式呈现，用来模拟真实内容将要出现的位置和布局。

前景色，在图像、设计或计算机界面中用于绘制或显示特定元素的颜色，通常与背景色形成对比，以使文字、图标、按钮等可见元素在视觉上突出并易于辨认。

色彩协调，在设计和视觉艺术中，通过选择、组合和调整不同的颜色元素以达到一种统一、平衡和美感的效果，涉及到将多个颜色元素结合起来，使它们相互融合并与周围环境相契合。

CSS色值，在CSS(层叠样式表)中，色值用于表示颜色，色值表示方式包括但不限于：十六进制表示法、RGB函数、RGBA函数、预定义颜色名称、HSL(色调、饱和度、亮度)和HSLA(带有透明度的HSL)。

getComputedStyle，一种JavaScript函数，用于获取指定元素在页面上应用的计算样式，计算样式是指元素最终呈现出来的实际样式，由浏览器根据CSS样式规则计算得出，但无法直接获取低于最小字体的字体原始值。

需要说明的是，本公开所涉及的相关信息(包括但不限于用户设备信息、用户个人信息等)和数据(包括但不限于用于分析的数据、存储的数据、展示的数据等)，均为经用户授权或者经过各方充分授权的信息和数据，并且相关数据的收集、存储、加工、传输、提供、公开、使用和处理需要遵守相关地区的法律法规和标准，采取了必要保密措施，不违背公序良俗，并提供有相应的操作入口，供用户选择授权或者拒绝。例如，本系统和相关用户或机构间设置有接口，在获取相关信息之前，需要通过接口向前述的用户或机构发送获取请求，并在接收到前述的用户或机构反馈的同意信息后，获取相关信息。

本公开所涉及的信息采集(例如，用户语音、视频、文字采集)以及分析操作在执行时已经为用户提供相应的操作入口，供用户选择同意或者拒绝自动化决策结果；若用户选择拒绝，则进入专家决策流程。

本发明下述各实施例可应用于各种需要使用骨架纹理作为浏览器页面加载过程中的页面元素占位符的系统/应用/设备中，能够实现在加载浏览器网页的过程中，保持骨架纹理与其他页面元素之间的色彩协调性，确保骨架纹理能真实地反映待展示内容的色彩样式，为用户提供连贯的视觉体验，进一步提升用户对浏览器网页的整体阅读体验。

下面结合各个实施例来详细说明本发明。

实施例一

根据本发明实施例，提供了一种骨架纹理的色彩调节方法实施例，需要说明的是，在附图的流程图示出的步骤可以在诸如一组计算机可执行指令的计算机系统中执行，并且，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤。

图1是根据本发明实施例的一种可选的骨架纹理的色彩调节方法的流程图，如图1所示，该方法包括如下步骤：

步骤S101，依据目标骨架纹理获取目标元素，其中，目标元素是指目标浏览器在加载待展示内容的过程中，使用目标骨架纹理对预设展示位置进行填充所应用的页面元素。

步骤S102，基于目标元素的前景色样式值计算目标骨架纹理的背景色样式值。

步骤S103，基于背景色样式值生成样式配置文件，其中，样式配置文件用于记录目标元素的元素配置项。

步骤S104，使用样式配置文件对目标骨架纹理进行渲染，得到色彩调节后的目标骨架纹理。

通过上述步骤，可以先依据目标骨架纹理获取目标元素，其中，目标元素是指目标浏览器在加载待展示内容的过程中，使用目标骨架纹理对预设展示位置进行填充所应用的页面元素，再基于目标元素的前景色样式值计算目标骨架纹理的背景色样式值，然后基于背景色样式值生成样式配置文件，其中，样式配置文件用于记录目标元素的元素配置项，最后使用样式配置文件对目标骨架纹理进行渲染，得到色彩调节后的目标骨架纹理。

本发明实施例中，通过提取骨架纹理所在的页面元素的前景色样式值，通过色值转换计算，得到与该页面元素的前景色样式相协调的色彩样式的色值，将该色彩样式的色值作为骨架纹理的背景色样式值，将背景色样式值作为目标元素的元素配置项，生成骨架纹理的样式配置文件，并使用样式配置文件进一步对目标骨架纹理进行渲染，本发明通过页面元素的前景色样式值推算骨架纹理的背景色样式值，并对历史骨架纹理的初始色块/纹理进行覆盖，实现了在加载浏览器网页的过程中，保持骨架纹理与其他页面元素之间的色彩协调性，确保骨架纹理能真实地反映待展示内容的色彩样式，为用户提供连贯的视觉体验，进一步提升用户对浏览器网页的整体阅读体验，进而解决了相关技术中忽略骨架纹理与其他页面元素之间的色彩协调性，降低用户对网页的整体阅读体验的技术问题。

下面结合上述各步骤对本发明实施例进行详细说明。

本发明实施例的实施主体可以是浏览器的前端开发系统，通过JavaScript技术获取页面元素的计算样式，依据计算样式中的前景色样式推算骨架纹理的背景色样式，并设计骨架纹理的像素占比，进而对目标骨架纹理进行渲染，实现对目标骨架纹理的色彩调节，使目标骨架纹理与待展示内容的色彩达到统一的效果。

步骤S101，依据目标骨架纹理获取目标元素，其中，目标元素是指目标浏览器在加载待展示内容的过程中，使用目标骨架纹理对预设展示位置进行填充所应用的页面元素。

需要说明的是，当Web页面或应用的待展示内容正在加载时，会以骨架屏的形式对待展示内容的轮廓进行预展示，用于填充预设展示位置的占位符即为骨架纹理，这种骨架屏预展示的方式使用简单的形状和元素(如矩形、圆形条等)模拟最终将要加载的内容的布局，给用户一种“内容即将到来”的感觉，从而减少用户的等待焦虑。

步骤S102，基于目标元素的前景色样式值计算目标骨架纹理的背景色样式值。

需要说明的是，目标元素的前景色样式值是指在待展示内容作为页面展示元素(包括但不限于：文本、图标、边框)被加载成功后，在预设展示位置进行展示时对页面展示元素应用的色彩样式值(该色彩样式值是可以被指定样式计算接口获取到的计算样式)，该前景色样式值用于设置页面展示元素的展示颜色的CSS属性值。

本发明实施例通过目标元素的前景色样式值来计算目标骨架纹理的样式值，可以实现控制合适的前景色与背景色的对比度，突出页面关键信息的同时提升页面美观度，提高页面展示元素的可读性，合适的对比度还可以引导用户的注意力，提升用户对页面内容的阅读体验。

可选地，步骤S102包括：通过指定样式计算接口获取目标网页中目标元素的前景色样式值；对前景色样式值进行格式转换，得到目标元素对应的元素色值坐标，其中，元素色值坐标中至少包含N个颜色通道的通道值，N为正整数；依据预设色彩调节公式和前景色样式值计算得到目标骨架纹理的背景色样式值。

可选地，通过指定样式计算接口获取目标网页中目标元素的前景色样式值的步骤，包括：以目标网页中的目标元素作为调用参数，调用指定样式计算接口；接收指定样式计算接口返回的目标元素对应的计算样式对象；基于计算样式对象，获取目标元素对应的计算样式属性值，其中，计算样式属性值中至少包含：前景色样式值。

本发明实施例可以使用getComputedStyle作为指定样式计算接口，获取目标元素对应的计算样式对象，进一步读取计算样式对象的计算样式属性值中的前景色样式值(即待展示内容对应的页面展示元素的色彩计算样式)。

需要说明的是，通过getComputedStyle获取到的前景色样式值为16进制或者RGBA格式，本发明实施例需要按照指定格式(例如RGB格式)对前景色样式值进行格式转换，得到元素色值坐标rgbcolor(r，g，b)。

其中，r、g、b各自的数值是指红、绿、蓝三种颜色通道的通道值，用于定义前景色中红绿蓝三种颜色成分的强度，r、g、b均在0-255之间进行取值。例如，rgbcolor(0，0，139)表示将一个页面展示元素设置为深蓝色，又如，rgbcolor(211，211，211)表示将一个页面展示元素设置为浅灰色。

另一种示例性的，本发明实施例还可以使用RGBA格式作为指定格式对前景色样式值进行格式转换，得到元素色值坐标rgbacolor(r，g，b，a)，其中，a代表alpha通道，即透明度，alpha通道值的取值范围是从0(表示完全透明)到1(表示完全不透明)的数字。例如，rgbacolor(255，0，0，0.5)表示将一个页面元素设置为半透明红色。

需要说明的是，色值的表示方式还包括：十六进制表示法、RGB函数、RGBA函数、预定义颜色名称、HSL(色调、饱和度、亮度)和HSLA(带有透明度的HSL)，可以根据实际需求选取合适的表示方式作为指定格式，本发明对此不做限制。

可选地，在待展示内容的类型为文字的情况下，骨架纹理的色彩调节方法还包括：通过指定样式计算接口获取待展示文字的文字颜色值；基于文字颜色值计算目标骨架纹理的背景色样式值。

需要说明的是，基于文字颜色值计算目标骨架纹理的背景色样式值的步骤，包括：通过指定样式计算接口获取待展示文字的文字颜色值；对文字颜色值进行格式转换，得到文字颜色坐标，其中，文字颜色坐标中至少包含M个颜色通道的通道值，M为正整数；依据预设色彩调节公式和文字颜色值计算得到目标骨架纹理的背景色样式值。

可选地，依据预设色彩调节公式和前景色样式值计算得到骨架纹理对应的背景色样式值的步骤，包括：调整目标骨架纹理所应用的页面元素的亮度调节系数；依据亮度调节系数、预设色彩调节公式对元素色值坐标中的所有通道值进行调整，得到目标骨架纹理对应的骨架纹理色值坐标；基于骨架纹理色值坐标生成目标骨架纹理对应的背景色样式值。

需要说明的是，在待展示内容的类型为文字的情况下，依据预设色彩调节公式和文字颜色值计算得到目标骨架纹理的背景色样式值的步骤，包括：调整目标骨架纹理所应用的页面元素的亮度调节系数；依据亮度调节系数、预设色彩调节公式对文字颜色坐标中的所有通道值进行调整，得到目标骨架纹理对应的骨架纹理色值坐标；基于骨架纹理色值坐标生成目标骨架纹理对应的背景色样式值。

本发明实施例提供一种示例性的，在前景色样式值对应元素色值坐标rgbcolor(r，g，b)的情况下，可以使用预设色彩调节公式来计算骨架纹理色值坐标rgbcolor(R，G，B)中的颜色通道值：R＝(255-r)*percent；G＝(255-g)*percent；B＝(255-b)*percent，其中，percent即为目标骨架纹理所应用的页面元素的亮度调节系数。

对骨架纹理色值坐标rgbcolor(R，G，B)进行格式转换，可以得到目标骨架纹理对应的背景色样式值。

步骤S103，基于背景色样式值生成样式配置文件，其中，样式配置文件用于记录目标元素的元素配置项。

需要说明的是，样式配置文件中的元素配置项包括但不限于：目标骨架纹理的背景色样式值、色块高度占比系数和色彩减淡效果系数。

可选地，在执行步骤S104之前，骨架纹理的色彩调节方法还包括：基于第一预设百分数调整目标骨架纹理所应用的页面元素的色块高度占比系数；基于第二预设百分数调整目标骨架纹理所应用的页面元素的色彩减淡效果系数；将色块高度占比系数和色彩减淡效果系数写入至样式配置文件。

需要说明的是，在待展示内容的类型为文字的情况下，考虑待展示文字并不像骨架屏一样使用骨架纹理完全填充所有行，而是存在一定的字间距离，每个文字由于字形结构的不同，占据行高也不一样，若使用大色块骨架纹理完全填充文字所在行，那么当待展示文字加载成功并对大色块骨架纹理进行替换后，用户视觉会感觉到割裂，本发明实施例可以通过减少色块高度占比以及减淡色彩效果，提高页面的色彩连贯性，提升用户阅读网页页面时的视觉体验。

步骤S104，使用样式配置文件对目标骨架纹理进行渲染，得到色彩调节后的目标骨架纹理。

可选地，步骤S104包括：通过目标网页所在的目标浏览器，将历史骨架纹理加载为图像资源；依据样式配置文件对图像资源进行重新着色处理；将重新着色处理后的图像资源渲染至目标浏览器的展示画布，得到色彩调节后的目标骨架纹理。

对于依据样式配置文件对图像资源进行重新着色处理的步骤，本发明实施例提供几种可选的着色处理工具，包括但不限于：图像处理软件、编程语言库以及自动化脚本工具，本发明实施例对于选用何种着色处理工具不做具体限制。

需要说明的是，依据样式配置文件对图像资源进行重新着色处理的步骤包括：解析样式配置文件，得到目标颜色和颜色映射规则；基于颜色映射规则对图像资源进行重新着色，得到应用目标颜色的图像资源；对重新着色后的图像资源进行重新着色和视觉审查，确保着色质量。

本发明实施例通过提取骨架纹理所在目标元素的字体颜色值，并估算字体前景色像素占比，然后根据估算结果调整骨架纹理色块所在行的高度占比，最后通过色值转换，在保持原始饱和度和明度不变的情况下对亮度进行调节，以实现对骨架纹理的色彩协调处理。

本发明实施例还使用基于文本颜色的淡化骨架纹理，突出页面轮廓和结构，帮助用户快速识别布局和感知网页的整体色彩关系，通过确保骨架纹理反映真实内容的颜色对比来保持对比度，可以让用户提前感知内容，并分辨页面元素的加载进度。

本发明实施例还可以通过柔和、渐变或模糊等视觉效果强调占位状态，凸显填充效果，还支持用户预览页面填充效果，增强用户阅读友好感。

本发明实施例采用基于前景色的骨架纹理可以保持设计上的视觉连贯性，即，若网页或应用程序在正常加载过程中使用特定配色方案，则也使用类似配色方案对目标骨架纹理进行展示会使用户感到熟悉，并帮助用户正确认知页面结构和加载进度。

下面结合另一种具体的实施方式来说明本发明。

本发明实施方式提供一种简单的使用指定灰色色块作为骨架纹理的应用场景，该应用场景中极易导致对比度异常和色彩失衡的问题。

基于上述应用场景，本发明实施例提供一种基于前景色的骨架纹理色彩协调方法。

图2是根据本发明实施例的一种可选的基于前景色的骨架纹理色彩协调方法的流程图，如图2所示，该方法包括如下步骤：

S1、获取骨架纹理所在目标元素el。

需要说明的是，当Web页面或应用的待展示内容正在加载时，会以骨架屏的形式对待展示内容的轮廓进行预展示，用于填充预设展示位置的占位符即为骨架纹理，一般使用简单的形状和元素(如矩形、圆形条等)作为占位符，模拟最终将要加载的内容的布局。

S2、利用getComputedStyle获取目标元素el的字体颜色属性fontColor。

需要说明的是，通过getComputedStyle获取到的前景色样式值为16进制或者RGBA格式。

S3、将fontColor转换为RGB格式，得到色值坐标rgbColor(r,g,b)。

本发明实施例需要按照指定格式(例如RGB格式)对前景色样式值进行格式转换，得到元素色值坐标rgbcolor(r，g，b)，其中，r、g、b各自的数值是指红、绿、蓝三种颜色通道的通道值，用于定义前景色中红绿蓝三种颜色成分的强度，r、g、b均在0-255之间进行取值。例如，rgbcolor(0，0，139)表示将一个页面展示元素设置为深蓝色，又如，rgbcolor(211，211，211)表示将一个页面展示元素设置为浅灰色。

S4、定义色块高度占比系数为60％，并定义颜色减淡效果系数为20％。

需要说明的是，考虑待展示文字并不像骨架屏一样使用骨架纹理完全填充所有行，而是存在一定的字间距离，每个文字由于字形结构的不同，占据行高也不一样，若使用大色块骨架纹理完全填充文字所在行，那么当待展示文字加载成功并对大色块骨架纹理进行替换后，用户视觉会感觉到割裂，本发明实施方式可以通过减少色块高度占比以及减淡色彩效果，提高页面的色彩连贯性，提升用户阅读网页页面时的视觉体验。

S5、使用预设亮度百分数为亮度百分比percent赋值，使用预设色彩调节公式和亮度百分比percent将rgbColor(r,g,b)转换为改变亮度后的骨架纹理的色值坐标rgbLight(R,G,B)，并对转换结果进行取整。

需要说明的是，提供一种示例性的预设色彩调节公式：R＝(255-r)*percent；G＝(255-g)*percent；B＝(255-b)*percent。

S6、使用rgbLight(R,G,B)对骨架纹理进行渲染，得到色彩调节后的骨架纹理。

图3是根据本发明实施例的一种可选的色彩协调前后的骨架纹理的对比图，如图3所示，在色彩协调之前，骨架纹理使用同一宽度和同一指定灰色色块进行填充并展示在真实内容的待展示位置，该骨架纹理与真实内容的字体前景色相差甚远，页面的整体对比度过于强烈，而在色彩协调之后，依据真实内容的前景色对骨架纹理的背景色进行了调整，并减少了骨架纹理的宽度，可以直接反应真实内容的颜色，页面的整体对比度有所降低，视觉体验得到了增强。

本发明实施例通过提取骨架纹理所在目标元素的字体颜色值，并估算字体前景色像素占比，然后根据估算结果调整骨架纹理色块所在行的高度占比，最后通过色值转换，在保持原始饱和度和明度不变的情况下对亮度进行调节，以实现对骨架纹理的色彩协调处理。

本发明实施例还使用基于文本颜色的淡化骨架纹理，突出页面轮廓和结构，帮助用户快速识别布局和感知网页的整体色彩关系，通过确保骨架纹理反映真实内容的颜色对比来保持对比度，可以让用户提前感知内容，并分辨页面元素的加载进度。

本发明实施例还可以通过柔和、渐变或模糊等视觉效果强调占位状态，凸显填充效果，还支持用户预览页面填充效果，增强用户阅读友好感。

本发明实施例采用基于前景色的骨架纹理可以保持设计上的视觉连贯性，即，若网页或应用程序在正常加载过程中使用特定配色方案，则也使用类似配色方案对目标骨架纹理进行展示会使用户感到熟悉，并帮助用户正确认知页面结构和加载进度。

下面结合另一种可选的实施例来说明本发明。

实施例二

本实施例中提供的一种骨架纹理的色彩调节装置包含了多个实施单元，每个实施单元对应于上述实施例一中的各个实施步骤。

图4是根据本发明实施例的一种可选的骨架纹理的色彩调节装置的示意图，如图4所示，该装置可以包括：获取单元41，计算单元42，生成单元43，渲染单元44。

其中，获取单元41，用于依据目标骨架纹理获取目标元素，其中，目标元素是指目标浏览器在加载待展示内容的过程中，使用目标骨架纹理对预设展示位置进行填充所应用的页面元素。

计算单元42，用于基于目标元素的前景色样式值计算目标骨架纹理的背景色样式值。

生成单元43，用于基于背景色样式值生成样式配置文件，其中，样式配置文件用于记录目标元素的元素配置项。

渲染单元44，用于使用样式配置文件对目标骨架纹理进行渲染，得到色彩调节后的目标骨架纹理。

上述骨架纹理的色彩调节装置，可以先通过获取单元41依据目标骨架纹理获取目标元素，其中，目标元素是指目标浏览器在加载待展示内容的过程中，使用目标骨架纹理对预设展示位置进行填充所应用的页面元素，再通过计算单元42基于目标元素的前景色样式值计算目标骨架纹理的背景色样式值，然后通过生成单元43基于背景色样式值生成样式配置文件，其中，样式配置文件用于记录目标元素的元素配置项，最后通过渲染单元44使用样式配置文件对目标骨架纹理进行渲染，得到色彩调节后的目标骨架纹理。

本发明实施例中，通过提取骨架纹理所在的页面元素的前景色样式值，通过色值转换计算，得到与该页面元素的前景色样式相协调的色彩样式的色值，将该色彩样式的色值作为骨架纹理的背景色样式值，将背景色样式值作为目标元素的元素配置项，生成骨架纹理的样式配置文件，并使用样式配置文件进一步对目标骨架纹理进行渲染，本发明通过页面元素的前景色样式值推算骨架纹理的背景色样式值，并对历史骨架纹理的初始色块/纹理进行覆盖，实现了在加载浏览器网页的过程中，保持骨架纹理与其他页面元素之间的色彩协调性，确保骨架纹理能真实地反映待展示内容的色彩样式，为用户提供连贯的视觉体验，进一步提升用户对浏览器网页的整体阅读体验，进而解决了相关技术中忽略骨架纹理与其他页面元素之间的色彩协调性，降低用户对网页的整体阅读体验的技术问题。

可选地，计算单元包括：第一获取模块，用于通过指定样式计算接口获取目标网页中目标元素的前景色样式值；格式转换模块，用于对前景色样式值进行格式转换，得到目标元素对应的元素色值坐标，其中，元素色值坐标中至少包含N个颜色通道的通道值，N为正整数；第一计算模块，用于依据预设色彩调节公式和前景色样式值计算得到目标骨架纹理的背景色样式值。

可选地，骨架纹理的色彩调节装置还包括：第二获取模块，用于在待展示内容的类型为文字的情况下，通过指定样式计算接口获取待展示文字的文字颜色值；第二计算模块，用于基于文字颜色值计算目标骨架纹理的背景色样式值。

可选地，第一计算模块包括：第一调整子模块，用于调整目标骨架纹理所应用的页面元素的亮度调节系数；第二调整子模块，用于依据亮度调节系数、预设色彩调节公式对元素色值坐标中的所有通道值进行调整，得到目标骨架纹理对应的骨架纹理色值坐标；生成子模块，用于基于骨架纹理色值坐标生成目标骨架纹理对应的背景色样式值。

可选地，第一获取模块包括：调用子模块，用于以目标网页中的目标元素作为调用参数，调用指定样式计算接口；接收子模块，用于接收指定样式计算接口返回的目标元素对应的计算样式对象；获取子模块，用于基于计算样式对象，获取目标元素对应的计算样式属性值，其中，计算样式属性值中至少包含：前景色样式值。

可选地，骨架纹理的色彩调节装置还包括：第一调整模块，用于基于第一预设百分数调整目标骨架纹理所应用的页面元素的色块高度占比系数；第二调整模块，用于基于第二预设百分数调整目标骨架纹理所应用的页面元素的色彩减淡效果系数；写入模块，用于将色块高度占比系数和色彩减淡效果系数写入至样式配置文件。

可选地，渲染单元包括：加载模块，用于通过目标网页所在的目标浏览器，将历史骨架纹理加载为图像资源；着色模块，用于依据样式配置文件对图像资源进行重新着色处理；渲染模块，用于将重新着色处理后的图像资源渲染至目标浏览器的展示画布，得到色彩调节后的目标骨架纹理。

上述的骨架纹理的色彩调节装置还可以包括处理器和存储器，上述获取单元41，计算单元42，生成单元43，渲染单元44等均作为程序单元存储在存储器中，由处理器执行存储在存储器中的上述程序单元来实现相应的功能。

上述处理器中包含内核，由内核去存储器中调取相应的程序单元。内核可以设置一个或以上，通过调整内核参数来基于背景色样式值生成样式配置文件，其中，样式配置文件用于记录目标元素的元素配置项，并使用样式配置文件对目标骨架纹理进行渲染，得到色彩调节后的目标骨架纹理。

上述存储器可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)，存储器包括至少一个存储芯片。

本申请还提供了一种计算机程序产品，当在数据处理设备上执行时，适于执行初始化有如下方法步骤的程序：依据目标骨架纹理获取目标元素，其中，目标元素是指目标浏览器在加载待展示内容的过程中，使用目标骨架纹理对预设展示位置进行填充所应用的页面元素；基于目标元素的前景色样式值计算目标骨架纹理的背景色样式值；基于背景色样式值生成样式配置文件，其中，样式配置文件用于记录目标元素的元素配置项；使用样式配置文件对目标骨架纹理进行渲染，得到色彩调节后的目标骨架纹理。

根据本发明实施例的另一方面，还提供了一种计算机可读存储介质，计算机可读存储介质包括存储的计算机程序，其中，在计算机程序运行时控制计算机可读存储介质所在设备执行上述实施例一中任意一项的骨架纹理的色彩调节方法。

根据本发明实施例的另一方面，还提供了一种电子设备，包括一个或多个处理器和存储器，存储器用于存储一个或多个程序，其中，当一个或多个程序被一个或多个处理器执行时，使得一个或多个处理器实现上述实施例一中任意一项的骨架纹理的色彩调节方法。

图5是根据本发明实施例的一种骨架纹理的色彩调节方法的电子设备(或移动设备)的硬件结构框图。如图5所示，电子设备可以包括一个或多个(图5中采用502a、502b，……，502n来示出)处理器502(处理器502可以包括但不限于微处理器MCU或可编程逻辑器件FPGA等的处理装置)、用于存储数据的存储器504。除此以外，还可以包括：显示器、输入/输出接口(I/O接口)、通用串行总线(USB)端口(可以作为I/O接口的端口中的一个端口被包括)、网络接口、键盘、电源和/或相机。本领域普通技术人员可以理解，图5所示的结构仅为示意，其并不对上述电子装置的结构造成限定。例如，电子设备还可包括比图5中所示更多或者更少的组件，或者具有与图5所示不同的配置。

上述本发明实施例序号仅仅为了描述，不代表实施例的优劣。

在本发明的上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见其他实施例的相关描述。

在本申请所提供的几个实施例中，应该理解到，所揭露的技术内容，可通过其它的方式实现。其中，以上所描述的装置实施例仅仅是示意性的，例如所述单元的划分，可以为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，单元或模块的间接耦合或通信连接，可以是电性或其它的形式。

所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外，在本发明各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。

所述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可为个人计算机、服务器或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、移动硬盘、磁碟或者光盘等各种可以存储程序代码的介质。

以上所述仅是本发明的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视为本发明的保护范围。

Claims (10)

1.一种骨架纹理的色彩调节方法，其特征在于，包括：

依据目标骨架纹理获取目标元素，其中，所述目标元素是指目标浏览器在加载待展示内容的过程中，使用所述目标骨架纹理对预设展示位置进行填充所应用的页面元素；

基于所述目标元素的前景色样式值计算所述目标骨架纹理的背景色样式值；

基于所述背景色样式值生成样式配置文件，其中，所述样式配置文件用于记录所述目标元素的元素配置项；

使用所述样式配置文件对所述目标骨架纹理进行渲染，得到色彩调节后的所述目标骨架纹理。

2.根据权利要求1所述的色彩调节方法，其特征在于，基于所述目标元素的前景色样式值计算所述目标骨架纹理的背景色样式值的步骤，包括：

通过指定样式计算接口获取所述目标网页中所述目标元素的所述前景色样式值；

对所述前景色样式值进行格式转换，得到所述目标元素对应的元素色值坐标，其中，所述元素色值坐标中至少包含N个颜色通道的通道值，N为正整数；

依据预设色彩调节公式和所述前景色样式值计算得到所述目标骨架纹理的所述背景色样式值。

3.根据权利要求1所述的色彩调节方法，其特征在于，在所述待展示内容的类型为文字的情况下，所述骨架纹理的色彩调节方法还包括：

通过指定样式计算接口获取待展示文字的文字颜色值；

基于所述文字颜色值计算所述目标骨架纹理的背景色样式值。

4.根据权利要求2所述的色彩调节方法，其特征在于，依据预设色彩调节公式和所述前景色样式值计算得到所述骨架纹理对应的所述背景色样式值的步骤，包括：

调整所述目标骨架纹理所应用的所述页面元素的亮度调节系数；

依据所述亮度调节系数、所述预设色彩调节公式对所述元素色值坐标中的所有所述通道值进行调整，得到所述目标骨架纹理对应的骨架纹理色值坐标；

基于所述骨架纹理色值坐标生成所述目标骨架纹理对应的所述背景色样式值。

5.根据权利要求2所述的色彩调节方法，其特征在于，通过指定样式计算接口获取所述目标网页中所述目标元素的所述前景色样式值的步骤，包括：

以所述目标网页中的所述目标元素作为调用参数，调用指定样式计算接口；

接收所述指定样式计算接口返回的所述目标元素对应的计算样式对象；

基于所述计算样式对象，获取所述目标元素对应的计算样式属性值，其中，所述计算样式属性值中至少包含：所述前景色样式值。

6.根据权利要求1所述的色彩调节方法，其特征在于，在使用所述样式配置文件对所述目标骨架纹理进行渲染之前，还包括：

基于第一预设百分数调整所述目标骨架纹理所应用的所述页面元素的色块高度占比系数；

基于第二预设百分数调整所述目标骨架纹理所应用的所述页面元素的色彩减淡效果系数；

将所述色块高度占比系数和所述色彩减淡效果系数写入至所述样式配置文件。

7.根据权利要求1所述的色彩调节方法，其特征在于，使用所述样式配置文件对所述目标骨架纹理进行渲染，得到色彩调节后的所述目标骨架纹理的步骤，包括：

通过所述目标网页所在的目标浏览器，将历史骨架纹理加载为图像资源；

依据所述样式配置文件对所述图像资源进行重新着色处理；

将重新着色处理后的所述图像资源渲染至所述目标浏览器的展示画布，得到色彩调节后的所述目标骨架纹理。

8.一种骨架纹理的色彩调节装置，其特征在于，包括：

获取单元，用于依据目标骨架纹理获取目标元素，其中，所述目标元素是指目标浏览器在加载待展示内容的过程中，使用所述目标骨架纹理对预设展示位置进行填充所应用的页面元素；

计算单元，用于基于所述目标元素的前景色样式值计算所述目标骨架纹理的背景色样式值；

生成单元，用于基于所述背景色样式值生成样式配置文件，其中，所述样式配置文件用于记录所述目标元素的元素配置项；

渲染单元，用于使用所述样式配置文件对所述目标骨架纹理进行渲染，得到色彩调节后的所述目标骨架纹理。

9.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质包括存储的计算机程序，其中，在所述计算机程序运行时控制所述计算机可读存储介质所在设备执行权利要求1至7中任意一项所述的骨架纹理的色彩调节方法。

10.一种电子设备，其特征在于，包括一个或多个处理器和存储器，所述存储器用于存储一个或多个程序，其中，当所述一个或多个程序被所述一个或多个处理器执行时，使得所述一个或多个处理器实现权利要求1至7中任意一项所述的骨架纹理的色彩调节方法。