Implementierungsmethode des HTML5-Webwasserzeichen-SDK

Der Inhalt dieses Artikels befasst sich mit dem Implementierungscode-Beispiel des HTML5-Webwasserzeichen-SDK. Ich hoffe, dass es für Freunde hilfreich ist.

Beim Durchsuchen von Websites werden häufig Wasserzeichen auf Webseiten benötigt, um zu verhindern, dass Benutzer Screenshots oder Bildschirmaufzeichnungen machen, um vertrauliche Informationen preiszugeben und die Quelle des Benutzers zu ermitteln. In unserer häufig verwendeten DingTalk-Software wird Ihr Name beispielsweise im Chat-Hintergrund angezeigt. Wie erreicht man also den Web-Wasserzeicheneffekt?

Webseiten-WasserzeichenSDK, Implementierungsidee

1 Kann aktuellere Benutzerinformationen wie Name, Spitzname, ID usw., generieren Sie Bildwasserzeichen
2. Erzeugen Sie eine Leinwand, die das gesamte Fenster abdeckt und keine Auswirkungen auf andere Elemente hat.
3 Schriftabstand und -größe, Farbe
Verlässt sich nicht auf Jquery
5. Es muss verhindert werden, dass Benutzer diese Leinwand manuell löschen

Anfangsparameter

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

Leinwand generieren

Leinwandgröße basierend auf der ID generieren. Wenn es eine alte Leinwand gibt , löschen Sie es und regenerieren Sie es.

Die Leinwand ist fest im visuellen Fenster positioniert, mit einem Z-Index von -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);

Fingerabdruck-Generierungsalgorithmus

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

Benutzerlöschung verhindern

Verwenden Sie einen Timer, um regelmäßig zu überprüfen, ob der Fingerabdruck vorhanden ist

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

Projektkompilierung

Verwenden Sie glup zum Kompilieren

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

【Verwandt empfohlen:

HTML5-Video-Tutorial

]

Das obige ist der detaillierte Inhalt vonImplementierungsmethode des HTML5-Webwasserzeichen-SDK. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!