h5 웹 워터마크 SDK 구현 코드 예시

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

1. 이름, 닉네임, ID 등 현재 획득한 사용자 정보를 기반으로 워터마크를 생성할 수 있습니다.

2. 전체 창을 덮고 다른 요소에 영향을 주지 않는 캔버스를 생성합니다.

3. 글꼴 간격, 크기, 색상을 수정할 수 있습니다.

4. Jquery에 의존하지 않습니다.

5. 사용자가 이 캔버스를 수동으로 삭제하는 것을 방지해야 합니다.

 size: 글꼴 크기 color: 글꼴 색상 id: canvasIdtext: 텍스트 콘텐츠 밀도: 간격 선명도: 선명도 supportTip: Canvas에서 지원되지 않는 텍스트 팁

id를 기준으로 Canvas를 생성하며, Canvas 크기는 window.screen 크기입니다. 기존 Canvas가 있으면 지우고 다시 생성합니다.

캔버스는 시각적 창에 고정되어 있으며 z-index는 -1입니다.

 let body = document.getElementsByTagName('body'); let canvas = document.createElement('canvas'); canvas.style.cssText= '위치: 고정;폭: 100%;높이: 100%;왼쪽:0;상단 :0;z-색인: -1;'; body[0].appendChild(캔버스);

 let canvas = document.getElementById(this.params.id); let cxt = canvas.getContext('2d'); let times = window.screen.width * this.params.clarity / this.params.density;//horizontal 텍스트 채우기 시간 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'; 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)('minify', function () { return gulp.src('./src/ index.js') // 압축할 js 파일.pipe(babel()) .pipe(uglify()) .pipe(gulp.dest('./dist')); //압축된 경로});

https://tianshengjie.cn/apps/web_fingerprint

Github:https://github.com/Jay-tian/web-fingerprint

Npm 패키지: https://www.npmjs.com/package/web-fingerprint

위 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.