ฉันจะสอนวิธีวาดโปสเตอร์ง่ายๆโดยใช้ผ้าใบด้วยมือ

ลา ลา ลา เรามาพูดถึงข้อกำหนดกันก่อน ผลิตภัณฑ์ต้องการให้ผู้ใช้แชร์รูปภาพไปยัง WeChat, QQ และแพลตฟอร์มอื่นๆ ภายในแอปของเรา รูปภาพประกอบด้วยชื่อผู้ใช้ รูปประจำตัว และโค้ด QR พร้อมข้อมูลของตนเอง ถ้าอย่างนั้นจะสร้างโปสเตอร์นี้ได้อย่างไร~~~

ก่อนอื่น เจ้านายของเราบอกฉันว่ามีปลั๊กอินชื่อ html2canvas หน้าที่ของมันคือการแปลงโหนด DOM ให้เป็นรูปภาพ ซึ่งเป็นสิ่งที่ดี ฉันทดสอบแล้วและใช้งานได้ แต่ ~ ปลั๊กอินนี้ใหญ่ไปหน่อย รู้สึกเหมือนสูญเสียที่จะแนะนำสิ่งที่ยิ่งใหญ่เพื่อตอบสนองความต้องการของผู้โพสต์! - - งั้นฉันวาดเองดีกว่า~

ขั้นแรกให้ทำการเรนเดอร์

Dangdangdangdang~~~ โปสเตอร์ที่สร้างขึ้นครั้งสุดท้ายประกอบด้วยอวาตาร์ ชื่อ และโค้ด QR ในภาพคือโค้ด QR ของ Baidu~ สุดท้ายนี้ base64 จะถูกสร้างขึ้นเพื่อการแชร์บนแพลตฟอร์มหลักๆ

เพื่อเป็นการไม่ให้เสียเวลา นี่คือโค้ด (ฉันไม่ได้รวบรวมโค้ดนี้เพราะฉันขี้เกียจ...)

 <canvas id=myCanvas width=750 height=1200 style=border:1px solid #d3d3d3;พื้นหลัง:#ffffff;></canvas>

โหนด DOM นั้นง่ายมาก เพียงสร้างแท็ก canvas และเขียนแอตทริบิวต์ตามที่คุณต้องการ~

 var canvas = document.getElementById(myCanvas); // รับฟังก์ชันโหนด canvas imageToCanvas (canvas, url1, url2, code) { // ส่งภาพพื้นหลังของโหนด canvas url1 avatar url2 รหัส QR var ctx = canvas.getContext (2d) ; var img1 = new Image(); img1.src = url1; // ฉันจะไม่อธิบายอันก่อนหน้า, สร้างรูปภาพ img1.onload = function(){ ctx.drawImage(img1,0,0); //เมื่อโหลดรูปภาพแล้ว รูปภาพจะถูกกำหนดให้กับผืนผ้าใบโดยเริ่มจาก 0 0 var img2 = รูปภาพใหม่ (); img2.src = url2; img2.onload = function () { ctx.save (); // บันทึกสถานะผืนผ้าใบปัจจุบัน ctx.arc (374, 134, 44, 0, 2 * คณิตศาสตร์ . PI); // การดำเนินการตัดจะตัดอวาตาร์สี่เหลี่ยมให้เป็นวงกลม//ตัดวงกลมออกจากแคนวาส ctx.clip(); //ครอบตัด ctx.drawImage(img2, 330, 90, 88, 88); // ใส่ img2 ที่ 330 90 พิกัดที่มีขนาด 88 ctx.restore(); // ปล่อยสถานะแคนวาส ctx.font=28px Arial; textAlign=center; ctx.fillStyle ='#FFFFFF'; //ขั้นตอนก่อนหน้านี้คือการตั้งค่าแอตทริบิวต์ข้อความให้อยู่ตรงกลาง ctx.fillText (ชื่อของคุณคือ Shenma, 375,220) // ในทางปฏิบัติ การส่งผ่านพารามิเตอร์เพิ่มเติมนั้นใช้ได้ var img3 = new Image() ; img3.src = code; img3.onload = function() { ctx.drawImage(img3,136,554,478,478); // เพิ่มรูปภาพ var imgCode = ConvertCanvasToImage(canvas); //แปลงรูปภาพเป็น base64 console.log(imgCode.getAttribute('src')) } } }}imageToCanvas(canvas,1.png,'3.jpeg','code.png') ; // ฟังก์ชั่นการเริ่มต้น ConvertCanvasToImage (canvas) { var image = new Image (); image.src = canvas.toDataURL (image/png); // แปลงผืนผ้าใบเป็นรูปภาพส่งคืน img;}

ด้วยวิธีนี้ คุณจะได้ base64 แล้วใช้งาน

ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network