Chụp ảnh màn hình div bằng JavaScript (html2canvas)

Để chụp ảnh một phần trang web (không chỉ canvas), dùng thư viện html2canvas chuyển DOM thành canvas, sau đó tải xuống ảnh.

Ví dụ

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
  <style>
    #capture { height:300px; width:300px; display:flex; flex-direction:column; background:rgb(43,216,216); }
    span { flex:1; width:100%; display:flex; text-align:center; justify-content:center; align-items:center; color:#fff; font-size:20px; }
    #first { background:rgb(15,168,15); }
    #second { background:rgb(43,93,228); }
    #third { background:rgb(194,55,13); }
  </style>
</head>
<body>
  <script>
    const download = () => {
      html2canvas(document.querySelector('#capture')).then(canvas => {
        document.body.appendChild(canvas);
      });
    };
  </script>
  <div id='capture'>
    <span id='first'>First Block</span>
    <span id='second'>Second Block</span>
    <span id='third'>Third Block</span>
  </div>
  <button onclick="download()">Download</button>
</body>
</html>

Kết quả

Sau khi bấm Download, canvas xuất hiện, chuột phải để lưu ảnh.