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