前言项目生成公司水印是一个普遍的需求。下面是在vue项目中制作水印的方法。话不多说，复制粘贴马上就能解决你的需求。步骤1创建watermark.js文件。目录结构/**水印添加方法*/letsetWatermark=(str1,str2)=>{letid='1.23452384164.123412415'if(document.getElementById(id)!==null){document.body.removeChild(document.getElementById(id))}letcan=document.createElement('canvas')//设置画布大小can.width=150can.height=80letcans=can.getContext('2d')cans.rotate(-20*Math.PI/180)//水印旋转角度cans.font='15pxVedana'cans.fillStyle='#666666'cans.textAlign='center'cans.textBaseline='Middle'cans.fillText(str1,can.width/2,can.height)//水印在画布x,y轴上的位置cans.fillText(str2,can.width/2,can.height+22)letdiv=document.createElement('div')div.id=iddiv.style.pointerEvents='none'div.style.top='40px'div.style.left='0px'div.style.opacity='0.15'div.style.position='fixed'div.style.zIndex='100000'div.style.width=document.documentElement.clientWidth+'px'div.style.height=document.documentElement.clientHeight+'px'div.style.background='url('+can.toDataURL('image/png')+')lefttoprepeat'document.body.appendChild(div)returnid}//添加水印方法exportconstsetWaterMark=(str1,str2)=>{letid=setWatermark(str1,str2)if(document.getElementById(id)===null){id=setWatermark(str1,str2)}}//去除水印方法exportconstremoveWatermark=()=>{letid='1.23452384164.123412415'if(document.getElementById(id)!==null){document.body.removeChild(document.getElementById(id))}}步骤2中直接引用vue，使用import{removeWatermark,setWaterMark}from'@/common/watermark'mounted(){setWaterMark('liergou','李二狗');},destroyed(){removeWatermark();},效果图：
