Introduction to the implementation method of web watermark SDK (code example)

This article brings you an introduction to the implementation method of web watermark SDK (code example). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

When browsing websites, web page watermarks are often needed to prevent users from tracing their source after taking screenshots or screen recordings to expose sensitive information. For example, in our commonly used DingTalk software, your name will be on the chat background. So how to achieve the web watermark effect?

Web page watermark SDK, implementation ideas

1. Can generate watermarks based on the current user information obtained, such as name, nickname, ID, etc.
2 .Generate a Canvas that covers the entire window and does not affect other elements
3. Can modify font spacing, size, color
4. Does not rely on Jquery
5. Need to prevent users from manually deleting this Canvas

Implementation analysis

Initial parameters

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

Generate Canvas

Generate Canvas based on id, and the canvas size is window. screen size, if there is an old Canvas, clear it and regenerate it.

The canvas is fixedly positioned in the visual window, and the z-index is -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);

Fingerprint generation algorithm

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

Prevent user deletion

Use a timer, Regularly check whether fingerprints exist

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

Project compilation

Use glup to compile

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

The above is the detailed content of Introduction to the implementation method of web watermark SDK (code example). For more information, please follow other related articles on the PHP Chinese website!