Implementation method of HTML5 web watermark SDK

The content of this article is about the implementation code example of HTML5 web watermark SDK. 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 watermarkSDK, implementation ideas

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

Implement analysis

Initial parameters

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

Generate Canvas

Generate Canvas based on id. The canvas size is window.screen size. If there is an original 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 + &#39; Arial&#39;;
         cxt.fillText(this.params.text, this.params.density*i, j*this.params.density);
       }
     }

Prevent user deletion

Use a timer to check whether the fingerprint exists regularly

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

[Related Recommended: HTML5 video tutorial】

The above is the detailed content of Implementation method of HTML5 web watermark SDK. For more information, please follow other related articles on the PHP Chinese website!