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érer le 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);

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;//横向文字填充次数
      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);
        }
      }

Empêcher la suppression des utilisateurs

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);

Compilez le projet

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!