vue中使用 canvas给页面添加水印

vue中使用canvas 给页面添加水印
1.写一个公共的方法，放在项目utils文件夹中 watermark.js
str传入水印需要展示的文本，renderDom水印要加的盒子，默认body
var watermark = {}
var setWatermark = function(str,renderDom=document.body){
var id = '1.23345566.3333344';
if(document.getElementById(id)!==null){
document.removeChild(document.getElementById(id))
}；
// 创建一个画布
var can = document.createElement('canvas');
// 设置画布的长宽
can.width = 400;
can.height=400;
var cans = can.getContext('2d');
// 旋转角度
cans.rotate(-30*Math.PI/180);
cans.font='20px Vedana'
// 设置填充绘画的颜色、渐变或者模式
cans.fillStyle = '#eee';
// 设置文本内容的对齐方式
cans.textAlign = 'left';
// 设置在绘制文本时使用过的当前文本基线
cans.textBaseline = 'Middle';
cans.shadowColor = rgba(0,0,0,1);
cans.shadowOffsetX=1;
cans.shadowOffsetY = 1;
cans.shadowBlur = 3;
// 在画布上绘制填色的文本（输出的文本，开始绘制文本的X/Y轴坐标）
cans.fillText(str,-can.width/16,cans.height/2);
const rectAttr = renderDom.getBoundingClientRect();
var div = document.createElement('div')
div.id = id;
div.style.pointerEvents = 'none';
div.style.position = 'absolute';
div.style.top = rectAttr.top+'px';
div.style.left = rectAttr.left+'px';
div.style.zIndex = '1';
div.style.opacity = '0.3';
div.style.width = rectAttr.width+'px';
div.style.height = rectAttr.height+'px';

div.style.background='url(' + can.toDataURL('image/png') + ')-24px top repeat';
if(rectAttr.height===0){
    return;
}
renderDom.appendChild(div)
return id;

}
// 一个页面中该方法只允许调用一次
watermark.set=function(str,renderDom){
var id = setWatermark(str,renderDom)
if(!id){
setTimeout(function(){watermark.set(str,renderDom)},0)
}
window.onresize=function(){
setWatermark(str,renderDom)
}
}
export default watermark;

2使用 .vue文件

<div id="container"> </div>

import watermark from '@/utils/watermark';
export default{
    mounted(){
        this.$nextTick(()=>{
            let {operNo,operName} = this.operatorInfo
            watermark.set(operNo+operName,document.getElementById('container'))
        })
    }
}