vue project uses html2canvas achieve Screenshots

vue project uses html2canvas achieve Screenshots

First introduced html2canvas js file

<script type="text/javascript" src="https://cdn.bootcss.com/html2canvas/0.4.1/html2canvas.js"></script>

I was introduced index.html head of

In the method of execution needed

 const vm = this
  const domObj = document.getElementById('canvas')
  Html2chanvs (Domobj {
    onrendered: function (canvas) {
      vm.posterImg = canvas.toDataURL()
      if (vm.posterImg){
        vm.popupVisible = true
      }　　　　　
    }
  })

Where the canvas is the need to capture the div's id, id div canvas within the display content will be acquired

Then generates canvas file, the file then the toDataURL canvas () format generated img base64

We can directly directly in the img tag: src = 'posterImg' show img screenshots generated

E.g:

<mt-popup v-model="popupVisible">
  <img :src="posterImg" alt="" style="height:100%;width:100%">
</mt-popup>

Here the use of mint Ui pop, pop will be displayed in the img