CN117892698B

CN117892698B - 一种文字渐变渲染方法、设备及存储介质

Info

Publication number: CN117892698B
Application number: CN202410291266.XA
Authority: CN
Inventors: 请求不公布姓名
Original assignee: Chengdu Shuzhilian Technology Co Ltd
Current assignee: Chengdu Shuzhilian Technology Co Ltd
Priority date: 2024-03-14
Filing date: 2024-03-14
Publication date: 2024-06-07
Anticipated expiration: 2044-03-14
Also published as: CN117892698A

Abstract

本申请公开了一种文字渐变渲染方法、设备及存储介质，通过基于在HTML创建SVG标签，在SVG标签下创建文本元素和创建线性渐变元素后建立文本元素与线性渐变元素的关联；最后通过html2canvas截取SVG标签下的元素，并将SVG标签下的元素渲染到DOM中进行展示。采用上述方法，通过在SVG标签下设置渐变的文字并通过html2canvas截取SVG标签并渲染到DOM中的方法，提供了一种高效稳定的文件渐变渲染方案，保证了渲染内容和预览内容的一致性，提升了用户的交互体验。至少解决了现有的实现方案只在主流浏览器的新版本中得到了支持，且使用html2canvas截图预览时背景就会直接暴露出来的问题。

Description

一种文字渐变渲染方法、设备及存储介质

技术领域

本申请涉及互联网技术领域，尤其涉及一种文字渐变渲染方法、设备及存储介质。

背景技术

随着互联网技术的发展，用户对于前端页面的交互要求越来越高，且要求页面越来越美观。文字，作为页面信息的载体，作为传递信息最重要的组成部分之一，人们已经不再满足于基本的单色彩，渐变色的文字使得页面更美观、传递的信息更准确直观。

现有的实现方案一般通过background属性或mask属性实现，但只在主流浏览器的新版本中得到了支持，且使用html2canvas截图预览时背景就会直接暴露出来，如通过css的background-clip属性实现文字渐变色的方案，通过background: linear-gradient为文字设置渐变背景颜色，然后通过color: transparent设置字体颜色为透明色，最后使用background-clip对背景进行裁剪，留下文本部分的背景。但是background-clip: text的兼容性并不好，一旦浏览器不兼容，使用html2canvas截图预览时背景就会直接暴露出来。

发明内容

本发明提供了一种文字渐变渲染方法、设备及存储介质，提供了一种高效稳定的文件渐变渲染方案，至少解决了现有的实现方案只在主流浏览器的新版本中得到了支持，且使用html2canvas截图预览时背景就会直接暴露出来的问题。

一方面，提供一种文字渐变渲染方法，包括：

获取第一渲染对象，根据所述第一渲染对象至少获得第一文本数据和第一渐变数据；

基于HTML创建第一SVG标签；

根据所述第一文本数据在所述第一SVG标签下创建第一文本元素；

根据所述第一渐变数据在所述第一SVG标签下创建第一线性渐变元素；

建立所述第一文本元素与所述第一线性渐变元素的关联；

通过html2canvas截取所述第一SVG标签下的元素，并将所述第一SVG标签下的元素渲染到DOM中进行展示。

本申请的有益效果为，通过基于在HTML创建SVG标签，在SVG标签下创建文本元素和创建线性渐变元素后建立文本元素与线性渐变元素的关联；最后通过html2canvas截取SVG标签下的元素，并将SVG标签下的元素渲染到DOM中进行展示。采用上述方法，通过在SVG标签下设置渐变的文字并通过html2canvas截取SVG标签并渲染到DOM中的方法，提供了一种高效稳定的文件渐变渲染方案，保证了渲染内容和预览内容的一致性，提升了用户的交互体验。至少解决了现有的实现方案只在主流浏览器的新版本中得到了支持，且使用html2canvas截图预览时背景就会直接暴露出来的问题。

可选的，所述根据所述第一渐变数据在所述第一SVG标签下创建第一线性渐变元素的步骤，包括：

在所述第一SVG标签下创建linearGradient元素；

根据所述第一渐变数据对所述linearGradient元素进行设置，获得设置后的所述linearGradient元素为第一线性渐变元素。

本申请的有益效果为，linearGradient元素在SVG中可以定义一个线性渐变。其可以创建水平、垂直或角度渐变。当y1和y2的值相等，而x1和x2的值不同时，将创建水平渐变；当x1和x2的值相等，而y1和y2的值不同时，将创建垂直渐变；当y1和y2的值不同，并且x1和x2的值也不同时，将创建角度渐变，便于控制和使用。

可选的，所述第一渲染对象是CSS对象，所述根据所述第一渲染对象至少获得第一文本数据和第一渐变数据的步骤，包括：

根据所述CSS对象的背景颜色设置获得第一渐变数据；

根据所述CSS对象的文本内容获得第一文本数据。

本申请的有益效果为，当第一渲染对象是CSS对象时，可以通过代码中用于设置背景颜色的部分，如background-image来获得第一渐变数据；还可以通过代码中用于设置文字的部分，如-webkit-background-clip: text来获得第一文本数。通过代码来获取上述数据，准确性较高。

可选的，所述第一渲染对象的特征为背景区域是渐变色彩的白色或无色文字；

所述获取第一渲染对象的步骤，包括：

获取第一网页预览图，对所述第一网页预览图进行预处理，获得至少一个待识别图像；

将所述至少一个待识别图像输入到图像识别模型，判断所述至少一个待识别图像中是否包括所述第一渲染对象；

当所述至少一个待识别图像中包括所述第一渲染对象时，根据识别到的所述第一渲染对象在所述至少一个待识别图像中的坐标，在所述第一网页预览图中裁切出所述第一渲染对象。

本申请的有益效果为，采用上述方法，可以通过识别渲染出现问题时产生的图像，在进行测试时快速定位需要修改渲染方法的第一渲染对象，而不需要从头到尾对代码进行查找和识别，提高对问题对象和问题代码的定位效率。

可选的，所述对所述第一网页预览图进行预处理，获得至少一个待识别图像的步骤，包括：

将所述第一网页预览图中每个像素点的RGB转换到HSV空间，得到所述第一网页预览图每个像素点在所述HSV空间中对应的单点颜色值，所述HSV空间中的图像为所述待识别图像。

本申请的有益效果为，在颜色渐变识别中，HSV颜色空间通常比RGB颜色空间更有效。这主要是因为HSV颜色空间更符合人类对颜色的感知方式，它通过将颜色分解为色调、饱和度和亮度三个分量，使得颜色之间的比较和识别更加直观和简单。在RGB颜色空间中，虽然可以通过调整红、绿、蓝三个分量的值来改变颜色，但是这种改变并不直观，因为三个分量同时影响颜色的色调、饱和度和亮度。而在HSV颜色空间中，色调、饱和度和亮度三个分量是相互独立的，可以单独调整而不影响其他分量。这使得在HSV颜色空间中识别颜色渐变更加简单和准确。

可选的，所述根据所述第一渲染对象至少获得第一文本数据和第一渐变数据的步骤，包括：

根据所述第一渲染对象，提取所述第一渲染对象边缘区域像素点的颜色信息；

根据所述第一渲染对象边缘区域像素点的颜色信息，获得第一渐变数据；

根据所述第一渲染对象，通过文字识别技术，获得第一文本数据。

本申请的有益效果为，通过提取第一渲染对象边缘的像素点的颜色信息，可以快速的确定第一渲染对象的渐变数据，同时，通过文字识别技术可以快速获得第一渲染对象的文本数据，采用本方法，无需对第一渲染对象的代码进行识别，快速生成SVG标签，也可以用于对第一渲染对象的代码进行识别的结果进行验证，提高识别结果的准确性。

可选的，所述第一网页预览图由html2canvas截取浏览器解析的第一HTML代码获得；

当所述至少一个待识别图像中包括所述第一渲染对象时，还包括以下步骤：

根据识别到的所述第一渲染对象在所述至少一个待识别图像中的坐标，获得所述第一渲染对象在所述第一网页预览图中的第一坐标；

根据所述第一坐标，获得所述第一渲染对象在所述第一HTML代码中对应的代码；

所述根据所述第一渲染对象至少获得第一文本数据和第一渐变数据的步骤，包括：

根据所述第一渲染对象在所述第一HTML代码中对应的代码至少获得第一文本数据和第一渐变数据。

本申请的有益效果为，通过上述方法，根据第一渲染对象在网页中的位置，可以快速在网页的全部代码中定位第一渲染对象对应的代码，根据第一渲染对象对应的代码可以直接获得第一文本数据和第一渐变数据，有效的提高了获得第一文本数据和第一渐变数据的效率。

所述建立所述第一文本元素与所述第一线性渐变元素的关联的步骤之后，还包括：

根据所述第一SVG标签，使用所述第一SVG标签下的代码替换所述第一渲染对象在所述第一HTML代码中对应的代码。

本申请的有益效果为，采用上述方法，可以快速的完成对原网页代码的修改，提高本方法的自动化程度，提高效率。

所述第一渲染对象是描述性文本或代码中的一种，所述根据所述第一渲染对象至少获得第一文本数据和第一渐变数据的步骤，包括：

根据所述第一渲染对象，使用与第一文本数据和第一渐变数据匹配的关键词，根据预设的正则表达式，获得第一文本数据和第一渐变数据。

本申请的有益效果为，采用上述方法时，第一渲染对象是描述性文本或代码中的一种，我们可以通过“颜色”、“linear-gradient”等关键词结合正则表达式的方法快速的从描述性文本或代码中提取我们需要的参数或信息，同时，使用本方法，对系统资源的占用较低，处理效率较高。

所述第一渲染对象是描述性文本，所述根据所述第一渲染对象至少获得第一文本数据和第一渐变数据的步骤，包括：

根据所述第一渲染对象，将所述第一渲染对象输入预训练的NLP模型中；

根据所述预训练的NLP模型，获得第一文本数据和第一渐变数据。

本申请的有益效果为，采用上述方法时，第一渲染对象是描述性文本，由于不同用户的描述习惯不同，使用的关键词也不一定相同，如果使用关键词结合正则表达式的方法，我们需要消耗大量的精力在关键词库和正则表达式的维护和更新上，因此，我们还可以通过预训练的NLP模型来获得第一文本数据和第一渐变数据，提高第一文本数据和第一渐变数据提取的成功率，降低日常维护的投入。

再一方面，本发明内容也公开了一种计算机设备，该计算机设备包括存储器和处理器，所述存储器中存储有计算机程序，所述处理器执行所述计算机程序，实现上述方法。

再一方面，本发明内容也公开了一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，处理器执行所述计算机程序，实现上述方法。

附图说明

为了更清楚地说明本申请具体实施方式或现有技术中的技术方案，下面将对具体实施方式或现有技术描述中所需要使用的附图作简单的介绍。在所有附图中，类似的元件或部分一般由类似的附图标记标识。附图中，各元件或部分并不一定按照实际的比例绘制。

图1为本申请中一种文字渐变渲染方法的流程示意图；

图2为文字渐变渲染的期望示意图；

图3为图2的灰度图；

图4为使用现有技术进行渲染不兼容时的示意图；

图5为图4的灰度图。

本申请目的的实现、功能特点及优点将结合实施例，参照附图做进一步说明。

具体实施方式

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

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

实施例1

如图1所示，本实施例提供一种文字渐变渲染方法，包括：

S1、获取第一渲染对象，根据第一渲染对象至少获得第一文本数据和第一渐变数据；

可选的，可以根据用户的输入获取第一渲染对象，具体的，用户可以通过前端设备的UI界面输入需要进行渐变渲染的文本，同时，用户还可以通过前端设备的UI界面对渐变数据进行设置，用户输入的文本和设置的渐变数据即是第一文本数据和第一渐变数据。

可选的，第一渲染对象是用户输入的CSS对象或根据用户输入从目标代码中获取的CSS对象，根据第一渲染对象至少获得第一文本数据和第一渐变数据的步骤，包括：

根据CSS对象的背景颜色设置获得第一渐变数据；

根据CSS对象的文本内容获得第一文本数据。

具体的，一个CSS对象的代码示例：

<title>渐变文字效果</title>

<style>

.gradient-text {

background-image: linear-gradient(to right, blue, yellow);

-webkit-background-clip: text;

color: transparent;

font-size: 50px;

font-family: Arial, sans-serif;

}

</style>

</head>

<body>

其中：<title>渐变文字效果</title>用于设置网页的标题为“渐变文字效果”；

.gradient-text {...}用于定义一个名为“gradient-text”的CSS类，用于设置具有该类的元素的样式；

background-image: linear-gradient(to right, blue, yellow)用于设置背景图像为从左到右的线性渐变，颜色依次为蓝色和黄色；

-webkit-background-clip: text用于使用WebKit浏览器（如Chrome和Safari）的CSS属性将背景图像裁剪到文本区域；

color: transparent用于设置文本颜色为透明，以便背景图像可见；

font-size: 50px用于设置字体大小为50像素；

font-family: Arial, sans-serif用于设置字体为Arial或无衬线字体；

</style>用于结束样式表的定义；

</head>用于结束头部信息的定义；

<body>用于定义文档的主体部分；

<h1 class="gradient-text">文字渐变</h1>用于创建一个内容为“文字渐变”的一级标题，并为其添加“gradient-text”类，以应用上述样式；

在该示例中，通过<h1 class="gradient-text">文字渐变</h1>获得第一文本数据中的文字内容为“文字渐变”，通过font-size: 50px获得第一文本数据中的文字大小为50像素，通过font-family: Arial, sans-serif获得第一文本数据中的文字字体为Arial或无衬线字体；通过background-image: linear-gradient(to right, blue, yellow)获得第一渐变数据为从左到右的线性渐变，颜色依次为蓝色和黄色。

可选的，上述代码可以是用户直接输入的，也可以是根据用户设置的关键字、正则表达式或其他规则从指定的目标代码中进行截取的。

可选的，第一渲染对象还可以通过图像识别进行获取，第一渲染对象的特征为背景区域是渐变色彩的白色或无色文字；

获取第一渲染对象的步骤，包括：

获取第一网页预览图，对第一网页预览图进行预处理，获得至少一个待识别图像；

将至少一个待识别图像输入到图像识别模型，判断至少一个待识别图像中是否包括第一渲染对象；

当至少一个待识别图像中包括第一渲染对象时，根据识别到的第一渲染对象在至少一个待识别图像中的坐标，在第一网页预览图中裁切出第一渲染对象。

如图2-图5所示，本方案主要是针对图3中在渲染出现不兼容情况时，对不兼容的渲染图像进行识别，并自动提取不兼容部分的图像，根据不兼容部分的图像获得第一渲染对象。用户期望的渲染结果如图2所示，但是，当渲染出现不兼容情况时，使用html2canvas截图预览时背景就会直接暴露出来，如图3所示。用户可以通过本方案，在网页预览图中识别是否存在渲染不兼容的情况，如果识别到有背景区域是渐变色彩的白色或无色文字时，说明存在渲染不兼容的情况，该背景区域是渐变色彩的白色或无色文字即该背景区域就是第一渲染对象，通过识别第一渲染对象在第一网页预览图中的坐标，对第一渲染对象进行裁切。

可选的，在上述方案的基础上，还可以通过识别第一渲染对象在第一网页预览图中的坐标，根据第一网页预览图的代码，获得第一渲染对象对应的代码。

可选的，在上述方案的基础上，还可以通过识别第一渲染对象中的文字，根据第一网页预览图的代码，获得第一渲染对象对应的代码。具体的，在图3中，通过OCR技术，我们可以获得第一渲染对象对应的文字为“文字渐变”，将“文字渐变”作为关键字在图3对应的源代码中进行遍历，再结合包括“-webkit-background-clip”关键字正则判断，就可以识别出源代码中与第一渲染对象对应的代码。

可选的，对第一网页预览图进行预处理，获得至少一个待识别图像的步骤，包括：

将第一网页预览图中每个像素点的RGB转换到HSV空间，得到第一网页预览图每个像素点在HSV空间中对应的单点颜色值，HSV空间中的图像为待识别图像。

具体的，上述方案可以通过以下Python代码实现：

import cv2

import numpy as np

def detect_gradient(image):

hsv = cv2.cvtColor(image, cv2.COLOR_BGR2HSV)

lower_yellow = np.array([100, 43, 46])

upper_yellow = np.array([124, 255, 255])

mask = cv2.inRange(hsv, lower_yellow, upper_yellow)

kernel = np.ones((5, 5), np.uint8)

mask = cv2.dilate(mask, kernel, iterations=1)

contours, _ = cv2.findContours(mask, cv2.RETR_EXTERNAL, cv2.CHAIN_APPROX_SIMPLE)

for contour in contours:

x, y, w, h = cv2.boundingRect(contour)

cv2.rectangle(image, (x, y), (x + w, y + h), (0, 255, 0), 2)

return image

image = cv2.imread('input.jpg')

result = detect_gradient(image)

cv2.imshow('Result', result)

cv2.waitKey(0)

cv2.destroyAllWindows()

上述代码首先将输入的RGB图像转换为HSV空间，然后根据预定义的颜色范围（代码中为黄色）创建一个掩码。接下来，对掩码进行膨胀操作，以便更好地检测渐变图案。最后，查找轮廓并在原始图像上绘制边界框，边界框内的图像就是第一渲染对象。

可选的，根据第一渲染对象至少获得第一文本数据和第一渐变数据的步骤，包括：

可选的，第一网页预览图由html2canvas截取浏览器解析的第一HTML代码获得；

当至少一个待识别图像中包括第一渲染对象时，还包括以下步骤：

根据识别到的第一渲染对象在至少一个待识别图像中的坐标，获得第一渲染对象在第一网页预览图中的第一坐标；

根据第一坐标，获得第一渲染对象在第一HTML代码中对应的代码；

根据第一SVG标签，使用第一SVG标签下的代码替换第一渲染对象在第一HTML代码中对应的代码。

具体的，本方案可以通过以下javascript代码实现：

function getElementByCoordinates(x, y) {

return document.elementFromPoint(x, y);

}

var x = 100;

var y = 200;

var element = getElementByCoordinates(x, y);

console.log(element);

上述函数获取坐标x=100，y=200处的元素，并将该元素输出到控制台，获取该元素后，我们可以根据该元素对应的CSS代码或其他代码至少获得第一文本数据和第一渐变数据。

可选的，所述建立所述第一文本元素与所述第一线性渐变元素的关联的步骤之后，还包括：

在第一SVG标签完成后，我们可以根据第一SVG标签，使用第一SVG标签下的代码替换第一渲染对象在第一HTML代码中对应的代码。

S2、基于HTML创建第一SVG标签；

可选的，在HTML中，创建<svg>标签和<defs>标签；

<defs>标签定义了一组图形对象，这些对象可以在其他SVG元素中使用。在这里，它包含了一个线性渐变的定义；

S3、根据第一文本数据在第一SVG标签下创建第一文本元素；

可选的，在HTML中，创建<text>标签；

<text>标签用于在SVG图像中添加文本内容；

<text>标签包括：文本内容的起始位置、文本的样式和文本的内容。

S4、根据第一渐变数据在第一SVG标签下创建第一线性渐变元素；

可选的，根据第一渐变数据在第一SVG标签下创建第一线性渐变元素的步骤，包括：

在第一SVG标签下创建linearGradient元素；

根据第一渐变数据对linearGradient元素进行设置，获得设置后的linearGradient元素为第一线性渐变元素。

可选的，在HTML中，创建<linearGradient>标签，<linearGradient>标签包括：唯一的标识符、渐变的起始点和终止点的坐标、渐变中的停止点、每个停止点的偏移量、每个停止点的颜色和透明度等。

S5、建立第一文本元素与第一线性渐变元素的关联；

具体的，以图2为例，创建第一SVG标签的代码为：

<svg>

<defs>

</linearGradient>

</defs>

</svg>

通过上述代码，可以创建一个内容为“文字渐变”的，大小为50像素的text元素，该SVG标签通过linearGradient 元素进行渐变色控制，并通过将SVG的text元素的fill属性指定为linearGradient 元素的id来实现的“文字渐变”的渐变效果；

其中，<svg>标签是SVG图像的根元素；

<linearGradient>标签定义了一个线性渐变，通过指定起始点和终止点的坐标来创建渐变效果。在这个例子中，渐变从蓝色开始，然后过渡到黄色；

id="grad" 属性为渐变定义了一个唯一的标识符，以便在其他地方引用它；

x1="0%" y1="0%" 和 x2="100%" y2="0%" 分别指定了渐变的起始点和终止点的坐标。这里的坐标表示相对于SVG容器的百分比位置，在没有获取到该参数时，该参数为默认的或用户根据需要手动设置的；

<stop>标签定义了渐变中的停止点，每个停止点都有一个偏移量和一个颜色值。在这个例子中，第一个停止点位于渐变的起始点，颜色为蓝色；第二个停止点位于渐变的终止点，颜色为黄色，在没有获取到该参数时，该参数为默认的或用户根据需要手动设置的；

offset="0%" 和 offset="100%" 分别指定了每个停止点的偏移量，表示相对于渐变长度的位置，在没有获取到该参数时，该参数为默认的或用户根据需要手动设置的；

style="stop-color:blue; stop-opacity:1" 和 style="stop-color:yellow;stop-opacity:1" 分别设置了每个停止点的颜色和透明度，在没有获取到该参数时，该参数为默认的或用户根据需要手动设置的；

<text>标签用于在SVG图像中添加文本内容；

x="0" y="50" 指定了文本内容的起始位置；

fill="url(#grad)" 将文本的填充颜色设置为之前定义的线性渐变；

style="font-size:50px; font-family: Arial" 设置了文本的样式，包括字体大小和字体家族。

S6、通过html2canvas截取第一SVG标签下的元素，并将第一SVG标签下的元素渲染到DOM中进行展示。

可选的，通过使用html2canvas将SVG内容转换为canvas，再将canvas添加到DOM中的方式，可以实现上述方案。

具体的，通过以下javascript代码可以实现上述步骤：

const svgElement = document.querySelector('svg');

html2canvas(svgElement).then(canvas =>{

const container = document.createElement('div');

container.appendChild(canvas);

document.body.appendChild(container);

});

上述代码通过JavaScript获取SVG元素，并使用html2canvas将其内容转换为canvas，最后再渲染到DOM中。

可选的，所述第一渲染对象是描述性文本或代码中的一种，所述根据所述第一渲染对象至少获得第一文本数据和第一渐变数据的步骤，包括：

本申请的有益效果为，采用上述方法时，第一渲染对象是描述性文本或代码中的一种，我们可以通过“颜色”、“linear-gradient”等关键词结合正则表达式的方法快速的从描述性文本或代码中提取我们需要的参数或信息。

可选的，第一渲染对象是描述性文本，根据第一渲染对象至少获得第一文本数据和第一渐变数据的步骤，包括：

根据第一渲染对象，将第一渲染对象输入预训练的NLP模型中；

根据预训练的NLP模型，获得第一文本数据和第一渐变数据。

具体的，第一渲染对象是“将‘文字渐变’这几个字设计成蓝黄渐变，大小是50像素，字体为Arial”，通过将该对象输入预训练的NLP模型中，可以识别出第一文本数据的文字内容为“文字渐变”，该文字的样式为“font-size:50px; font-family: Arial”；第一渐变数据为“<stop offset="0%" style="stop-color:blue;/>、<stop offset="100%"style="stop-color:yellow; />”等。

实施例2

本实施例提供一种计算机设备，该计算机设备包括存储器和处理器，存储器中存储有计算机程序，处理器执行计算机程序，实现上述任一方法。

实施例3

本实施例提供一种计算机可读存储介质，计算机可读存储介质上存储有计算机程序，处理器执行计算机程序，实现上述任一方法。

在一些实施例中，计算机可读存储介质可以是FRAM、ROM、PROM、EPROM、EEPROM、闪存、磁表面存储器、光盘、或CD-ROM等存储器；也可以是包括上述存储器之一或任意组合的各种设备。计算机可以是包括智能终端和服务器在内的各种计算设备。

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

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

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

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

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

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

Claims

1.一种文字渐变渲染方法，其特征在于，包括：

基于HTML创建第一SVG标签；

建立所述第一文本元素与所述第一线性渐变元素的关联；

通过html2canvas截取所述第一SVG标签下的元素，并将所述第一SVG标签下的元素渲染到DOM中进行展示；

所述第一渲染对象的特征为背景区域是渐变色彩的白色或无色文字；

所述获取第一渲染对象的步骤，包括：

当所述至少一个待识别图像中包括所述第一渲染对象时，根据识别到的所述第一渲染对象在所述至少一个待识别图像中的坐标，在所述第一网页预览图中裁切出所述第一渲染对象；

所述第一网页预览图由html2canvas截取浏览器解析的第一HTML代码获得；

根据所述第一渲染对象在所述第一HTML代码中对应的代码至少获得第一文本数据和第一渐变数据；

2.根据权利要求1所述的一种文字渐变渲染方法，其特征在于，所述根据所述第一渐变数据在所述第一SVG标签下创建第一线性渐变元素的步骤，包括：

在所述第一SVG标签下创建linearGradient元素；

3.根据权利要求1所述的一种文字渐变渲染方法，其特征在于，所述第一渲染对象是CSS对象，所述根据所述第一渲染对象至少获得第一文本数据和第一渐变数据的步骤，包括：

根据所述CSS对象的背景颜色设置获得第一渐变数据；

根据所述CSS对象的文本内容获得第一文本数据。

4.根据权利要求1所述的一种文字渐变渲染方法，其特征在于，所述对所述第一网页预览图进行预处理，获得至少一个待识别图像的步骤，包括：

5.根据权利要求1所述的一种文字渐变渲染方法，其特征在于，所述根据所述第一渲染对象至少获得第一文本数据和第一渐变数据的步骤，包括：

6.根据权利要求1所述的一种文字渐变渲染方法，其特征在于，所述第一渲染对象是描述性文本或代码中的一种，所述根据所述第一渲染对象至少获得第一文本数据和第一渐变数据的步骤，包括：

7.根据权利要求1所述的一种文字渐变渲染方法，其特征在于，所述第一渲染对象是描述性文本，所述根据所述第一渲染对象至少获得第一文本数据和第一渐变数据的步骤，包括：

8.一种计算机设备，其特征在于，该计算机设备包括存储器和处理器，所述存储器中存储有计算机程序，所述处理器执行所述计算机程序，实现根据权利要求1-7中任一项所述的方法。

9.一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，处理器执行所述计算机程序，实现根据权利要求1-7中任一项所述的方法。