vue 指令实现水印效果

在vue项目中通过自定义指令，使用canvas特性生成base64格式的图片文件，创建div并将其设置为背景图片，再定位到想要添加水印的地方(或者直接设置背景图片)，从而实现页面或组件局部水印效果。

1. 创建 warterMark.js

import Vue from 'vue'
 
Vue.directive('watermark', (el, binding)=>{
  function addWaterMarker(str, parentNode, font, textColor){// 水印文字，父元素，字体，文字颜色
    let can = document.createElement('canvas');
    parentNode.appendChild(can);
    can.width = 200;
    can.height = 140;
    can.style.display = 'none';
    let cans = can.getContext('2d');
    let img = new Image();
    img.src = require('../../assets/images/waterMarkLogo.png');
    img.onload = () => {
      console.log(img)
      cans.drawImage(img, 10, 0, 115, 70);
      cans.rotate(-27 * Math.PI / 180);
      cans.font = font || "10px Microsoft Yahei";
      cans.fillStyle = textColor || "#707070";
      cans.textAlign = 'left';
      cans.fillText(str, -10, 108);
      cans.stroke();
      // 设置背景图片
      // parentNode.style.backgroundImage = "url(" + can.toDataURL("image/png") + ")";
		
	  // 定位	
      let div = document.createElement('div');
      div.id = str;
      div.style.pointerEvents = 'none';
      div.style.top = '0';
      div.style.left = '0';
      div.style.position = 'absolute';
      div.style.zIndex = '100000';
      div.style.width = '100%';
      div.style.height = '100%';
      div.style.background = 'url(' + can.toDataURL('image/png') + ')';
      parentNode.appendChild(div);
    }
  }
  addWaterMarker(binding.value.text, el, binding.value.font, binding.value.textColor)
})

2. main.js 引入warterMark.js （或者在想要添加的某个页面引入）

我的warterMark.js文件在directive目录下

import  '@/directive/warterMark.js'

3. 调用指令

如果希望在整个项目中都添加水印，可以在app.vue中使用指令

<template>
  <div id="app">
    <router-view v-watermark="{text: '水印名称', textColor: 'rgba(180, 180, 180, 0.3)'}" />
  </div>
</template>