Пример кода реализации SDK веб-водяных знаков h5

При просмотре веб-сайтов водяные знаки на веб-страницах часто необходимы, чтобы пользователи не могли делать снимки экрана или записи экрана для раскрытия конфиденциальной информации и отслеживания источника пользователя. Например, в нашем часто используемом программном обеспечении DingTalk ваше имя будет отображаться на фоне чата. Так как же добиться эффекта веб-водяного знака?

1. Может генерировать водяные знаки на основе текущей полученной информации о пользователе, такой как имя, псевдоним, идентификатор и т. д.

2. Создайте Canvas, который покрывает все окно и не влияет на другие элементы.

3. Вы можете изменить интервал, размер и цвет шрифта.

4. Не зависит от JQuery.

5. Необходимо запретить пользователям удалять этот Canvas вручную.

 размер: размер шрифта цвет: идентификатор цвета шрифта: CanvasIdtext: плотность текстового содержимого: интервал четкость: поддержка четкостиПодсказка: текстовая подсказка не поддерживается Canvas

Создайте Canvas на основе идентификатора, а размер холста равен размеру window.screen. Если существует старый Canvas, очистите его и создайте заново.

Холст фиксированно расположен в визуальном окне, а z-индекс равен -1.

 let body = document.getElementsByTagName('body'); let Canvas = document.createElement('canvas'); Canvas.style.cssText = 'позиция: фиксированная; ширина: 100%; высота: 100%; слева: 0; вверху :0;z-index: -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); gulp.task('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.