vue页面部分加水印

第一种

data() {
    return {
      watermark: "fffff", //水印字幕
    };
  },
 directives: {
    watermark: (el, binding) => {
      console.log(el)
      function addWaterMarker(str, parentNode, font, textColor) {
        // 水印文字，父元素，字体，文字颜色
        let 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 || "16px Microsoft JhengHei";
        cans.fillStyle = textColor || "rgba(180, 180, 180, 0.3)";
        cans.textAlign = "left";
        cans.textBaseline = "Middle";
        cans.fillText(str, can.width / 3, can.height / 2);
        parentNode.style.backgroundImage =
          "url(" + can.toDataURL("image/png") + ")";
      }
      addWaterMarker(
        binding.value.text,
        el,
        binding.value.font,
        binding.value.textColor
      );
    }
  },

然后在template里面加入

 <div v-watermark="{ text: watermark, textColor: 'rgba(180, 180, 180, 0.3)' }">
 </div>

第二种

在utils里面创建utils/watermark.js

import Vue from "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 || "16px Microsoft JhengHei";
    cans.fillStyle = textColor || "rgba(180, 180, 180, 0.3)";
    cans.textAlign = "left";
    cans.textBaseline = "Middle";
    cans.fillText(str, can.width / 3, can.height / 2);
    parentNode.style.backgroundImage =
      "url(" + can.toDataURL("image/png") + ")";
  }
  addWaterMarker(
    binding.value.text,
    el,
    binding.value.font,
    binding.value.textColor
  );
});

然后在页面直接引入

//页面上面使用
<div v-watermark="{ text: watermark, textColor: 'rgba(180, 180, 180, 0.3)' }">
</div>


import "@/utils/watermark.js";
data() {
    return {
      watermark: "fffff", //水印字幕
    };
  },