通过Vue自定义指令给页面添加水印

PM需求:给特定的页面添加水印

如下图:

Vue.directive("watermark", (el, binding) => {
  const addWaterMarker = (text, time, el) => {
    var canvas = document.createElement("canvas");
    canvas.width = 400;
    canvas.height = 200;
    var cans = canvas.getContext("2d");
    cans.rotate((-20 * Math.PI) / 180); //旋转弧度
    cans.font = "16px Microsoft JhengHei"; //字体
    cans.fillStyle = "rgba(0, 0, 0, 0.1)"; //字体填充颜色
    cans.textAlign = "left"; //对齐方式
    cans.textBaseline = "Middle"; //基线
    cans.fillText(text, canvas.width / 3, canvas.height / 2); //被填充的文本
    cans.fillText(formatDate(time), canvas.width / 3, 130); //被填充的文本
    el.style.backgroundImage = `url(${canvas.toDataURL("image/png")})`; //插入背景图
  };
  const { text, time } = binding.value;
  addWaterMarker(text, time, el);
});



//调用
<div id="app" v-watermark="{text:'掘金',time:Date.now()}"></div>