Exemple de code d'implémentation du SDK de filigrane Web h5

Lors de la navigation sur des sites Web, les filigranes de pages Web sont souvent nécessaires pour empêcher les utilisateurs de prendre des captures d'écran ou des enregistrements d'écran afin d'exposer des informations sensibles et de retracer la source de l'utilisateur. Par exemple, dans notre logiciel DingTalk couramment utilisé, votre nom apparaîtra sur l'arrière-plan du chat. Alors, comment obtenir l’effet filigrane Web ?

1. Peut générer des filigranes basés sur les informations utilisateur actuelles obtenues, telles que le nom, le surnom, l'identifiant, etc.

2. Générez un canevas qui couvre toute la fenêtre et n'affecte pas les autres éléments

3. Vous pouvez modifier l'espacement, la taille et la couleur de la police

4. Ne repose pas sur Jquery

5. Besoin d'empêcher les utilisateurs de supprimer manuellement ce canevas

 taille : taille de la police couleur : identifiant de la couleur de la police : toileIdtext : densité du contenu du texte : espacement clarté : clarté supportTip : astuce de texte non prise en charge par Canvas

Générez un canevas basé sur l'identifiant et la taille du canevas est la taille de la fenêtre. S'il existe un ancien canevas, effacez-le et régénérez-le.

Le canevas est positionné de manière fixe dans la fenêtre visuelle et l'indice z est de -1.

 let body = document.getElementsByTagName('body'); let canvas = document.createElement('canvas'); canvas.style.cssText= 'position : fixe ; largeur : 100 % ; hauteur : 100 % ; gauche : 0 ; haut :0;z-index: -1;'; corps[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 Les temps de remplissage du texte laissent heightTimes = window.screen.height * this.params.clarity * 1.5/ this.params.density; //Temps de remplissage du texte vertical cxt.rotate(-15*Math.PI/180); //Incliner le canevas pour(let i = 0; i < times; i++) { for(let j = 0; j < heightTimes; j++) ) { cxt.fillStyle = this.params.color; cxt.font = this.params.size + 'cxt.fillText(this.params.text, this.params.density*i, j*this.params.density); } }

Utilisez une minuterie pour vérifier régulièrement si des empreintes digitales existent

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

Compiler avec Glup

 var gulp = require('gulp'), uglify = require(gulp-uglify), babel = require(gulp-babel); gulp.task('minify', function () { return gulp.src('./src/ index.js') // fichier js à compresser.pipe(babel()) .pipe(uglify()) .pipe(gulp.dest('./dist')); //Chemin compressé});

https://tianshengjie.cn/apps/web_fingerprint

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

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

Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.