home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> JavaScript

บันทึก DIV เป็นรูปภาพด้วย HTML5 Canvas และ html2canvas

ใช้ html2canvas() แปลง DIV เป็นรูปภาพ

HTML

<div id="cpimg" style="padding: 25px;">
  <h4>Welcome</h4>
</div>

JavaScript

html2canvas(document.querySelector("#cpimg")).then(function(canvas) {
    document.body.appendChild(canvas); // แสดง canvas ที่สร้างขึ้น
    // หรือดาวน์โหลด:
    // var link = document.createElement('a');
    // link.download = 'div-image.png';
    // link.href = canvas.toDataURL();
    // link.click();
});

ต้องโหลดไลบรารี html2canvas.js ก่อนใช้งาน ฟังก์ชันคืนค่า Promise ที่ resolve เป็น canvas element