วิธีใช้ html2canvas เพื่อแปลงโค้ด html ให้เป็นรูปภาพ

html2canvas นี่เป็นไลบรารีโอเพ่นซอร์สที่มีชื่อเสียงมากในการจับภาพหน้าจอจากหน้าเว็บเบราว์เซอร์ มันใช้งานง่ายและมีประสิทธิภาพมาก

การใช้ html2canvas นั้นง่ายมาก เพียงแค่ส่งองค์ประกอบ DOM แล้วรับ Canvas ผ่านการเรียกกลับ:

1.html2canvas สร้างเนื้อหารูปภาพแคนวาสโดยแยกวิเคราะห์สไตล์ที่แท้จริงขององค์ประกอบ ดังนั้นจึงมีข้อกำหนดสำหรับเค้าโครงจริงและการแสดงภาพขององค์ประกอบ หากคุณต้องการจับภาพหน้าจอทั้งหมด วิธีที่ดีที่สุดคือแยกองค์ประกอบออกจากโฟลว์เอกสาร (เช่น ตำแหน่ง:สัมบูรณ์)

2. ภาพแคนวาสที่สร้างโดยค่าเริ่มต้นจะพร่ามัวมากบนอุปกรณ์เรตินา การประมวลผลเป็นภาพ 2x สามารถแก้ปัญหานี้ได้:

 var w = $(#code).width(); var h = $(#code).height();//ตั้งค่าความกว้างและความสูงของผืนผ้าใบเป็น 2 เท่าของความกว้างและความสูงของคอนเทนเนอร์ var canvas = document .createElement(canvas) = ​​w * 2; canvas.height = h * 2; canvas.style.width = w + px; canvas.style.height = h + px; canvas.getContext(2d);//จากนั้นปรับขนาดผืนผ้าใบและเพิ่มรูปภาพเป็นสองเท่าเพื่อวาดบนผืนผ้าใบ context.scale(2,2); html2canvas(document.querySelector(#code), { canvas: canvas, onrendered: function ( ผ้าใบ) { ... } });

โครงสร้างโค้ด 1.html

 <section class=share_popup id=html2canvas> <p>การใช้ html2canvas นั้นง่ายมาก ง่ายดายเพียงแค่ส่งองค์ประกอบ DOM จากนั้นรับ Canvas ผ่านการเรียกกลับ</p> <p><img src=1.jpg >< /p> <p>การใช้ html2canvas นั้นง่ายมาก เพียงแค่ส่งองค์ประกอบ DOM จากนั้นรับ Canvas ผ่านการเรียกกลับ</p> </section>

โครงสร้างโค้ด 2.js

 var str = $('#html2canvas'); //console.log(str); html2canvas([str.get(0)], { onrendered: function (canvas) { var image = canvas.toDataURL(รูปภาพ/png) ; var pHtml = <img src=+image+ />; $('#html2canvas').html(pHtml)

ข้างต้นคือคำแนะนำของบรรณาธิการเกี่ยวกับวิธีใช้ html2canvas เพื่อแปลงโค้ด html ให้เป็นรูปภาพ ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใดๆ โปรดฝากข้อความถึงฉัน แล้วโปรแกรมแก้ไขจะตอบกลับคุณทันเวลา ฉันอยากจะขอบคุณทุกคนที่ให้การสนับสนุนเว็บไซต์ศิลปะการต่อสู้ VeVb!