วิธีดาวน์โหลดรหัส QR และภาพลายน้ำบนผืนผ้าใบ

เมื่อวานนี้ ฉันได้เปิดตัวปลั๊กอินสำหรับสร้างโค้ด QR QRCode.js ซึ่งวาดขึ้นโดยใช้ HTML5 Canvas ดังนั้นตัวเอกของวันนี้คือผืนผ้าใบ – การประยุกต์ผืนผ้าใบในทางปฏิบัติ

HTMLCanvasElement จัดเตรียมเมธอด toDataURL ซึ่งส่งคืน URI ข้อมูลที่มีรูปแบบการแสดงรูปภาพที่ระบุโดยพารามิเตอร์ type ด้วยวิธีนี้เราสามารถสร้างรูปภาพโค้ด QR และดาวน์โหลดได้ ตัวอย่างมีดังนี้:

 /*html*/<div id=qrcode>div><a href=javascript:; download=QR code id=down>ดาวน์โหลดโค้ด QR</a>/*js*/var canvas = document.getElementsByTagName(' canvas' )[0];var downImg = document.getElementById('down')img.href = document.getElementsByTagName('canvas')[0].toDataURL('image/png')

คุณสามารถเพิ่มลายน้ำให้กับรูปภาพได้อย่างง่ายดายโดยใช้วิธี fillText และ DrawImage ของ Canvas ตัวอย่างมีดังนี้:

 /*html*/<canvas id=canvas></canvas>/*js*/var img = new Image(); // สร้างองค์ประกอบ img var canvas = document.getElementById('canvas')var ctx = canvas.getContext ('2d');img.src = 'myImage.png';img.onload = function(){ ctx.drawImage(img, 0, 0); ctx.font=30px yahei; // ตั้งค่าข้อความลายน้ำ ctx.fillText(ส่วนหน้าขนาดใหญ่, 1100, 260)}

นั่นคือทั้งหมดสำหรับวันนี้ แบ่งปันแอปพลิเคชัน Canvas อื่นๆ ได้ตามใจชอบ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคน และฉันก็หวังว่าทุกคนจะสนับสนุน VeVb Wulin Network