// 安装html2canvas
npm install html2canvas --save
// 引入 html2canvas
import html2canvas from "html2canvas"
// html
<div ref="imageWrapper" class="iswap" id="imageWrapper">
<div class="isimg">
<!--如果有图片,建议添加 crossOrigin='anonymous',因为 canvas toDataUrl时可能会存在跨域问题 -->
<img crossOrigin='anonymous' src="@/assets/application/twocode.png"/>
<!-- 这里可以放置你的任何HTML代码-->
</div>
</div>
// css
#imageWrapper{
width: 340px;
height: 480px;
overflow: visible !important;
}
// js
html2canvas(this.$refs.imageWrapper, {
useCORS: true // 解决跨域问题
}).then(canvas => {
let dataURL = canvas.toDataURL("image/png");
});
简单的截图就完成了,由于html2canvas 有些偏差,会存在白边。
注意:html2canvas截取的是可试窗口的数据