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

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

【技术实现步骤摘要】

本申请涉及互联网,尤其涉及一种文字渐变渲染方法、设备及存储介质


技术介绍

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

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


技术实现思路...

【技术保护点】

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

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

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

4.根据权利要求1所述的一种文字渐变渲染方法,其特征在于,所述第一渲染对象的特征为背景区域是渐变色彩的白色或无色文字;

5.根据权利要求4所述的一种文字渐变渲染方法,其特征在于,所述对所述第一网页预...

【技术特征摘要】

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

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

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

4.根据权利要求1所述的一种文字渐变渲染方法,其特征在于,所述第一渲染对象的特征为背景区域是渐变色彩的白色或无色文字;

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

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

7.根据权利要求4所述的一种文字渐变渲染方法,其特征在于,所述第一网页预览图由html2ca...

【专利技术属性】
技术研发人员:请求不公布姓名请求不公布姓名请求不公布姓名
申请(专利权)人:成都数之联科技股份有限公司
类型:发明
国别省市:

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

1