var observer = new MutationObserver(function (mutationsList, observer) {
mutationsList.forEach(item => {
if (item.removedNodes.length > 0) {
item.removedNodes.forEach(removeNode => {
if (isMonitoring(removeNode)) {
item.target.appendChild(removeNode)
document.querySelectorAll('.monitoring').forEach(item => {
observer.observe(item.parentNode, { attributes: true, childList: true, subtree: true })
如果上面的 svg 动态方案还是觉得不妥，建议就直接使用 watermark-dom - 基于 DOM 对象实现的 BS 系统的水印
这个库实现的思路其实和上文描述的差不多，唯一的区别就是为了防篡改，他们就连水印的内容也都是用 div 渲染的。这样就能很好的触发监听，防止篡改和删除了
并且用了 影子节点(shadow-root) 这种节点必须通过 js 创建，然后内部的样式不受外部的控制和影响
一些比较重要的样式，都用了 style="pointer-events: none !important; display: block !important" 的形式（行内样式+import，神仙来了都覆盖不了你的样式，加上 dom 节点的监听，根本删不掉这段样式，就能保证一直存在了）。不过千算万算少算了一步就是透明度和样式的问题（待会就去提个 issues）
这也侧面说明（前端没有绝对的安全），不过这个库已经把非常多的情况考虑进去了（主要是有现成的轮子）
使用 svg 代替 canvas 做水印其实也是为了方便快捷，减少了 canvas 的渲染导出图片的操作，很好的利用了 svg 可以作为背景图的特性
加上 svg 转换工具，配合 css 变量已经可以实现很丰富的动态水印效果了。如果在加上 MutationObserver 的加持，安全性可以更进一步
以上都是简单的理论知识和简单的 demo，使用的话还是推荐 watermark-dom - 基于 DOM 对象实现的 BS 系统的水印
图片及文字水印，其中文字水印可以用从后台传过来的数据。 IE9及以上浏览器。id 要加水印的区域；watermarkImg 水印为图片的图片url；watermarkText 水印文字；
例如：<body onLoad="watermarkWord('shuiyinTest','logo路径.jpg','保密文件，禁止泄露')">这样，在body中用onload自动加载水印的js(watermarkWord)。watermarkWor是一个参数：<canvas id="shuiyinTest"></canvas>。第二个参数是图片路径。第三个参数是文字信息（可动态）。
let setWatermark = (str) => {
let id = '1.23452384164.123412416';
if (document.getElementById(id) !== null) {
document.body.removeChild(document.getElementById(id));
//创建一个画布
let can = document.createElement('canvas');
<template>
<div @contextmenu.prevent="menuPlayer()">
<video-player id="myVideo" class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true" :options="playerOptions">
</video-player>
</templ
vue页面如何引入
svg图标
在做图标展示时，一般
使用fontawesome图标库，只用简单并且只需要下载并引入即可。npm install font-awesome --save
但是发现身边也有人
使用阿里巴巴的incofont，下载选择
svg文件引入，具体封装和配置方法如下示：
以下操作是参考了已有框架的代码进行整理
1、在src/components下
创建文件夹，命名为
SvgIcon，并再
SvgIcon文件夹下，新增目录index.
vue文件：
最近文章文档频繁被用户截屏，所以新派发了一个需求，给文章文档添加
水印功能。
用户在上传文章、上传文档时，可选择是否需要加
水印。
if(this.detail.waterMark){ //判断该篇文章是否加
水印
this.addWaterMarker()
addWaterMarker() {
// 这里限制了不超过10个字，实际按需求来
let str = this.userInfo.account
var cpyName = str;
There are two kinds of watermarks regularly used in web development:
Web开发中经常使用两种水印：
Page watermarks, used to enhance brand awareness.
页面水印，用于增强品牌知名度。 Image and video watermarks, used to declare ow...
记录一下前端添加水印，动态水印字体大小、间距
项目里需要对图片添加整片的水印最开始是直接引用这位大佬的。前端js实现给图片添加水印
这个大佬的方法里水印密度是手动传入的，对于同一个图片上传器。密度是固定的，或者说，对于同一个页面里的水印添加方法要实现传入不同的水印密度，就要多次调用，所以实际应用中，当窄图片和宽图片用同样的密度，即使缩小了字体，也会出现水印密密麻麻重叠的问题。并且水印字体的大小也区分的比较生硬。所以在此文代码基础上做了些修改以实现简单的动态字体大小、间距。
新建一个waterMarker.j
