前端水印的简单实现
时间：2023-04-05 00:09:54
HTML5
前言前端实现的水印基本不安全，可以破解~.~WatermarkWatermark（水印）很容易识别，夹在纸里，可以通过通过光线从而显露出各种深浅不一的技法。该实现首先创建一个wrap块并为其设置一些样式：
1.DIV绝对定位通过叠加层将水印附加到换行。我们先来看看最终的效果。动态获取wrap的长宽并计算它能容纳多少Watermark块，并相应设置每个watermark块left和top的偏移值：constwrap=document.querySelector('.wrap1');const{clientWidth,clientHeight}=wrap;constwaterHeight=100;constwaterWidth=180;//可以放多少行多少列const[columns,rows]=[Math.ceil(clientWidth/waterWidth),Math.ceil(clientHeight/waterHeight)]for(leti=0;i
{constsin=Math.sin(Math.PI/4.5);constcos=Math.cos(Math.PI/4.5);constcanvas=document.createElement('canvas')canvas.width=200;canvas.height=100;constctx=canvas.getContext('2d');ctx.transform(cos,-sin,sin,cos,0,0);ctx.font='16px';ctx.fillStyle='rgba(0,0,0,.4)';ctx.fillText(文本,80,140);ctx.fillText(文本,-30,100);返回canvas.toDataURL('image/png')};我们可以看到wrap插入了一张base64图片，有强迫症的童鞋可以搞定，转换成style标签插入到body中；将其更改为样式标签并插入：conststyle=document.createElement('style');style.type='文本/css';style.innerHTML=`.wrap2{背景图片：url(${drawWaterMark()});}`;document.body.appendChild（样式）；emmm，看起来更漂亮了~.~参考Crackadesign网站谈前端加水印（详细教程）源码源码END
