main.js // 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 || "13px Microsoft JhengHei";
cans.fillStyle = textColor || "rgba(180, 180, 180, 0.2)";
cans.textAlign = 'left';
cans.textBaseline = 'Middle';
cans.fillText(str, can.width / 14, can.height);
parentNode.style.backgroundImage = "url(" + can.toDataURL("image/png") + ")";
}
addWaterMarker(binding.value.text, el, binding.value.font, binding.value.textColor)
})