Maison > Article > interface Web > Introduction à la méthode d'implémentation du SDK de filigrane Web (exemple de code)
Cet article vous présente la méthode d'implémentation du SDK de filigrane Web (exemple de code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.
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 de page Web, idées de mise en œuvre
1 Il 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érer un canevas qui couvre toute la fenêtre et n'affecte pas les autres éléments
3. Peut modifier l'espacement, la taille et la couleur des polices
4 Ne repose pas sur Jquery
5. de supprimer manuellement ce Canvas
Analyse de l'implémentation
Paramètres initiaux
size: 字体大小 color: 字体颜色 id: canvasId text: 文本内容 density: 间距 clarity: 清晰度 supportTip: Canvas不支持的文字提示
Générez un canevas en fonction de l'identifiant, la taille du canevas est la taille de la fenêtre. écran, 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, avec un z-index de -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;//横向文字填充次数 let heightTimes = window.screen.height * this.params.clarity * 1.5/ this.params.density; //纵向文字填充次数 cxt.rotate(-15*Math.PI/180); //倾斜画布 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); } }
Utilisez une minuterie pour vérifier si les empreintes digitales existent régulièrement
let self = this; window.setInterval(function(){ if (!document.getElementById(self.params.id)) { self._init(); } }, 1000);
Utilisez glup pour compiler
var gulp = require('gulp'), uglify = require("gulp-uglify"), babel = require("gulp-babel"); gulp.task('minify', function () { return gulp.src('./src/index.js') // 要压缩的js文件 .pipe(babel()) .pipe(uglify()) .pipe(gulp.dest('./dist')); //压缩后的路径 });
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!