HTML5中如何实现网页水印SDK

　　介绍

这篇文章将为大家详细讲解有关HTML5中如何实现网页水印SDK,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

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

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

<强>实现分析

<强>初始参数

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

<强>生成画布

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

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

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

<强>指纹生成算法

, let  canvas =, . getelementbyid (this.params.id); 　　,,,,,let  cxt =, canvas.getContext (& # 39; 2 d # 39;); 　　,,,,,let  times =, window.screen.width  *, this.params.clarity /, this.params.density;//横向文字填充次数 　　,,,,,let  heightTimes =, window.screen.height  *, this.params.clarity  *, 1.5/, this.params.density;,//纵向文字填充次数 　　,,,,,cxt.rotate (-15 * Math.PI/180),,//倾斜画布 　　,, 　　,,,,,,(let 小姐:=,0;,小姐:& lt;,,,我+ +),{ 　　,,,,,,,,(let  j =, 0;, j  & lt;, heightTimes;, j + +), { 　　,,,,,,,,,cxt.fillStyle =, this.params.color; 　　,,,,,,,,,cxt.font =, this.params.size  +, & # 39;, arial # 39;; 　　,,,,,,,,,cxt.fillText (this.params.text, this.params.density *我,j * this.params.density); 　　,,,,,,,} 　　,,,,,}

<>强防止用户删除

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

,, let  self =,; 　　,,,setinterval(函数(){ 　　,,,if  (! . getelementbyid (self.params.id)), { 　　,,,self._init (); 　　,,,} 　　,,,},,1000);

<强>项目编译

使用glup编译

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

<强>指纹效果

HTML5中如何实现网页水印SDK”> </p> <p class=关于“HTML5中如何实现网页水印SDK”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看的到。

HTML5中如何实现网页水印SDK