本周有个需求是将HTML渲染好的页面生成图片，用户在微信端使用的时候能够保存到相册。于是一顿搜索猛如虎之后，发现html2canvas这个插件能够解决。因为项目中用到的框架是vue，这里就讨论一下在vue中如何使用html2canvas。
1.安装html2canvas
Install NPM
npm install --save html2canvas
Install Yarn
yarn add html2canvas
我在这里使用的是1.0.0版本
2.html2canvas生成截图
<template>
<img :src="htmlUrl" v-show="!isShow" class="canvas-img"/>
<div ref="imageTofile">
<div>
<!需要使用html2canvas绘图的html部分---->
</div>
</div>
</template>
<script>
import html2canvas from 'html2canvas' // 引入html2canvas
export default {
data(){
return {
htmlUrl:'',//html2canvas绘制好的图片地址
isShow:false //在页面dom渲染完毕后让图片显示在用户界面
}
},
methods:{
toImage () {
// 第一个参数是需要生成截图的元素,第二个是自己需要配置的参数,宽高等
html2canvas(this.$refs.imageTofile, {
backgroundColor: null,
useCORS: true // 解决文件跨域问题
}).then((canvas) => {
let url = canvas.toDataURL('image/png');
this.htmlUrl = url;
if(this.htmlUrl){
this.isShow = true;//绘图完毕让图片显示
}
})
},
}
}
</script>
这里有个坑就是在页面没有完全渲染完毕的情况下，在移动端上下拉动页面会出现页面元素位置不准确或者图片生成不完整的情况，因此加上判断条件，让页面渲染完毕之后使html2canvas绘制好的图片显示出来可以避坑。
