vue 使用class创建和清除水印的示例代码
页面添加水印的方法有很多,以下举例使用class定义的方法进行水印内容渲染:
1、新建文件:WatermarkClass.js
exportdefaultclassWatermarkClass{ constructor({id="watermarkID",str="",fontSize=18,width=400,height=400,fillStyle="#333333",opacity=1}){ this.id=id; this.str=str; this.fontSize=fontSize; this.width=width; this.height=height; this.fillStyle=fillStyle this.opacity=opacity; } //绘制水印 draw(){ if(document.getElementById(this.id)!==null){ document.body.removeChild(document.getElementById(this.id)); } constcanvas=document.createElement("canvas"); //设置canvas画布大小 canvas.width=this.width; canvas.height=this.height; constctx=canvas.getContext("2d"); ctx.rotate(-(15*Math.PI)/180);//水印旋转角度 ctx.font=`${this.fontSize}pxVedana`; ctx.fillStyle=this.fillStyle; ctx.textAlign="center"; ctx.textBaseline="middle"; this.str.split(",").forEach((item,index)=>{ ctx.fillText(item,canvas.width/2,canvas.height/2+(index*this.fontSize+10));//水印在画布的位置x,y轴 }); constdiv=document.createElement("div"); div.id=this.id; div.style.pointerEvents="none"; div.style.top="30px"; div.style.left="10px"; div.style.opacity=this.opacity; div.style.position="fixed"; div.style.zIndex="999999"; div.style.width=`${document.documentElement.clientWidth}px`; div.style.height=`${document.documentElement.clientHeight}px`; div.style.background=`url(${canvas.toDataURL("image/png")})lefttoprepeat`; document.body.appendChild(div); } setOptions({fontSize=18,width=300,height=300,opacity=1,str=""}){ this.fontSize=fontSize; this.width=width; this.height=height; this.fillStyle=fillStyle this.opacity=opacity; this.str=str; this.draw(); } //绘制 render(){ this.draw(); window.onresize=()=>{ this.draw(); }; } //移除水印 removeWatermark(){ if(document.getElementById(this.id)!==null){ document.body.removeChild(document.getElementById(this.id)); } } }
2、在页面种引入使用:
importwatermarkClassfrom"@/libs/watermarkClass"; exportdefault{ name:"App", mounted:function(){ this.initWatermark() }, methods:{ initWatermark(){ //方法一 letwatermark=newwatermarkClass({ id:"watermarkID", str:"紫藤萝-watermarkClass", fontSize:20, width:300, height:200, fillStyle:"#dddddd", opacity:0.4, }); watermark.render(); //5秒后,清除水印 setTimeout(()=>{ watermark.removeWatermark(); },5000); } }, };
以上就是vue使用class创建和清除水印的示例代码的详细内容,更多关于vue创建和清除水印的资料请关注毛票票其它相关文章!