网页水印SDK如何实现

　　介绍

网页水印SDK如何实现?这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容,让我们一起来看看吧!

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

<强>网页水印SDK,实现思路

1。能更具获取到的当前用户信息,如名字,昵称,身份证等,生成水印
2。生成一个画布,覆盖整个窗口,并且不影响其他元素
3。可以修改字体间距,大,小颜色
4。不依赖Jquery
5。需要防止用户手动删除这个帆布

<强>实现分析

<强>初始参数

大小:字体大小 　　颜色:字体颜色 　　id: canvasId 　　文字:文本内容 　　密度:间距 　　清晰:清晰度 　　supportTip:帆布不支持的文字提示

生成画布

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

画布固定定位在可视窗口,z - index为1

让身体=document.getElementsByTagName(& # 39;身体# 39;); 　　让帆布=document.createElement(& # 39;帆布# 39;); 　　canvas.style。cssText=& # 39;位置:固定;宽度:100%;高度:100%;左:0;:0;z - index: 1; & # 39;; 　　身体[0].appendChild(画布);

指纹生成算法

让帆布=. getelementbyid (this.params.id); 　　让cxt=canvas.getContext (& # 39; 2 d # 39;); 　　让时间=window.screen。宽度* this.params。清晰/this.params.density;//横向文字填充次数 　　让heightTimes=window.screen。* this.params高度。* 1.5/this.params.density清晰;//纵向文字填充次数 　　cxt.rotate (-15 * Math.PI/180);//倾斜画布 　　 　　(让我=0;我& lt;次;我+ +){ 　　(让j=0;j & lt;heightTimes;j + +) { 　　cxt。fillStyle=this.params.color; 　　cxt。字体=this.params。大小+ & # 39;arial # 39;; 　　cxt.fillText (this.params。文本,this.params.density * i, j * this.params.density); 　　｝ 　　}

防止用户删除

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

让自我=; 　　setinterval(函数(){ 　　如果(! . getelementbyid (self.params.id)) { 　　self._init (); 　　｝ 　　},1000)、

项目编译

使用glup编译

var杯=要求(& # 39;杯# 39;), 　　糟蹋=要求(“gulp-uglify"), 　　巴别塔=要求(“gulp-babel"); 　　gulp.task(& # 39;贬低# 39;,函数(){ 　　返回gulp.src (& # 39;。/src/index.js& # 39;)//要压缩的js文件 　　.pipe(巴别塔()) 　　.pipe(糟蹋()) 　　.pipe (gulp.dest (& # 39;。/dist # 39;));//压缩后的路径 　　});

感谢各位的阅读!看完上述内容,你们对网页水印SDK如何实现大概了解了吗?希望文章内容对大家有所帮助。如果想了解更多相关文章内容,欢迎关注行业资讯频道。

网页水印SDK如何实现