Contoh kode implementasi SDK watermark web h5

Saat menjelajahi situs web, tanda air halaman web sering kali diperlukan untuk mencegah pengguna mengambil tangkapan layar atau rekaman layar untuk mengungkap informasi sensitif dan melacak sumber pengguna. Misalnya, dalam perangkat lunak DingTalk kami yang umum digunakan, nama Anda akan ada di latar belakang obrolan. Jadi bagaimana cara mencapai efek watermark web?

1. Dapat menghasilkan watermark berdasarkan informasi pengguna yang diperoleh saat ini, seperti nama, nama panggilan, ID, dll.

2. Hasilkan Canvas yang menutupi seluruh jendela dan tidak mempengaruhi elemen lainnya

3. Anda dapat mengubah spasi font, ukuran, dan warna

4. Tidak bergantung pada Jquery

5. Perlu mencegah pengguna menghapus Canvas ini secara manual

 ukuran: ukuran font warna: id warna font: canvasIdteks: kepadatan konten teks: kejelasan spasi: dukungan kejelasanTip: tip teks tidak didukung oleh Canvas

Hasilkan Kanvas berdasarkan id, dan ukuran kanvas adalah ukuran jendela.layar. Jika ada Kanvas lama, hapus dan buat ulang.

Kanvas diposisikan secara tetap di jendela visual, dan indeks-z adalah -1

 biarkan body = document.getElementsByTagName('body'); biarkan kanvas = document.createElement('canvas');kiri:0;atas :0;z-index: -1;'; body[0].appendChild(kanvas);

 biarkan kanvas = document.getElementById(this.params.id); biarkan cxt = kanvas.getContext('2d'); Waktu pengisian teks let heightTimes = window.screen.height * this.params.clarity * 1.5/ this.params.density; //Waktu pengisian teks vertikal cxt.rotate(-15*Math.PI/180); //Miringkan kanvas 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'; ini.params.densitas*i, j*ini.params.densitas);

Gunakan pengatur waktu untuk memeriksa secara teratur apakah ada sidik jari

 biarkan diri = ini; window.setInterval(fungsi(){ if (!document.getElementById(self.params.id)) { self._init(); } }, 1000);

Kompilasi menggunakan glup

 var gulp = memerlukan('gulp'), uglify = memerlukan(gulp-uglify), babel = memerlukan(gulp-babel); gulp.task('minify', function () { return gulp.src('./src/ index.js') // file js yang akan dikompresi.pipe(babel()) .pipe(uglify()) .pipe(gulp.dest('./dist')); //Jalur terkompresi});

https://tianshengjie.cn/apps/web_fingerprint

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

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

Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.