前端水印生成方案,前端水印和后端水印的差别
前言
前端水印基本不安全，可以破解~。~
水印
水印是一种很容易识别的技术，夹在纸里，能透过光显现出各种阴影。
实现
首先，创建一个wrap块，并为其设置一些样式：
div class= wrap 1 wrap _ common /div style * { margin:0；填充：0；}.wrap _ common { position:relative；边距：0自动；宽度：800px身高：44vh边框：1px实心rgba(0，0，0，1)；背景：rgba(255，255，255，1)；溢出：隐藏；}.wrap _ common:first-child { margin-bottom:5vh；}/style1. DIV绝对定位
通过叠加图层将水印添加到包装中。我们先来看看最后的效果。
动态获取包装的长度和宽度，计算它可以容纳多少水印块，并相应地设置每个水印块顶部左侧的偏移值：
const wrap=document . query selector( . wrap 1 )；const { clientWidth，clientHeight }=wrapconst waterHeight=100const水宽=180；//可以放下几行几列const [columns，rows]=[math . ceil(client width/water width)，math . ceil(client height/water height)]for(让I=0；I列；i ) { for(设j=0；j=行数；J) {//生成水印块const watermark element=create watermark element()；//动态设置偏移值add attributes(watchermarkelement，{width: ` $ {waterwidth} px`，height: ` $ {waterheight} px `，left:`$ { waterWidth(I-1)* waterWidth 10 } px `，top:` $ { waterHeight(j-1)* waterHeight 10 } px `，})；wrap . appendchild(watcerMarkElement)} }2. canvas+背景图
我们知道，可以为div设置样式背景，很容易实现背景图像，所以水印也可以这样实现，其中背景图像由canvas绘制，图像由to dataURL()转换为dataURL(base64)，最后添加到background-image样式中。
const wrap=文档。querySelector(。wrap 2’)；wrap . style . background image=` URL($ { draw watermark()})`；drawWaterMark方法实现如下：
Const drawWaterMark=(text=小豪看世界)={ const sin=math . sin(math . pi/4.5)；const cos=Math.cos(数学。/4.5)；const canvas=document . createelement( canvas )canvas . width=200；帆布.高度=100；const CTX=canvas . get context( 2d )；ctx.transform(cos，-sin，sin，cos，0，0)；CTX . font=" 16px "；ctx.fillStyle=rgba(0，0，0， 4)；ctx.fillText(text，80，140)；ctx.fillText(text，-30，100)；return canvas . toda taurl( image/png )}；
我们可以看到包装插入了base64的图片。有强迫症的童鞋可以处理。把它变成一个风格标签，插入正文；
改为插入样式标签:
const style=文档。createElement( style )；style . type= text/CSS ；style . innerhtml=` . wrap 2 { background-image:URL($ { draw watermark()})；}`;document . body . appendchild(style)；Emmm，看起来很美~。~
参考
从破解一个设计网站谈前端水印(详细教程)
源码
源代码
这就是本文关于前端水印的简单代码示例。更多相关前端水印内容，请搜索之前的文章或者继续浏览下面的相关文章。希望你以后能支持我！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。