[发明专利]网页水印添加方法、装置、电子设备及存储介质

说明书

本发明涉及人工智能技术领域，提供一种网页水印添加方法、装置、电子设备及存储介质，所述方法包括：获取多个水印元素及设备尺寸；根据每个水印元素的动态参数构建多个水印元素的索引；基于多个水印元素构建画布模板及用于绘制动态水印图像的Canvas元素；根据索引、Canvas元素的上下文环境参数及每个水印元素的静态参数和动态参数，在画布模板中绘制第一动态水印图像；并绘制到浏览器的canvas画布中得到第二动态水印图像；将第二动态水印图像添加在水印展示层上，得到动态水印网页。本发明通过将第二动态水印图像自动平铺到目标网页的水印展示层上，只需一个展示层，占用网页资源较少，提高了网页中添加水印的效率。

技术领域

本发明涉及人工智能技术领域，具体涉及一种网页水印添加方法、装置、电子设备及存储介质。

背景技术

相关技术中，在网页上添加水印时，现有技术一般通过计算网页在浏览器界面上的尺寸，换算出水印图像平铺覆盖整个网页所需的行和列；或者将水印内容在UI开发阶段导出图片，将图片作为重复背景图平铺整个网页。

然而，在换算出水印图像平铺覆盖整个网页过程中，由于浏览器界面的尺寸与水印图像像素差异较大，容易引起平铺元素过多，导致网页添加水印效率缓慢；而将水印内容在UI开发阶段导出的图片为静态图片，无法在网页中实现动态水印的添加。

因此，有必要提供一种可以实现在网页中添加动态水印及提高添加水印效率的方法。

发明内容

鉴于以上内容，有必要提出一种网页水印添加方法、装置、电子设备及存储介质，通过将第二动态水印图像自动平铺到目标网页的水印展示层上，只需一个展示层，占用网页资源较少，提高了网页中添加水印的效率。

本发明的第一方面提供一种网页水印添加方法，所述方法包括：

解析接收到的水印添加请求，获取多个水印元素及设备尺寸，其中，每个水印元素中包含有静态参数和动态参数；

根据每个所述水印元素的动态参数对应的动态显示时间构建所述多个水印元素的索引；

基于所述多个水印元素构建画布模板及用于绘制动态水印图像的Canvas元素；

根据所述索引、所述Canvas元素的上下文环境参数及每个所述水印元素的静态参数和动态参数，在所述画布模板中绘制第一动态水印图像；

将所述第一动态水印图像绘制到浏览器的canvas画布中得到第二动态水印图像；

在所述浏览器的目标网页上加载水印展示层，根据所述水印展示层的渲染背景样式及所述设备尺寸将所述第二动态水印图像添加在所述水印展示层上，得到动态水印网页。

可选地，所述根据所述索引、所述Canvas元素的上下文环境参数及每个所述水印元素的静态参数和动态参数，在所述画布模板中绘制第一动态水印图像包括：

调用浏览器的canvas画布的应用程序编码接口获取每个所述水印元素的静态参数和动态参数；

在所述画布模板中设置每个所述水印元素的文字区域；

基于所述canvas元素的上下文环境参数，按照所述索引的顺序逐一将每个所述水印元素的静态参数和动态参数绘制在所述画布模板对应的文字区域中，生成第一动态水印图像。

可选地，所述在所述画布模板中设置每个所述水印元素的文字区域包括：

从每个所述水印元素的静态参数中获取每个所述水印元素的位置信息；

根据每个所述水印元素的位置信息确定每个所述水印元素的覆盖面积及目标位置信息；

根据所述每个所述水印元素的覆盖面积及目标位置信息确定每个所述水印元素的文字区域。