- 引入插件 cnpm i html2canvas -S
import html2canvas from 'html2canvas'
- 将要生成图片的元素 加上id名
<div id="imageDom">
</div>
- 使用
function clipPage(){
html2canvas(document.querySelector('#imageDom'), {
backgroundColor: '#f8f8f8',
allowTaint: false, // 允许画布被污染
useCORS: true // 图片允许跨域
}).then(canvas => {
// 转成图片,生成图片地址
this.imgUrl = canvas.toDataURL('image/png')
})
}
- 可能会出现截图不完成的情况,造成的原因是图片未加载完,获取的容器高度不对。
页面渲染完成后,可以加个延时调用
setTimeout(() => {
this.clickGeneratePicture()
}, 500)