js 添加水印，防篡改

水印是安全中的一部分，或者可以推广加上自己的一些信息

前端实现方式，是通过创建canvas，将文本或图片添加到canvas，然后导出图片作为背景图

以下实现方法 /watermark.js

  1 const watermark = {
  2   uuid: 0,
  3   dom: null,
  4   waterDom: null,
  5   defaultOpts: {
  6     width: 200,
  7     height: 200,
  8     offsetLeft: 0,
  9     offsetTop: 0,
 10     angle: 30,
 11     opacity: 0.5,
 12     zIndex: 99999,
 13     color: "#000000",
 14     font: "18px Microsoft YaHei",
 15     mark: "",
 16   },
 17   opts: {},
 18   init: function (opts) {
 19     this.opts = { ...this.defaultOpts, ...opts };
 20     this.opts.bgcUrl = this.generateWaterPic();
 21     this.getEl();
 22     this.addWaterMark();
 23     this.observerMark();
 24   },
 25   // 生成水印图
 26   generateWaterPic: function () {
 27     const { height, width, angle, offsetLeft, offsetTop, color, font, mark } = this.opts;
 28 
 29     const can = document.createElement("canvas");
 30     can.width = width;
 31     can.height = height;
 32 
 33     const ctx = can.getContext("2d");
 34     let h = Math.sin(angle / 360) * width;
 35 
 36     ctx.rotate(-angle / 360);
 37     ctx.font = font;
 38     ctx.fillStyle = color;
 39     ctx.textAlign = "left";
 40     
 41     // 设置文字开始位置
 42     ctx.fillText(mark, 0 + offsetLeft, h + offsetTop);
 43 
 44     return can.toDataURL("image/png");
 45   },
 46   // 生成加水印的dom元素
 47   addWaterMark: function () {
 48     const { el, opacity, zIndex, bgcUrl, left = 0, right = 0, top = 0, bottom = 0 } = this.opts;
 49     const div = document.createElement("div");
 50     this.uuid++;
 51     div.id = `water-mark-${this.uuid}`;
 52     let styles = {
 53       "pointer-events": "none",
 54       opacity: opacity,
 55       "z-index": zIndex,
 56       left: left + "px",
 57       right: right + "px",
 58       top: top + "px",
 59       bottom: bottom + "px",
 60       background: `url(${bgcUrl}) left top repeat`,
 61     };
 62 
 63     if (!el) {
 64       styles.position = "fixed";
 65     } else {
 66       this.dom.style.position = "relative";
 67       styles.position = "absolute";
 68     }
 69     let str = "";
 70     Object.keys(styles).forEach((k) => {
 71       str += `${k}: ${styles[k]};`;
 72     });
 73     this.opts.style = str;
 74     div.style = str;
 75     this.waterDom = div;
 76     this.dom.appendChild(div);
 77   },
 78   // 获取添加水印的dom元素，如果没有写，默认加到body上
 79   getEl: function () {
 80     const { el } = this.opts || this.defaultOpts;
 81     let dom;
 82     if (!el) {
 83       dom = document.body;
 84     } else {
 85       dom = document.getElementById(el);
 86     }
 87     if (!dom) {
 88       dom = document.body;
 89     }
 90     this.dom = dom;
 91   },
 92   // 清除上一个水印
 93   clear: function () {
 94     if (this.waterDom) {
 95       this.waterDom.remove();
 96     }
 97   },
 98   // 监测水印防止删除，或改动
 99   observerMark() {
100     const { style } = this.opts;
101     const body = document.body;
102     const waterDom = this.waterDom;
103     const _this = this;
104     const MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
105     if (MutationObserver) {
106       let mo = new MutationObserver(function () {
107         //
108         if ((waterDom && waterDom.getAttribute("style") !== style) || !waterDom) {
109           // 避免一直触发
110           mo.disconnect();
111           mo = null;
112           _this.clear();
113           _this.addWaterMark();
114           _this.observerMark();
115         }
116       });
117 
118       mo.observe(body, {
119         attributes: true,
120         subtree: true,
121         childList: true,
122       });
123     }
124   },
125   // 对dom元素截图
126   cropImg({ id }) {
127     html2canvas(document.getElementById(id)).then((canvas) => {
128       const a = document.createElement("a");
129       a.href = canvas.toDataURL("image/png");
130       a.download = `${Date.now()}.png`;
131       document.body.appendChild(a);
132       a.click();
133       document.body.removeChild(a);
134     });
135   },
136 };

在代码里调用

var opts = {
          mark: "测试加水印",
          el: "water-mark",
          height: 200,
          width: 400,
          offsetLeft: 20,
          offsetTop: 10,
          color: "red",
        };

watermark.init(opts);

水印效果图