HTML5 웹 워터마크 SDK 구현 방법

이 글의 내용은 HTML5 웹 워터마크 SDK의 구현 코드 예시입니다. 참고할 만한 가치가 있는 친구들이 참고하시면 도움이 될 것입니다.

웹사이트를 탐색할 때 사용자가 민감한 정보를 노출하고 사용자의 소스를 추적하기 위해 스크린샷이나 화면 녹화를 찍는 것을 방지하기 위해 웹페이지 워터마크가 필요한 경우가 많습니다. 예를 들어, 일반적으로 사용되는 DingTalk 소프트웨어에서는 귀하의 이름이 채팅 배경에 표시됩니다. 그렇다면 웹 워터마크 효과를 얻으려면 어떻게 해야 할까요?

웹페이지 워터마크SDK, 구현 아이디어

1. 현재 획득한 이름, 닉네임, ID 등의 사용자 정보를 기반으로 사진 워터마크를 생성할 수 있습니다.
2. 캔버스, 전체 창을 덮고 다른 요소에 영향을 미치지 않습니다
3. 글꼴 간격, 크기, 색상을 수정할 수 있습니다
4. Jquery에 의존하지 않습니다
5. 사용자가 이 캔버스를 수동으로 삭제하는 것을 방지해야 합니다

구현 분석.

초기 매개변수

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

Generate Canvas

id를 기준으로 Canvas를 생성합니다. 캔버스 크기는 window.screen 크기와 같습니다. 기존 Canvas가 있으면 지우고 다시 생성합니다.

캔버스는 시각적 창에 고정되어 있으며 z-index는 -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);

지문 생성 알고리즘

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

사용자 삭제 방지

타이머를 사용하여 정기적으로 지문 존재 여부를 확인하세요

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

프로젝트 컴파일

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

로 컴파일

[관련 권장 사항:

HTML5 비디오 튜토리얼]

위 내용은 HTML5 웹 워터마크 SDK 구현 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!