Einführung in die Implementierungsmethode des Web-Wasserzeichen-SDK (Codebeispiel)

Dieser Artikel bietet Ihnen eine Einführung in die Implementierungsmethode des Web-Wasserzeichen-SDK (Codebeispiel). Ich hoffe, dass er 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-Wasserzeichen-SDK, Implementierungsideen

1. Es kann Wasserzeichen basierend auf den aktuell erhaltenen Benutzerinformationen wie Name, Spitzname, ID usw. generieren.
2.Erzeugen Sie eine Leinwand, die das gesamte Fenster abdeckt und keine Auswirkungen auf andere Elemente hat.
3. Kann den Schriftabstand, die Größe und die Farbe ändern.
Verlässt sich nicht auf JQuery.
5 vom manuellen Löschen dieses Canvas

Implementierungsanalyse

Anfangsparameter

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

Canvas generieren

Canvas generieren Basierend auf der ID und der Leinwandgröße entspricht die Bildschirmgröße. Wenn eine alte Leinwand vorhanden ist, löschen Sie sie und generieren Sie sie neu.

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 + ' Arial';
          cxt.fillText(this.params.text, this.params.density*i, j*this.params.density);
        }
      }

Benutzerlöschung verhindern

Verwenden Sie einen Timer. Überprüfen Sie regelmäßig, 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')); //压缩后的路径
    });

Das obige ist der detaillierte Inhalt vonEinführung in die Implementierungsmethode des Web-Wasserzeichen-SDK (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!