h5 Web ウォーターマーク SDK 実装コード例

Web サイトを閲覧するとき、ユーザーがスクリーンショットや画面録画を撮って機密情報を公開したり、ユーザーのソースを追跡したりするのを防ぐために、Web ページの透かしが必要になることがよくあります。たとえば、一般的に使用されている DingTalk ソフトウェアでは、チャットの背景にあなたの名前が表示されます。では、Web 透かし効果を実現するにはどうすればよいでしょうか?

1. 名前、ニックネーム、ID など、取得した現在のユーザー情報に基づいてウォーターマークを生成できます。

2. ウィンドウ全体をカバーし、他の要素に影響を与えないキャンバスを生成します。

3. フォントの間隔、サイズ、色を変更できます

4. Jqueryに依存しない

5. ユーザーがこのキャンバスを手動で削除できないようにする必要がある

 size: フォント サイズ color: フォントの色 id: CanvasIdtext: テキスト コンテンツ Density: 間隔 clarity: 明瞭度 supportTip: Canvas でサポートされていないテキスト ヒント

ID に基づいて Canvas を生成します。キャンバスのサイズは window.screen サイズになります。古い Canvas がある場合は、それをクリアして再生成します。

キャンバスはビジュアル ウィンドウ内で固定的に配置され、z インデックスは -1 です。

 let body = document.getElementsByTagName('body'); let Canvas = document.createElement('canvas'); Canvas.style.cssText= '位置: 固定;幅: 100%;高さ: 100%;左:0; :0;z-インデックス: -1;'; body[0].appendChild(canvas);

 let Canvas = document.getElementById(this.params.id); let cxt = Canvas.getContext('2d'); let 回 = window.screen.width * this.params.clarity / this.params.density;//horizo​​ntalテキストの充填時間は、heightTimes = window.screen.height * this.params.clarity * 1.5/ this.params.density; とします。 //縦書きテキストの塗りつぶし時間 cxt.rotate(-15*Math.PI/180); //キャンバスを傾ける for(let i = 0; i < 回; i++) { for(let j = 0; j < heightTimes; j++ ) { cxt.fillStyle = this.params.color; cxt.font = this.params.size + ' 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);

gup でコンパイルする

 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 Network をご支援いただければ幸いです。