Ejemplo de código de implementación del SDK de marca de agua web h5

Al navegar por sitios web, a menudo se necesitan marcas de agua en las páginas web para evitar que los usuarios tomen capturas de pantalla o grabaciones de pantalla para exponer información confidencial y rastrear la fuente del usuario. Por ejemplo, en nuestro software DingTalk de uso común, su nombre aparecerá en el fondo del chat. Entonces, ¿cómo lograr el efecto de marca de agua web?

1. Puede generar marcas de agua basadas en la información actual del usuario obtenida, como nombre, apodo, identificación, etc.

2. Generar un Canvas que cubra toda la ventana y no afecte a otros elementos

3. Puedes modificar el espaciado, el tamaño y el color de la fuente.

4. No depende de Jquery

5. Necesidad de evitar que los usuarios eliminen manualmente este lienzo.

 tamaño: tamaño de fuente color: color de fuente id: canvasIdtext: densidad del contenido del texto: espaciado claridad: claridad supportTip: sugerencia de texto no admitida por Canvas

Genere un lienzo según la identificación, y el tamaño del lienzo es el tamaño de la ventana. Si hay un lienzo antiguo, bórrelo y regénelo.

El lienzo está colocado de forma fija en la ventana visual y el índice z es -1

 let body = document.getElementsByTagName('body'); let canvas = document.createElement('canvas'); canvas.style.cssText= 'posición: fija;ancho: 100%;alto: 100%;izquierda:0;arriba :0;índice z: -1;'; cuerpo[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 Los tiempos de llenado del texto let heightTimes = window.screen.height * this.params.clarity * 1.5/ this.params.density; //Tiempos de llenado de texto vertical cxt.rotate(-15*Math.PI/180); //Inclinar lienzo 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'; this.params.density*i, j*this.params.density);

Utilice un temporizador para comprobar periódicamente si existen huellas dactilares

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

compilar usando glup

 var gulp = require('gulp'), uglify = require(trago-uglify), babel = require(gulp-babel); gulp.task('minify', function () { return gulp.src('./src/ index.js') // archivo js a comprimir.pipe(babel()) .pipe(uglify()) .pipe(gulp.dest('./dist')); //Ruta comprimida});

https://tianshengjie.cn/apps/web_fingerprint

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

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

Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.