vue3添加水印and vue2

vue3

main.js

app.directive('watermark', (el, binding) => {
  function addWaterMarker(str,str2,str3, parentNode, font, textColor) {// 水印文字，父元素，字体，文字颜色
    var can = document.createElement('canvas');
    parentNode.appendChild(can);
    can.width = 300;
    can.height = 320;
    can.style.display = 'none';
    var cans = can.getContext('2d');
    cans.rotate(-40 * Math.PI / 180);
    cans.font = font || "18px Microsoft JhengHei";
    cans.fillStyle = textColor || "rgba(180, 180, 180, 0.3)";
    cans.textAlign = 'center';
    cans.textBaseline = 'Middle';

    cans.fillText(str, can.width / 5, can.height / 3);
    cans.fillText(str2, can.width / 5, can.height / 2.5);
    cans.fillText(str3, can.width / 5, can.height / 2.1);

    parentNode.style.zIndex = '100000'
    parentNode.style.backgroundImage = "url(" + can.toDataURL("image/png") + ")";
  }



  addWaterMarker(binding.value.text,binding.value.text2,binding.value.text3, el, binding.value.font, binding.value.textColor)
})

用法 、、

<div  v-watermark="{ text: '童心回收提供', text2: '数据分析报告', text3: '仅供参考', textColor: 'rgba(134, 186, 21, 0.6)' }>  </div>