封装公共添加水印的方法:
var watermark = {}
var setWatermark = function(text,renderDom=document.body){
var id = '1.23345566.3333344';
if(document.getElementById(id)!==null){
};
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;
cans.fillText(text,-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(text,renderDom){
var id = setWatermark(text,renderDom)
if(!id){
setTimeout(function(){watermark.set(text,renderDom)},0)
}
window.onresize=function(){
setWatermark(text,renderDom)
}
}
export default watermark;
使用
<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'))
})
}
}