HTML2Canvas截图插件

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>