当前位置: 首页 > 网络应用技术

使用SVG创建动态水印含量

时间:2023-03-06 20:55:58 网络应用技术

  查看CSS+SVG效果演示

  相关非常强大的库推荐:水印 - 基于DOM对象的BS系统的水标

  首先将传统的动态水印与画布相应地呈现,以生成透明的PNG。

  然后使用或覆盖需要与水印添加的节点,以实现添加水印的效果

  传统方式有一些问题:

  对于以上两个问题,仍然有解决方案的方法

  使用SVG的想法非常简单,即可以正常显示的特征(毕竟,SVG实际上是一张特殊的图片)。

  准备SVG,SVG的复杂原理不会深入。让我们来谈谈您这次需要使用哪种最基本的SVG的内容:

  这是基础的介绍。

  当您看到Demo-1时,您会发现静态水印是如此简单。

  该方需要一些预知,例如CSS变量和文本转换工具在线转换工具。

  实施的总体思维也可以转介给Zhang Xinxu-如何将文本显示为CSS背景图片?

  一般来说:

  数据:Image/svg+XML将其用文本转换为SVG图像在线转换工具

  此时,我们已将文件类型的SVG转换为页面上的SVG。接下来,我们只需要替换水印的关键字,动态水印将获得一半的成功

  让我们先谈谈CSS变量。写作如下。如果您不了解,请重复观看CSS变量并背诵全文:

  在CSS变量定义成功之后,很容易用JS控制CSS变量

  添加一些简单的控件,例如:

  在这一点上,动态SVG已实现。SVG动态后,SVG水印作为背景已经动态变化(特定效果可以看到Demo-2)

  完成上面的步骤后,没有问题,但是毕竟涵盖了一层水印,一些点击事件/拖动事件无法渗透。任何事件,所有事件都渗透到了下一个级别

  众所周知,前端没有秘密。上面提到的内容包括演示1至demo-4。打开控制台可以轻松删除水印的水印层。

  引入另一个非常重要的API突变操作程序

  简而言之,当听到水印层时,它将立即重新制作一个水印层(因为您想听听DOM的变化,因此此时无法使用水印,您必须使用水印,您必须转到Div层进行水印))))

  但是,如果我们直接收听。如果直接删除了此层,他将不会触发监视事件,因此我们必须使用WaterMark+内容进行监视,打开监视器的配置,并聆听下面的子节点的更改这个div。

  当显示监视对象时,将删除DIV。如果您删除了水印层

  样式样式相似,但我们必须将所有样式写为内部样式,我们不应尽可能保留CSS文件控制样式,以便即使您想添加样式,也必须修改样式标签DOM节点,以便我们可以触发监视,因此将样式变换为防止篡改的目的(特定的实现可以看到Demo-5)

  如果上面的SVG动态解决方案仍然感觉不合适,建议使用基于DOM对象的Watermark -dom -bs系统水印

  该库的想法实际上类似于上述。唯一的区别是防止篡改。他们甚至渲染了水印的内容。这可以很好地触发监视,防止篡改和删除

  并且必须通过JS创建该节点,然后内部样式不受外部控制的控制和影响

  一些更重要的样式以形式使用(内部样式+导入,仙女无法覆盖您的样式,以及对DOM节点的监视,您根本无法删除此样式,您可以保证它始终存在)。但是,一个步骤少于一个步骤,这是透明和风格的问题(我稍后会提到)

  这也解释了(前端没有绝对安全性),但是该库已考虑了很多(主要是准备好车轮)

  使用SVG而不是画布进行水印实际上是为了方便而快速,从而减少了画布的渲染和导出图片的操作。

  再加上SVG转换工具,以及CSS变量,它可以实现丰富的动态水印效应。

  以上是简单的理论知识和简单的演示。如果您使用它,它仍然由基于DOM对象的WaterMark -dom-水印推荐

  原始:https://juejin.cn/post/7103736071933919262