เมื่อเรียกดูเว็บไซต์ มักจะต้องใช้ลายน้ำของหน้าเว็บเพื่อป้องกันไม่ให้ผู้ใช้จับภาพหน้าจอหรือบันทึกหน้าจอเพื่อเปิดเผยข้อมูลที่ละเอียดอ่อนและติดตามแหล่งที่มาของผู้ใช้ ตัวอย่างเช่น ในซอฟต์แวร์ DingTalk ที่ใช้กันทั่วไป ชื่อของคุณจะอยู่บนพื้นหลังแชท แล้วจะบรรลุเอฟเฟกต์ลายน้ำของเว็บได้อย่างไร?
SDK ลายน้ำเว็บ แนวคิดการใช้งาน1. สามารถสร้างลายน้ำตามข้อมูลผู้ใช้ปัจจุบันที่ได้รับ เช่น ชื่อ ชื่อเล่น ID เป็นต้น
2. สร้าง Canvas ที่ครอบคลุมทั้งหน้าต่างและไม่ส่งผลกระทบต่อองค์ประกอบอื่นๆ
3. คุณสามารถแก้ไขระยะห่าง ขนาด และสีแบบอักษรได้
4. ไม่ต้องอาศัย Jquery
5. จำเป็นต้องป้องกันไม่ให้ผู้ใช้ลบ Canvas นี้ด้วยตนเอง
การวิเคราะห์การดำเนินงาน พารามิเตอร์เริ่มต้นขนาด: ขนาดตัวอักษร สีขนาด: สีแบบอักษร id: canvasIdtext: ความหนาแน่นของเนื้อหาข้อความ: การเว้นวรรค ความชัดเจน: ความชัดเจน รองรับคำแนะนำ: เคล็ดลับข้อความไม่รองรับโดย Canvasสร้างแคนวาส
สร้าง Canvas ตาม id และขนาด canvas คือขนาด window.screen หากมี Canvas เก่า ให้ล้างและสร้างใหม่
ผืนผ้าใบอยู่ในตำแหน่งคงที่ในหน้าต่างภาพ และดัชนี z คือ -1
ให้ body = document.getElementsByTagName('body'); ให้ canvas = document.createElement('canvas'); canvas.style.cssText= 'ตำแหน่ง: คงที่; ความกว้าง: 100%; ความสูง: 100%; ซ้าย: 0; ด้านบน :0;z-ดัชนี: -1;'; body[0].appendChild(canvas); อัลกอริธึมการสร้างลายนิ้วมือ ให้ canvas = document.getElementById(this.params.id); ให้ cxt = canvas.getContext('2d'); ให้ times = window.screen.width * this.params.clarity / this.params.density;//horizontal เวลาในการกรอกข้อความให้ heightTimes = window.screen.height * this.params.clarity * 1.5/ this.params.density; // เวลาเติมข้อความแนวตั้ง cxt.rotate (-15 * Math.PI/180); // Tilt canvas 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); ป้องกันไม่ให้ผู้ใช้ลบใช้ตัวจับเวลาเพื่อตรวจสอบเป็นประจำว่ามีลายนิ้วมืออยู่หรือไม่
ให้ self = this; window.setInterval(function(){ if (!document.getElementById(self.params.id)) { self._init(); } }, 1,000); การรวบรวมโครงการคอมไพล์โดยใช้ GLUP
var gulp = ต้องการ ('gulp'), uglify = ต้องการ (gulp-uglify), babel = ต้องการ (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