Lưu DIV thành ảnh với html2canvas (canvas2image) trong HTML

Thư viện html2canvas cho phép "chụp ảnh" một element DOM (div, section, v.v.) và render thành <canvas>, sau đó xuất ra ảnh (PNG, JPEG) hoặc download.

HTML mẫu

<div id="cpimg" style="padding: 20px; background: white; border: 1px solid #ccc;">
  <h4>Hello world</h4>
  <p>Nội dung bất kỳ: text, hình ảnh, CSS...</p>
</div>
<button id="btnSave">Lưu thành ảnh</button>

JavaScript (html2canvas v1+)

document.getElementById('btnSave').addEventListener('click', function() {
  html2canvas(document.querySelector("#cpimg"), {
    scale: 2, // độ phân giải cao hơn (2x)
    useCORS: true, // cho phép load ảnh cross-origin
    logging: false
  }).then(function(canvas) {
    // 1. Hiển thị canvas preview
    document.body.appendChild(canvas);

    // 2. Hoặc download dưới dạng PNG
    var link = document.createElement('a');
    link.download = 'div-snapshot.png';
    link.href = canvas.toDataURL('image/png');
    link.click();

    // 3. Hoặc upload lên server
    // canvas.toBlob(function(blob) { upload(blob); }, 'image/png');
  });
});

Cài đặt

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>

Lưu ý quan trọng

• Cross-origin images: Nếu div chứa ảnh từ domain khác, cần useCORS: true VÀ server ảnh có header Access-Control-Allow-Origin. Nếu không, canvas bị "tainted" → không thể toDataURL().
• CSS không hỗ trợ đầy đủ: Một số CSS phức tạp (filter, blend-mode, clip-path mới) có thể render không chính xác.
• Font: Font phải đã load xong trước khi gọi html2canvas (dùng document.fonts.ready).
• Kích thước lớn: Canvas có giới hạn kích thước (thường ~16384px). Scale cao + div lớn → lỗi.

Mã trong bài gốc dùng cú pháp cũ (callback), phiên bản mới dùng Promise (.then()).