vue项目使用html2canvas实现屏幕截图
首先引入html2canvas的js文件
<script type="text/javascript" src="https://cdn.bootcss.com/html2canvas/0.4.1/html2canvas.js"></script>
我是在index.html head中引入的
在需要的方法中执行
const vm = this
const domObj = document.getElementById('canvas')
html2canvas( domObj,{
onrendered: function(canvas){
vm.posterImg = canvas.toDataURL()
if (vm.posterImg){
vm.popupVisible = true
}
}
})
其中canvas就是需要截图的div的id,id为canvas的div内所展示的内容都会被获取
然后生成canvas文件,再将canvas文件toDataURL()生成base64格式的img
我们可以直接在img标签中直接 :src='posterImg'展示截屏所生成的img
例如:
<mt-popup v-model="popupVisible">
<img :src="posterImg" alt="" style="height:100%;width:100%">
</mt-popup>
这里利用了mint Ui的弹窗,将img展示在弹窗中