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