Exemplo de código de implementação do SDK de marca d'água da web h5

Ao navegar em sites, muitas vezes são necessárias marcas d'água em páginas da web para evitar que os usuários façam capturas de tela ou gravações de tela para expor informações confidenciais e rastrear a origem do usuário. Por exemplo, em nosso software DingTalk comumente usado, seu nome estará no fundo do bate-papo. Então, como conseguir o efeito de marca d'água da web?

1. Pode gerar marcas d’água com base nas informações atuais do usuário obtidas, como nome, apelido, ID, etc.

2. Gere um Canvas que cubra toda a janela e não afete outros elementos

3. Você pode modificar o espaçamento, tamanho e cor da fonte

4. Não depende de Jquery

5. Necessidade de evitar que os usuários excluam manualmente este Canvas

 tamanho: tamanho da fonte cor: cor da fonte id: canvasIdtext: densidade do conteúdo do texto: espaçamento clareza: clareza supportTip: dica de texto não suportada pelo Canvas

Gere um Canvas com base no ID, e o tamanho do canvas será o tamanho window.screen. Se houver um Canvas antigo, limpe-o e gere-o novamente.

A tela está posicionada fixamente na janela visual e o índice z é -1

 let body = document.getElementsByTagName('body'); let canvas = document.createElement('canvas'); canvas.style.cssText= 'posição: fixa;largura: 100%;altura: 100%;esquerda:0;topo :0;índice z: -1;'; corpo[0].appendChild(canvas);

 deixe canvas = document.getElementById(this.params.id); deixe cxt = canvas.getContext('2d'); Os tempos de preenchimento de texto permitem heightTimes = window.screen.height * this.params.clarity * 1.5/ this.params.density; //Tempos de preenchimento de texto vertical cxt.rotate(-15*Math.PI/180); //Inclinação da tela 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.densidade*i, j*this.params.densidade);

Use um cronômetro para verificar regularmente se existem impressões digitais

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

Compilar usando glup

 var gulp = require('gulp'), uglify = require(gulp-uglify), babel = require(gulp-babel('minify', function () { return gulp.src('./src/); index.js') // arquivo js a ser compactado.pipe(babel()) .pipe(uglify()) .pipe(gulp.dest('./dist')); //Caminho compactado});

https://tianshengjie.cn/apps/web_fingerprint

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

Pacote Npm: https://www.npmjs.com/package/web-fingerprint

O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.