【技术实现步骤摘要】
本申请涉及互联网，尤其涉及一种文字渐变渲染方法、设备及存储介质。
技术介绍
1、随着互联网技术的发展，用户对于前端页面的交互要求越来越高，且要求页面越来越美观。文字，作为页面信息的载体，作为传递信息最重要的组成部分之一，人们已经不再满足于基本的单色彩，渐变色的文字使得页面更美观、传递的信息更准确直观。
2、现有的实现方案一般通过background属性或mask属性实现，但只在主流浏览器的新版本中得到了支持，且使用html2canvas截图预览时背景就会直接暴露出来，如通过css的background-clip属性实现文字渐变色的方案，通过background: linear-gradient为文字设置渐变背景颜色，然后通过color: transparent设置字体颜色为透明色，最后使用background-clip对背景进行裁剪，留下文本部分的背景。但是background-clip: text的兼容性并不好，一旦浏览器不兼容，使用html2canvas截图预览时背景就会直接暴露出来。
技术实现思路
1、本专利技术提供了一种文字渐变渲染方法、设备及存储介质，提供了一种高效稳定的文件渐变渲染方案，至少解决了现有的实现方案只在主流浏览器的新版本中得到了支持，且使用html2canvas截图预览时背景就会直接暴露出来的问题。
2、一方面，提供一种文字渐变渲染方法，包括：
3、获取第一渲染对象，根据所述第一渲染对象至少获得第一文本数据和第一渐变数据；
4、基于html创建第一svg标签；
5、根据所述第一文本数据在所述第一svg标签下创建第一文本元素；
6、根据所述第一渐变数据在所述第一svg标签下创建第一线性渐变元素；
7、建立所述第一文本元素与所述第一线性渐变元素的关联；
8、通过html2canvas截取所述第一svg标签下的元素，并将所述第一svg标签下的元素渲染到dom中进行展示。
9、本申请的有益效果为，通过基于在html创建svg标签，在svg标签下创建文本元素和创建线性渐变元素后建立文本元素与线性渐变元素的关联；最后通过html2canvas截取svg标签下的元素，并将svg标签下的元素渲染到dom中进行展示。采用上述方法，通过在svg标签下设置渐变的文字并通过html2canvas截取svg标签并渲染到dom中的方法，提供了一种高效稳定的文件渐变渲染方案，保证了渲染内容和预览内容的一致性，提升了用户的交互体验。至少解决了现有的实现方案只在主流浏览器的新版本中得到了支持，且使用html2canvas截图预览时背景就会直接暴露出来的问题。
10、可选的，所述根据所述第一渐变数据在所述第一svg标签下创建第一线性渐变元素的步骤，包括：
11、在所述第一svg标签下创建lineargradient元素；
12、根据所述第一渐变数据对所述lineargradient元素进行设置，获得设置后的所述lineargradient元素为第一线性渐变元素。
13、本申请的有益效果为，lineargradient元素在svg中可以定义一个线性渐变。其可以创建水平、垂直或角度渐变。当y1和y2的值相等，而x1和x2的值不同时，将创建水平渐变；当x1和x2的值相等，而y1和y2的值不同时，将创建垂直渐变；当y1和y2的值不同，并且x1和x2的值也不同时，将创建角度渐变，便于控制和使用。
14、可选的，所述第一渲染对象是css对象，所述根据所述第一渲染对象至少获得第一文本数据和第一渐变数据的步骤，包括：
15、根据所述css对象的背景颜色设置获得第一渐变数据；
16、根据所述css对象的文本内容获得第一文本数据。
17、本申请的有益效果为，当第一渲染对象是css对象时，可以通过代码中用于设置背景颜色的部分，如background-image来获得第一渐变数据；还可以通过代码中用于设置文字的部分，如-webkit-background-clip: text来获得第一文本数。通过代码来获取上述数据，准确性较高。
18、可选的，所述第一渲染对象的特征为背景区域是渐变色彩的白色或无色文字；
19、所述获取第一渲染对象的步骤，包括：
20、获取第一网页预览图，对所述第一网页预览图进行预处理，获得至少一个待识别图像；
21、将所述至少一个待识别图像输入的图像识别模型，判断所述至少一个待识别图像中是否包括所述第一渲染对象；
22、当所述至少一个待识别图像中包括所述第一渲染对象时，根据识别到的所述第一渲染对象在所述至少一个待识别图像中的坐标，在所述第一网页预览图中裁切出所述第一渲染对象。
23、本申请的有益效果为，采用上述方法，可以通过识别渲染出现问题时产生的图像，在进行测试时快速定位需要修改渲染方法的第一渲染对象，而不需要从头到尾对代码进行查找和识别，提高对问题对象和问题代码的定位效率。
24、可选的，所述对所述第一网页预览图进行预处理，获得至少一个待识别图像的步骤，包括：
25、将所述第一网页预览图中每个像素点的rgb转换到hsv空间，得到所述第一网页预览图每个像素点在所述hsv空间中对应的单点颜色值，所述hsv空间中的图像为所述待识别图像。
26、本申请的有益效果为，在颜色渐变识别中，hsv颜色空间通常比rgb颜色空间更有效。这主要是因为hsv颜色空间更符合人类对颜色的感知方式，它通过将颜色分解为色调、饱和度和亮度三个分量，使得颜色之间的比较和识别更加直观和简单。在rgb颜色空间中，虽然可以通过调整红、绿、蓝三个分量的值来改变颜色，但是这种改变并不直观，因为三个分量同时影响颜色的色调、饱和度和亮度。而在hsv颜色空间中，色调、饱和度和亮度三个分量是相互独立的，可以单独调整而不影响其他分量。这使得在hsv颜色空间中识别颜色渐变更加简单和准确。
27、可选的，所述根据所述第一渲染对象至少获得第一文本数据和第一渐变数据的步骤，包括：
28、根据所述第一渲染对象，提取所述第一渲染对象边缘区域像素点的颜色信息；
29、根据所述第一渲染对象边缘区域像素点的颜色信息，获得第一渐变数据；
30、根据所述第一渲染对象，通过文字识别技术，获得第一文本数据。
31、本申请的有益效果为，通过提取第一渲染对象边缘的像素点的颜色信息，可以快速的确定第一渲染对象的渐变数据，同时，通过文字识别技术可以快速获得第一渲染对象的文本数据，采用本方法，无需对第一渲染对象的代码进行识别，快速生成svg标签，也可以用于对第一渲染对象的代码进行识别的结果进行验证，提高识别结果的准确性。
32、可选的，所述第一网页预览图由html2canvas截取浏览器解析的第一html代码获得；
33、当所述本文档来自技高网...
【技术保护点】
1.一种文字渐变渲染方法，其特征在于，包括：
2.根据权利要求1所述的一种文字渐变渲染方法，其特征在于，所述根据所述第一渐变数据在所述第一SVG标签下创建第一线性渐变元素的步骤，包括：
3.根据权利要求1所述的一种文字渐变渲染方法，其特征在于，所述第一渲染对象是CSS对象，所述根据所述第一渲染对象至少获得第一文本数据和第一渐变数据的步骤，包括：
4.根据权利要求1所述的一种文字渐变渲染方法，其特征在于，所述第一渲染对象的特征为背景区域是渐变色彩的白色或无色文字；
5.根据权利要求4所述的一种文字渐变渲染方法，其特征在于，所述对所述第一网页预览图进行预处理，获得至少一个待识别图像的步骤，包括：
6.根据权利要求4所述的一种文字渐变渲染方法，其特征在于，所述根据所述第一渲染对象至少获得第一文本数据和第一渐变数据的步骤，包括：
7.根据权利要求4所述的一种文字渐变渲染方法，其特征在于，所述第一网页预览图由html2canvas截取浏览器解析的第一HTML代码获得；
8.根据权利要求7所述的一种文字渐变渲
9.根据权利要求1或7所述的一种文字渐变渲染方法，其特征在于，所述第一渲染对象是描述性文本或代码中的一种，所述根据所述第一渲染对象至少获得第一文本数据和第一渐变数据的步骤，包括：
10.根据权利要求1所述的一种文字渐变渲染方法，其特征在于，所述第一渲染对象是描述性文本，所述根据所述第一渲染对象至少获得第一文本数据和第一渐变数据的步骤，包括：
11.一种计算机设备，其特征在于，该计算机设备包括存储器和处理器，所述存储器中存储有计算机程序，所述处理器执行所述计算机程序，实现根据权利要求1-10中任一项所述的方法。
12.一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，处理器执行所述计算机程序，实现根据权利要求1-8中任一项所述的方法。
...【技术特征摘要】
1.一种文字渐变渲染方法，其特征在于，包括：
2.根据权利要求1所述的一种文字渐变渲染方法，其特征在于，所述根据所述第一渐变数据在所述第一svg标签下创建第一线性渐变元素的步骤，包括：
3.根据权利要求1所述的一种文字渐变渲染方法，其特征在于，所述第一渲染对象是css对象，所述根据所述第一渲染对象至少获得第一文本数据和第一渐变数据的步骤，包括：
4.根据权利要求1所述的一种文字渐变渲染方法，其特征在于，所述第一渲染对象的特征为背景区域是渐变色彩的白色或无色文字；
5.根据权利要求4所述的一种文字渐变渲染方法，其特征在于，所述对所述第一网页预览图进行预处理，获得至少一个待识别图像的步骤，包括：
6.根据权利要求4所述的一种文字渐变渲染方法，其特征在于，所述根据所述第一渲染对象至少获得第一文本数据和第一渐变数据的步骤，包括：
7.根据权利要求4所述的一种文字渐变渲染方法，其特征在于，所述第一网页预览图由html2ca...
【专利技术属性】
技术研发人员：请求不公布姓名，请求不公布姓名，请求不公布姓名，
申请(专利权)人：成都数之联科技股份有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。