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

封装公共添加水印的方法:

//
utils/watermark.js
/**入参：
@text: 传入水印需要展示的文本;
@renderDom:要给哪个元素加水印，默认body；
*/
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;
// 在画布上绘制填色的文本（输出的文本，开始绘制文本的X/Y轴坐标）
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;

使用

// .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'))
})
}
}

最后

以上就是安详银耳汤为你收集整理的vue中使用 canvas给页面添加水印的全部内容，希望文章能够帮你解决vue中使用 canvas给页面添加水印所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。