html2canvas页面截图

1. 引入插件 cnpm i html2canvas -S

import html2canvas from 'html2canvas'

2. 将要生成图片的元素 加上id名

<div id="imageDom">
</div>

3. 使用

function clipPage(){
	html2canvas(document.querySelector('#imageDom'), {
	   backgroundColor: '#f8f8f8',
	   allowTaint: false, // 允许画布被污染
	   useCORS: true // 图片允许跨域
	 }).then(canvas => {
	   // 转成图片，生成图片地址
	   this.imgUrl = canvas.toDataURL('image/png')
	 })
}

4. 可能会出现截图不完成的情况，造成的原因是图片未加载完，获取的容器高度不对。
   页面渲染完成后，可以加个延时调用

setTimeout(() => {
  this.clickGeneratePicture()
}, 500)