Codebeispiel für die Implementierung des h5 Web Watermark SDK

Beim Surfen auf Websites werden häufig Wasserzeichen auf Webseiten benötigt, um zu verhindern, dass Benutzer Screenshots oder Bildschirmaufzeichnungen machen, um vertrauliche Informationen offenzulegen und die Quelle des Benutzers zu ermitteln. In unserer häufig verwendeten DingTalk-Software wird Ihr Name beispielsweise im Chat-Hintergrund angezeigt. Wie kann man also einen Web-Wasserzeicheneffekt erzielen?

1. Kann Wasserzeichen basierend auf den aktuell erhaltenen Benutzerinformationen wie Name, Spitzname, ID usw. generieren.

2. Erzeugen Sie eine Leinwand, die das gesamte Fenster abdeckt und andere Elemente nicht beeinträchtigt

3. Sie können den Schriftabstand, die Größe und die Farbe ändern

4. Verlässt sich nicht auf Jquery

5. Es muss verhindert werden, dass Benutzer diesen Canvas manuell löschen

 Größe: Schriftgröße Farbe: Schriftfarbe ID: CanvasIdText: Textinhaltsdichte: Abstand Klarheit: Klarheit SupportTipp: Textspitze wird von Canvas nicht unterstützt

Generieren Sie eine Leinwand basierend auf der ID. Die Leinwandgröße entspricht der Größe von window.screen. Wenn eine alte Leinwand vorhanden ist, löschen Sie sie und generieren Sie sie neu.

Die Leinwand ist fest im visuellen Fenster positioniert und der Z-Index ist -1

 let body = document.getElementsByTagName('body'); let canvas = document.createElement('canvas'); :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 Textfüllzeiten let heightTimes = window.screen.height * this.params.clarity * 1.5/ this.params.density; //Vertikale Textfüllzeiten cxt.rotate(-15*Math.PI/180); //Leinwand neigen 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);

Überprüfen Sie regelmäßig mithilfe eines Timers, ob Fingerabdrücke vorhanden sind

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

Mit glup kompilieren

 var gulp = require('gulp'), uglify = require(gulp-uglify), babel = require(gulp-babel('minify', function () { return gulp.src('./src/ index.js') // Zu komprimierende js-Datei.pipe(babel()) .pipe(uglify()) .pipe(gulp.dest('./dist')); //Komprimierter Pfad});

https://tianshengjie.cn/apps/web_fingerprint

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

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

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.