مثال على كود التنفيذ لـ h5 web watermark SDK

عند تصفح مواقع الويب، غالبًا ما تكون هناك حاجة إلى علامات مائية لصفحات الويب لمنع المستخدمين من التقاط لقطات شاشة أو تسجيلات الشاشة لكشف المعلومات الحساسة وتتبع مصدر المستخدم. على سبيل المثال، في برنامج DingTalk شائع الاستخدام، سيكون اسمك موجودًا في خلفية الدردشة. فكيف يمكن تحقيق تأثير العلامة المائية على الويب؟

1. يمكن إنشاء علامات مائية بناءً على معلومات المستخدم الحالية التي تم الحصول عليها، مثل الاسم واللقب والمعرف وما إلى ذلك.

2. قم بإنشاء لوحة قماشية تغطي النافذة بأكملها ولا تؤثر على العناصر الأخرى

3. يمكنك تعديل تباعد الخط وحجمه ولونه

4. لا يعتمد على Jquery

5. تحتاج إلى منع المستخدمين من حذف هذه اللوحة القماشية يدويًا

 الحجم: حجم الخط اللون: معرف لون الخط: CanvasIdtext: كثافة محتوى النص: وضوح التباعد: دعم الوضوح: تلميح النص غير مدعوم من Canvas

قم بإنشاء لوحة قماشية بناءً على المعرف، وحجم اللوحة القماشية هو حجم النافذة.الشاشة. إذا كان هناك لوحة قماشية قديمة، فقم بمسحها وإعادة إنشائها.

تم وضع اللوحة القماشية بشكل ثابت في النافذة المرئية، ومؤشر z هو -1

 Let body = document.getElementsByTagName('body'); Let Canvas = document.createElement('canvas'); :0;z-index: -1;'; body[0].appendChild(canvas);

 Let Canvas = document.getElementById(this.params.id); Let cxt = Canvas.getContext('2d'); Let times = window.screen.width * this.params.clarity / this.params.density; تتيح أوقات ملء النص 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); Index.js') // ملف js المراد ضغطه.pipe(babel()) .pipe(uglify()) .pipe(gulp.dest('./dist')); // مسار مضغوط});

https://tianshengjie.cn/apps/web_fingerprint

جيثب: https://github.com/Jay-tian/web-fingerprint

حزمة Npm: https://www.npmjs.com/package/web-fingerprint

ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.