cavans制作水印 html

Sam young

已于 2022-06-09 10:56:51 修改

阅读量167

点赞数

分类专栏：功能

于 2022-06-09 10:42:20 首次发布

本文链接：https://blog.csdn.net/young_sam/article/details/125198904

版权

html 前端 javascript

功能专栏收录该内容

13 篇文章 0 订阅

订阅专栏

效果图

在这里插入图片描述

代码

<html>
  <div>124</div>
  <div>124</div>
  <div>124</div>
  <div>124</div>
  <div>124</div>
</html>
<script>
  function createMask() {
    let canvas = document.createElement("canvas");
    canvas.id = "__canvas";
    canvas.width = "120"; // 每个水印的宽高
    canvas.height = "70";
    let ctx = canvas.getContext("2d");
    ctx.fillStyle = "rgba(200, 180, 150, 0.5)";
    ctx.rotate((45 * Math.PI) / 180); // 偏转的角度
    ctx.fillText("设置水印文本", 30, 20); // 绘制文本 绘制开始位置

    let src = canvas.toDataURL("image/png"); // 将canvas转为base64图片路径本地保存

    // 水印容器
    let waterMaskDiv = document.createElement("div");

    waterMaskDiv.style.position = "fixed";
    waterMaskDiv.style.zIndex = "-1";
    waterMaskDiv.id = "water-mark";
    waterMaskDiv.style.top = "0";
    waterMaskDiv.style.left = "0";
    waterMaskDiv.style.height = "100%";
    waterMaskDiv.style.width = "100%";
    waterMaskDiv.style.pointerEvents = "none";
    waterMaskDiv.style.backgroundImage = "URL(" + src + ")";
    // 水印节点插到body下 可以通过层级控制节点层次
    document.body.appendChild(waterMaskDiv);
  }

  createMask();
  
    /** 处理会前端操作的把div删除了，做一个监控来生成水印 */
  let config = {
        childList: true,
        attributes: true,
        characterData: true,
        subtree: true,
        attributeOldValue: true,
        characterDataOldValue: true,
      };

      const mutationCallback = (mutationList) => {
        for (let mutation of mutationList) {
          mutation.removedNodes.forEach(function (item) {
            if (item.id === "water-mark") {
              createMask();
              console.log('创建了')
            }
          });
        }
      };

      // 创建 MutationObserver 实例
      let observer = new MutationObserver(mutationCallback);

      // 开始监控目标节点
      observer.observe(document.body, config);
       // 停止监控
      // observer.disconnect()
</script>