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 ?
SDK de filigrane Web, idées de mise en œuvre1. 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
analyse de la mise en œuvre paramètres initiauxtaille : 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 CanvasGénérer un canevas
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); Algorithme de génération d'empreintes digitales 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); } } Empêcher les utilisateurs de supprimerUtilisez 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); Compilation de projetsCompiler 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é}); Effet d'empreinte digitale Adresse de l'effethttps://tianshengjie.cn/apps/web_fingerprint
Adresse du projetGithub : 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.