html2canvas将指定区域导出为图片(js将div导出为图片) - TANKING 创意开发者

html2canvas将指定区域导出为图片(js将div导出为图片)

2022-08-18 2219 阅读 前端

如何使用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>