vue局部加水印指令

vue局部加水印指令

效果

代码

<div style="width: 1000px;height:500px;border: 1px solid" v-watermark="{ text2: watermark2, text: watermark, textColor: 'rgba(180, 180, 180, 0.3)' }"></div>


return {
   
   
   watermark: `{
   
   mathJaxContainer[0]}{
   
   new Date().toLocaleTimeString()}`,
   watermark2: '99999',
}

directives: {
   
   
        watermark: (el, binding) => {
   
   
        console.log(el)
        console.log(binding);
        function addWaterMarker(str,str1, parentNode, font, textColor) {
   
   
            // 水印文字，父元素，字体，文字颜色
            let can = document.createElement("canvas");
            parentNode.appendChild(can);
            can.width = 360;
            can.height = 280;
            can.style.display = "none";
            var cans = can.getContext("2d");
            cans.rotate((-20 * Math.PI) / 180);
            cans.font = '30px Vedana' //水印的字体大小
            cans.fillStyle = '#ccc' //水印的字体颜色
            cans.textAlign = 'center' //水印的位置
            cans.textBaseline = 'Middle'
            cans.fillText(str, can.width / 2, can.height -20) // 水印在画布的位置x，y轴
            cans.fillText(str1, can.width / 2, can.height + 22)
            parentNode.style.backgroundImage =
            "url(" + can.toDataURL("image/png") + ")";
        }
        addWaterMarker(
            binding.value.text2,
            binding.value.text,
            el,
            binding.value.font,
            binding.value.textColor
        );
        }
    },

如果要实时的时间水印（隔几秒更新时间）

在addWaterMarker调用这里加setInterval，隔几秒重新渲染一下，达到时间实时更新。