Méthode de mise en œuvre du SDK de filigrane Web HTML5

Le contenu de cet article concerne l'exemple de code d'implémentation du SDK de filigrane Web HTML5. 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 ?

Filigrane de page WebSDK, idée de mise en œuvre

1.Peut obtenir des informations utilisateur plus récentes, telles que le nom, pseudo, identifiant, etc., générer un filigrane d'image
2. Générez un canevas qui couvre toute la fenêtre et n'affecte pas les autres éléments
3. Espacement et taille des polices, Color
4. Ne dépend pas de Jquery
5 Nécessité d'empêcher les utilisateurs de supprimer manuellement ce Canvas

Implémenter l'analyse

. Paramètres initiaux

size: 字体大小
color: 字体颜色
id: canvasId
text: 文本内容
density: 间距
clarity: 清晰度
supportTip: Canvas不支持的文字提示

Générer le canevas

Générer le canevas en fonction de l'identifiant. La taille du canevas est la taille de la fenêtre. vieille toile, nettoyez-la et régénérez-la.

Le canevas est positionné de manière fixe dans la fenêtre visuelle et le z-index est -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 + &#39; Arial&#39;;
         cxt.fillText(this.params.text, this.params.density*i, j*this.params.density);
       }
     }

Empêcher les utilisateurs de supprimer

Utiliser 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 projets

Compiler en utilisant glup

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')); //压缩后的路径
  });

[Recommandations associées : Tutoriel vidéo HTML5]

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!