給頁面添加水印

這裏使用了vue中的自定義指令

• main.js

    // vue 全局指令 --- 模塊/組件式添加水印
    Vue.directive('watermark',(el,binding)=>{
      function addWaterMarker(str,parentNode,font,textColor){// 水印文字，父元素，字體，文字顏色
          var can = document.createElement('canvas');
          parentNode.appendChild(can);
          can.width = 150;
          can.height = 100;
          can.style.display = 'none';
          var cans = can.getContext('2d');
          cans.rotate(-20 * Math.PI / 180);
          cans.font = font || "13px Microsoft JhengHei";
          cans.fillStyle = textColor || "rgba(180, 180, 180, 0.2)";
          cans.textAlign = 'left';
          cans.textBaseline = 'Middle';
          cans.fillText(str, can.width / 14, can.height);
          parentNode.style.backgroundImage = "url(" + can.toDataURL("image/png") + ")";
      }
      addWaterMarker(binding.value.text, el, binding.value.font, binding.value.textColor)
    })
  

• 使用（index.vue）

    <div class="maincont" v-watermark="{text: msgval, textColor:'#ddd'}">
          <div v-html="valtxt"></div>
  	</div>