Implementation code example of h5 web watermark SDK

When browsing websites, web page watermarks are often needed to prevent users from taking screenshots or screen recordings to expose sensitive information and trace the user's source. For example, in our commonly used DingTalk software, your name will be on the chat background. So how to achieve web watermark effect?

1. Can generate watermarks based on the current user information obtained, such as name, nickname, ID, etc.

2. Generate a Canvas that covers the entire window and does not affect other elements

3. You can modify the font spacing, size, and color

4. Does not rely on Jquery

5. Need to prevent users from manually deleting this Canvas

 size: font size color: font color id: canvasIdtext: text content density: spacing clarity: clarity supportTip: text tip not supported by Canvas

Generate a Canvas based on the id, and the canvas size is the window.screen size. If there is an old Canvas, clear it and regenerate it.

The canvas is fixedly positioned in the visual window, and the z-index is -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;//horizontal Text filling times let heightTimes = window.screen.height * this.params.clarity * 1.5/ this.params.density; //Vertical text filling times cxt.rotate(-15*Math.PI/180); //Tilt canvas 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); } }

Use a timer to regularly check whether fingerprints exist

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

Compile with glup

 var gulp = require('gulp'), uglify = require(gulp-uglify), babel = require(gulp-babel); gulp.task('minify', function () { return gulp.src('./src/ index.js') // js file to be compressed.pipe(babel()) .pipe(uglify()) .pipe(gulp.dest('./dist')); //Compressed path});

https://tianshengjie.cn/apps/web_fingerprint

Github: https://github.com/Jay-tian/web-fingerprint

Npm package: https://www.npmjs.com/package/web-fingerprint

The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.