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

关注

原创最新推荐文章于 2026-09-06 09:26:58 发布 928 阅读 AI 写同款· GEO 优化 ›

vue实现水印功能在页面里添加水印，一种是特定页面加水印，那么本页面加水印功能即可，用CSS/JavaScript都可以实现，另一种是全局都加水印，这种可以考虑某些页面不需要加水印，在路由守卫或者其他地方去掉即可。写在前面，水印的实现原理：创建一个canvas，画一个客户端高x客户端宽的画布，里面画满水印，并将其的层级z-index设置最高，使其一直显示在界面的最上方。阅读详情

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

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