vue 自定义水印插件

1.新建directives.js

import Vue from 'vue'
/**
 * author: zuokun
 * 水印
 * text：水印文字
 * font：字体
 * textColor：文字颜色
 * width：宽度
 * height：高度
 * textRotate：偏转度 -90到0， 负数值，不包含-90
 */
Vue.directive('watermark',(el,binding)=>{
    let text = binding.value.text;
    let font = binding.value.font || "16px Microsoft JhengHei";
    let textColor = binding.value.textColor || "rgba(215, 215, 215, 0.2)";
    let width = binding.value.width || 400;
    let height = binding.value.height || 200;
    let textRotate = binding.value.textRotate||-20;
    
    function addWaterMarker(parentNode){
        var can = document.createElement('canvas');
        parentNode.appendChild(can);
        can.width = width;
        can.height = height;
        can.style.display = 'none';
        var cans = can.getContext('2d');
        cans.rotate(textRotate * Math.PI / 180);
        cans.font = font;
        cans.fillStyle = textColor ;
        cans.textAlign = 'left';
        cans.textBaseline = 'Middle';
        cans.fillText(text, 0,  can.height);
        parentNode.style.backgroundImage = "url(" + can.toDataURL("image/png") + ")";
    }
    addWaterMarker(el)
})

2.使用

在对应页面引入

import  '@/utils/directives.js';

3.在data中定义配置项

watermarkConfig:{//水印
text:'测试水印',
font:'20px 微软雅黑',
textColor:'#bcbcbc',
width : 150, //水印文字的水平间距
height : 100, //水印文字的高度间距（低于文字高度会被替代）
extRotate : -30 //-90到0， 负数值，不包含-90
}

页面中使用

<div  v-watermark="watermarkConfig">
</div>