HTML2Canvas截圖插件

 

1.介紹：改插件可以用來截取網頁為圖片的一款js插件

// 官網地址

http://html2canvas.hertzen.com/

// 通過npm安裝

npm install html2canvas

import html2canvas from 'html2canvas'

// 通過cdn外鏈引入

<script src="https://cdn.bootcdn.net/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>

// 在頁面中使用

/*
    1.需要指定需要截圖的區域

    2.之后便可以拿到截圖的base64url地址

*/


<div id="box">
    <h1>我是需要截圖的部分</h1>
</div>

<!--  放置截圖生成的圖片 -->
<img id="img" src="" />


<script>

    html2canvas(template, {
            useCORS: true, //（圖片跨域相關）
            allowTaint: false, //允許跨域（圖片跨域相關）
    }).then(imgCanvas => {

          // 可以拿到截圖的url地址，之后賦值給img即可
          console.log(imgCanvas.toDataURL('image/png'));

          var imgURL = imgCanvas.toDataURL('image/png');
          document.getElementById('img').src = imgURL
    })
</script>