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，隔几秒重新渲染一下，达到时间实时更新。
