在網(wǎng)站瀏覽中，常常需要網(wǎng)頁水印，以便防止用戶截圖或錄屏暴露敏感信息后，追蹤用戶來源。如我們常用的釘釘軟件，聊天背景就會(huì)有你的名字。那么如何實(shí)現(xiàn)網(wǎng)頁水印效果呢？

網(wǎng)頁水印SDK，實(shí)現(xiàn)思路

1.能更具獲取到的當(dāng)前用戶信息，如名字，昵稱，ID等，生成圖片水印
2.生成一個(gè)Canvas，覆蓋整個(gè)窗口，并且不影響其他元素
3.可以修改字體間距，大小，顏色
4.不依賴Jquery
5.需要防止用戶手動(dòng)刪除這個(gè)Canvas

實(shí)現(xiàn)分析

初始參數(shù)

size: 字體大小color: 字體顏色id: canvasIdtext: 文本內(nèi)容density: 間距clarity: 清晰度supportTip: Canvas不支持的文字提示

生成Canvas

根據(jù)id生成Canvas，畫布大小為window.screen大小，若存在原有老的Canvas，清除并重新生成。

畫布固定定位在可視窗口，z-index為-1

let body = document.getElementsByTagName( body  let canvas = document.createElement( canvas  canvas.style.cssText= position: fixed;width: 100%;height: 100%;left:0;top:0;z-index: -1;  body[0].appendChild(canvas);

指紋生成算法

let canvas = document.getElementById(this.params.id); let cxt = canvas.getContext( 2d  let times = window.screen.width * this.params.clarity / this.params.density;//橫向文字填充次數(shù) let heightTimes = window.screen.height * this.params.clarity * 1.5/ this.params.density; //縱向文字填充次數(shù) cxt.rotate(-15*Math.PI/180); //傾斜畫布 for(let i = 0; i times; i++) { for(let j = 0; j heightTimes; j++) { cxt.fillStyle = this.params.color; cxt.font = this.params.size + Arial  cxt.fillText(this.params.text, this.params.density*i, j*this.params.density); }

防止用戶刪除

使用定時(shí)器，定時(shí)檢查指紋是否存在

let self = this; window.setInterval(function(){ if (!document.getElementById(self.params.id)) { self._init(); }, 1000);

項(xiàng)目編譯

使用glup編譯

var gulp = require( gulp ), uglify = require( gulp-uglify ), babel = require( gulp-babel  gulp.task( minify , function () { return gulp.src( ./src/index.js ) // 要壓縮的html' target='_blank'>js文件 .pipe(babel()) .pipe(uglify()) .pipe(gulp.dest( ./dist //壓縮后的路徑 });

【相關(guān)推薦：HTML5視頻教程】

以上就是HTML5網(wǎng)頁水印SDK的實(shí)現(xiàn)方法的詳細(xì)內(nèi)容，其它編程語言

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時(shí)間聯(lián)系我們修改或刪除，多謝。