前端 - 这种vue管理后台显示登陆人名字背景水印怎么做？

Question

Answer 1

可以使用canvas来实现水印，然后使用mutationObserver来检测元素是否被删改。代码如下：

// 函数buildWatermark()用于创建一个画布，并绘制文本，返回该画布function buildWatermark() {  // 创建一个画布  const canvas = document.createElement("canvas");  // 设置画布的宽度  canvas.width = 150;  // 设置画布的高度  canvas.height = 120;  // 设置画布的显示方式  canvas.style.display = "none";  // 获取画布的2D绘图上下文  var ctx = canvas.getContext("2d");  // 旋转画布  ctx.rotate((-20 * Math.PI) / 180);  // 移动画布的位置  ctx.translate(-50, 20);  // 设置画布的填充颜色  // ctx.fillStyle = "#f5f5f5";  ctx.fillStyle = "red";  // 设置画布的字体  ctx.font = "100 16px Microsoft YaHei";  // 绘制文本  ctx.fillText("憋鬼叫好不好垃圾！！！", canvas.width / 2, canvas.height / 2);  // 返回画布  return canvas;}// 为canvas设置水印function setWatermark(canvas) {  // 创建一个div元素  var watermark = document.createElement("div");  // 设置div元素的样式  const styleStr = `        position:fixed;        top:0;        left:0;        width:100vw;        height:100vh;        z-index:99;        pointer-events:none;        background-repeat:repeat;        mix-blend-mode: multiply;        background-image:url('${canvas.toDataURL("image/png")}')`;  // 为div元素设置样式  watermark.setAttribute("style", styleStr);  // 为div元素设置id  watermark.setAttribute("id", "watermark");  // 将div元素添加到body中  document.body.appendChild(watermark);  return styleStr;}function setObserverForWatermark() {  const canvas = buildWatermark();  let styleStr = setWatermark(canvas);  let canvasDOM = document.querySelector("#watermark");  const bodyDOM = document.querySelector("body");  function callback(mutationList, observer) {    console.log(observer);    mutationList.forEach((mutation) => {      if (mutation.type === "attributes") {        if (mutation.attributeName === "style") {          // 这里需要这样判断，因为每一次修改都会触发这个回调，如果不这样判断          // 就会导致死循环。          if (            !(              mutation.target                .getAttribute("style")                .replaceAll(" ", "")                .replaceAll(/\n/g, "") ===              styleStr.replaceAll(" ", "").replaceAll(/\n/g, "")            )          ) {            mutation.target.setAttribute("style", styleStr);          }          // 这里需要这样判断，因为每一次修改都会触发这个回调，如果不这样判断          // 就会导致死循环。        } else if (mutation.attributeName === "id") {          if (mutation.target.getAttribute("id") !== "watermark") {            mutation.target.setAttribute("id", "watermark");          }        } else if (mutation.attributeName === "class") {          // 如果用户添加了class，这里主要为防止用户时候浏览器的隐藏元素选项来隐藏元素          // 这个隐藏元素按是添加了一个class，使用overflow:hidden;来隐藏元素          if (            mutation.target.getAttribute("class") !== "" ||            mutation.target.getAttribute("class") !== undefined          ) {            // 移除class            mutation.target.removeAttribute("class");          }        }      }    });  }  // 如果元素被删除，监听元素自身是无法获取到被删除的信息的  // 但是当子元素被删除的时候，监听父元素的mutationObserver是可以监听到的  function parentCallback(mutationList) {    console.log(mutationList);    mutationList.forEach((mutation) => {      if (mutation.type === "childList" && mutation.removedNodes.length > 0) {        mutation.removedNodes.forEach((node) => {          if (node === canvasDOM) {            // 如果被删除的是水印节点，重新添加！            setWatermark(canvas);            canvasDOM = document.querySelector("#watermark");          }        });      }    });  }  // 监听DOM变化  const observer = new MutationObserver(callback);  observer.observe(canvasDOM, {    attributes: true,    childList: true,    subtree: true,  });  // 监听父元素，因为当删除元素自身的时候无法被监听到，而复原可以监听子元素被删除  const parentObserver = new MutationObserver(parentCallback);  parentObserver.observe(bodyDOM, {    attributes: true,    childList: true,    subtree: true,  });}// 开始监听setObserverForWatermark();

Answer 2

我之前公司写过那种用 DOM 上创建 N 个 SPAN 然后用 CSS 斜过来的方案。不过这种有点low，用 Canvas 更优雅一些。可以参考上面的方案，

Answer 3

Canvas生成水印图 + CSS的点击穿透。

社区里面已经有类似的问答了 �� css怎么给网页添加水印效果？