html2canvas將指定區域匯出為圖片（js將div匯出為圖片）

TANKING發表於2022-07-14
HTMLCanvasJS

如何使用JS擷取HTML頁面為圖片呢，html2canvas.js這個外掛可以輕鬆實現。這個原理很簡單，就是html2canvas.js可以將當頁面渲染成一個Canvas圖片，然後儲存下來即可。它不需要來自伺服器任何渲染，整張圖片都是在客戶端瀏覽器建立。

程式碼

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <title>將指定區域匯出圖片</title>
  <script type="text/javascript" src="https://cdn.staticfile.org/html2canvas/0.4.0/html2canvas.js"></script>
</head>
<script type="text/javascript">

// 匯出圖片
function CreatImg() {
 console.log('test');
  html2canvas(document.getElementById('view'), {
    onrendered: function(canvas) {
      // 建立一個canvas
      // document.body.appendChild(canvas);
      dataUrl=canvas.toDataURL("image/jpeg", 1.0);
      DownLoadImg(dataUrl.replace("data:image/jpeg;base64,", ""))
    },
  });
}

function DownLoadImg(content){
 // 格式
 var imageType='png';
 // 檔名
 var fileName=Date.now();
 var raw = window.atob(content);
 var rawLength = raw.length;
 var uInt8Array = new Uint8Array(rawLength);
 for(var i = 0; i < rawLength; ++i) {
     uInt8Array[i] = raw.charCodeAt(i);
 }
 var blob = new Blob([uInt8Array], {type:'image/'+imageType}); 
 var aLink = document.createElement('a');
 var evt = document.createEvent("HTMLEvents");
 evt.initEvent("click", true, true);
 aLink.download = fileName;
 aLink.href = URL.createObjectURL(blob);
 aLink.click();
}
</script>

<body>
  <div id="view" style="background:#f2f2f2 100%; width: 600px;margin:50px auto;">
    <p style="text-align: center;padding:15px 0 20px;font-size:17px;font-weight:bold;height: 0;">2022年高考志願熱門專業</p>
    <table class="table">
      <thead>
      <tr>
      <th style="width: 60px;vertical-align:middle;text-align:center;">序號</th>
      <th style="width: 220px;vertical-align:middle;text-align:center;">專業</th>
      <th style="width: 120px;vertical-align:middle;text-align:center;">專業程式碼</th>
      <th style="width: 80px;vertical-align:middle;text-align:center;">學制 </th>
      <th style="width: 110px;vertical-align:middle;text-align:center;">授予學位</th>
      </tr>
      </thead>
      <tbody>
      <tr>
      <td style="vertical-align:middle;text-align:center;">1</td>
      <td style="vertical-align:middle;text-align:center;">臨床醫學</td>
      <td style="vertical-align:middle;text-align:center;">100201K</td>
      <td style="vertical-align:middle;text-align:center;">五年</td>
      <td style="vertical-align:middle;text-align:center;">醫學學士</td>
      </tr>
      <tr>
      <td style="vertical-align:middle;text-align:center;">2</td>
      <td style="vertical-align:middle;text-align:center;">電腦科學與技術</td>
      <td style="vertical-align:middle;text-align:center;">080901</td>
      <td style="vertical-align:middle;text-align:center;">四年</td>
      <td style="vertical-align:middle;text-align:center;">工學學士</td>
      </tr>
      <tr>
      <td style="vertical-align:middle;text-align:center;">3</td>
      <td style="vertical-align:middle;text-align:center;">軟體工程</td>
      <td style="vertical-align:middle;text-align:center;">080902</td>
      <td style="vertical-align:middle;text-align:center;">四年</td>
      <td style="vertical-align:middle;text-align:center;">工學學士</td>
      </tr>
      <tr>
      <td style="vertical-align:middle;text-align:center;">4</td>
      <td style="vertical-align:middle;text-align:center;">航空航天工程</td>
      <td style="vertical-align:middle;text-align:center;">082001</td>
      <td style="vertical-align:middle;text-align:center;">四年</td>
      <td style="vertical-align:middle;text-align:center;">工學學士</td>
      </tr>
      <tr>
      <td style="vertical-align:middle;text-align:center;">5</td>
      <td style="vertical-align:middle;text-align:center;">漢語言文學</td>
      <td style="vertical-align:middle;text-align:center;">050101</td>
      <td style="vertical-align:middle;text-align:center;">四年</td>
      <td style="vertical-align:middle;text-align:center;">文學學士</td>
      </tr>
      </tbody>
    </table>
  </div>
  <input type="button" value="匯出圖片" onclick="CreatImg()" style="width: 120px;height: 50px;margin:20px auto;display: block;"><br/>
</body>

</html>

動圖Demo

作者

TANKING

相關文章