vue项目使用html2canvas实现屏幕截图

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展示在弹窗中