web頁面水印

web頁面增長水印

實現路程

一、用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 均可以獲得通知。

看起來就是咱們想要的功能，用它試試

二、咱們要作的就是，監聽到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)
})()
複製代碼

啊哈，這下刪不掉了吧

還有一點就是若是要打印頁面的話，你會發現，水印也打印在上邊

三、 媒體樣式 打印時去掉水印樣式

//只須要新增一行 便可
  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)
})()
複製代碼