h5制作无水印,H5无水印

　　在网站浏览中，常常需要网页水印，以便防止用户截图或录屏暴露敏感信息后，追踪用户来源。如我们常用的钉钉软件，聊天背景就会有你的名字。那么如何实现网页水印效果呢？

　　网页水印SDK，实现思路

　　1.能更具获取到的当前用户信息，如名字，昵称，ID等，生成水印

　　2.生成一个画布，覆盖整个窗口，并且不影响其他元素

　　3.可以修改字体间距，大小，颜色

　　4.不依赖框架

　　5.需要防止用户手动删除这个帆布

　　实现分析

　　初始参数

　　尺寸：字体大小颜色：字体颜色id: canvasIdtext:文本内容密度：间距清晰度：清晰度支持提示：画布不支持的文字提示生成Canvas

　　根据编号生成画布，画布大小为窗口。屏幕大小，若存在原有老的画布，清除并重新生成。

　　画布固定定位在可视窗口，z索引为-1

　　让body=document。getelementsbytagname( body )；让画布=文档。createelement(“canvas”)；画布。风格。CSS text=位置：固定；宽度：100%;身高：100%;左：0;top:0；z索引：-1;；正文[0]。appendChild(画布);指纹生成算法

　　让画布=文档。getelementbyid(这个。参数。id)；设cxt=canvas。获取上下文(“2d”)；让时间=窗口。屏幕。宽度*这个。参数。清晰度/这个。参数。密度；//横向文字填充次数设高度乘以=窗口。屏幕。身高*这个。参数。清晰度* 1.5/这个。参数。密度；//纵向文字填充次数cxt.rotate(-15*Math .PI/180)；//倾斜画布对于(设I=0；我倍；i ) { for(设j=0；j高度时间；j){ cxt。填充样式=this。参数。颜色；cxt。font=this。参数。大小为“Arial”；cxt.fillText(this.params.text，this.params.density*i，j * this。参数。密度)；} }防止用户删除

　　使用定时器，定时检查指纹是否存在

　　让自我=这个；窗户。setinterval(function(){ if(！文档。getelementbyid(self。参数。id)){ self ._ init()；} }, 1000);项目编译

　　使用glup编译

　　var gulp=require(gulp )，uglify=require(gulp-uglify )，babel=require( gulp-babel )；gulp.task(minify ，function () { return gulp.src( ./src/index.js) //要压缩的射流研究…文件。管道（巴别塔())。管道(丑化()).管道(gulp.dest(./dist ))；//压缩后的路径});指纹效果

　　效果地址

　　https://tianshengjie.cn/apps/web_fingerprint

　　项目地址

　　吉图布：https://github . com/Jay-Tian/we B- fingerprint

　　新公共管理包：https://www . npmjs . com/package/we B- fingerprint

　　以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。