web页面水印

web页面增加水印

实现路程

1、用canvas生图，把图片fixed在页面上

(function createCanvas(){
      var width =100;
      var height =100;
      var x =10;
      var y =10;
      var rotate=30;
      var fontSize =16;
      var alpha =0.7;//透明度
      var color='#999'
      var canvas = document.createElement('canvas');
      canvas.setAttribute('width', width);
      canvas.setAttribute('height', height);

       var ctx = canvas.getContext("2d");

       ctx.textAlign = 'top';//在绘制文本时使用的当前文本基线
       ctx.textBaseline = 'left';//设置或返回文本内容的当前对齐方式
       ctx.font = `${fontSize}px Arial`//ctx.font = '24px Arial';
       ctx.fillStyle = color;
       ctx.globalAlpha = alpha;//设置或返回绘图的当前 alpha 或透明值
       ctx.rotate(Math.PI / 180 * rotate);//将画布旋转30度
       ctx.fillText('水印', parseFloat(width) / 2, parseFloat(height) / 2);
       var base64Url = canvas.toDataURL();//生成图片转换成base64格式

       var watermarkDiv = document.createElement("div");
       var styleStr = `
         position:fixed;
         top:0;
         left:0;
         bottom:0;
         right:0;
         z-index:${9999};
         pointer-events:none;
         background-repeat:repeat;
         background-image:url('${base64Url}')`;

       watermarkDiv.setAttribute('style', styleStr);
       document.body.appendChild(watermarkDiv)
      
})()
复制代码

?图片生成出来了，页面上有水印了，这么简单的，任务是不是就完成了呢，不然不然

用户可以通过修改dom样式或者删除dom节点来屏蔽水印，这样一来，水印加的还有啥用呢。emmm，得需要一个dom元素监听事件，一旦发生此事，要告知我才行。

web api中有一个叫做MutationObserver的接口： MutationObserver接口提供了监视对DOM树所做更改的能力。 DOM 的任何变动，比如节点的增减、属性的变动、文本内容的变动，这个 API 都可以得到通知。

看起来就是我们想要的功能，用它试试

2、我们要做的就是，监听到dom元素被删除的话，我们就把自动新增dom元素；监听到修改了dom元素的样式，我们就自动重置样式

(function createCanvas(){
      var width =100;
      var height =100;
      var x =10;
      var y =10;
      var rotate=30;
      var fontSize =16;
      var alpha =0.7;//透明度
      var color='#'
      var canvas = document.createElement('canvas');
      canvas.setAttribute('width', width);
      canvas.setAttribute('height', height);

       var ctx = canvas.getContext("2d");

       ctx.textAlign = 'top';//在绘制文本时使用的当前文本基线
       ctx.textBaseline = 'left';//设置或返回文本内容的当前对齐方式
       ctx.font = `${fontSize}px Arial`//ctx.font = '24px Arial';
       ctx.fillStyle = color;
       ctx.globalAlpha = alpha;//设置或返回绘图的当前 alpha 或透明值
       ctx.rotate(Math.PI / 180 * rotate);//将画布旋转30度
       ctx.fillText('水印', parseFloat(width) / 2, parseFloat(height) / 2);//从cookie里获取userName
       var base64Url = canvas.toDataURL();

       var wm = document.getElementById('waterMark');

       var watermarkDiv = wm || document.createElement("div");
       var styleStr = `
         position:fixed;
         top:0;
         left:0;
         bottom:0;
         right:0;
         z-index:${9999};
         pointer-events:none;
         background-repeat:repeat;
         background-image:url('${base64Url}')`;

       watermarkDiv.setAttribute('style', styleStr);
       watermarkDiv.id ='waterMark'

      var  bodyContainer = document.body;
      
       if (!wm) {
         bodyContainer.appendChild(watermarkDiv)
       }
   
       const MutationObserver = window.MutationObserver || window.WebKitMutationObserver|| window.MozMutationObserver;//检测浏览器是否支持该特性
       if (MutationObserver) {
         var observer = new MutationObserver(function () {
           var wm = document.getElementById('waterMark');
           // 只在wm元素样式被修改或者元素被移除时
           if ((wm && wm.getAttribute('style') !== styleStr) || !wm) {
             // 避免一直触发
             observer.disconnect();//解除监听
             observer = null;
             createCanvas()
           }
         });

         observer.observe(bodyContainer, { //监听body元素子元素的变化
           attributes: true,
           subtree: true,
           childList: true
         })
       }

      var styleEl =  document.createElement('style');
      styleEl.setAttribute('type','text/css');
      document.head.appendChild(styleEl)
})()
复制代码

啊哈，这下删不掉了吧

还有一点就是如果要打印页面的话，你会发现，水印也打印在上边

3、 媒体样式 打印时去掉水印样式

//只需要新增一行 即可
  styleEl.innerText ='@media  print{ #waterMark{ display:none } }';
复制代码

完整代码

(function createCanvas(){
      var  bodyContainer = document.body;
      var width =100;
      var height =100;
      var x =10;
      var y =10;
      var rotate=30;
      var fontSize =16;
      var alpha =0.7;//透明度
      var color='#'
      var canvas = document.createElement('canvas');
      canvas.setAttribute('width', width);
      canvas.setAttribute('height', height);

       var ctx = canvas.getContext("2d");

       ctx.textAlign = 'top';//在绘制文本时使用的当前文本基线
       ctx.textBaseline = 'left';//设置或返回文本内容的当前对齐方式
       ctx.font = `${fontSize}px Arial`//ctx.font = '24px Arial';
       ctx.fillStyle = color;
       ctx.globalAlpha = alpha;//设置或返回绘图的当前 alpha 或透明值
       ctx.rotate(Math.PI / 180 * rotate);//将画布旋转30度
       ctx.fillText('水印', parseFloat(width) / 2, parseFloat(height) / 2);//从cookie里获取userName
       var base64Url = canvas.toDataURL();

       var wm = document.getElementById('waterMark');

       var watermarkDiv = wm || document.createElement("div");
       var styleStr = `
         position:fixed;
         top:0;
         left:0;
         bottom:0;
         right:0;
         z-index:${9999};
         pointer-events:none;
         background-repeat:repeat;
         background-image:url('${base64Url}')`;

       watermarkDiv.setAttribute('style', styleStr);
       watermarkDiv.id ='waterMark'

       if (!wm) {
         bodyContainer.appendChild(watermarkDiv)
       }
   
       const MutationObserver = window.MutationObserver || window.WebKitMutationObserver|| window.MozMutationObserver;//检测浏览器是否支持该特性
       if (MutationObserver) {
         var observer = new MutationObserver(function () {
           var wm = document.getElementById('waterMark');
           // 只在wm元素样式被修改或者元素被移除时
           if ((wm && wm.getAttribute('style') !== styleStr) || !wm) {
             // 避免一直触发
             observer.disconnect();
             observer = null;
             createCanvas()
           }
         });

         observer.observe(bodyContainer, { //监听body元素子元素的变化
           attributes: true,
           subtree: true,
           childList: true
         })
       }

      var styleEl =  document.createElement('style');
      styleEl.setAttribute('type','text/css');
      styleEl.innerText ='@media  print{ #waterMark{ display:none } }';
      document.head.appendChild(styleEl)
})()
复制代码

转载于:https://juejin.im/post/5cf8befa51882546934e636f