vue实现截图并下载

下载

yarn add html2canvas

使用

// 导入
import html2canvas from 'html2canvas'
export default {
  name: 'videos',
  components: {
    videoPlayer,
    html2canvas
  },
}

// 界面
<video-player
      id="capture"
      class="video-player vjs-custom-skin"
      ref="myplayer"
      :options="playerOptions"
      @pause="onPlayerPause($event)"
      @play="onPlayerPlay($event)"
    ></video-player>


// 文件下载方法
var saveFile = function(data, filename){
        var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
        save_link.href = data;
        save_link.download = filename;

        var event = document.createEvent('MouseEvents');
        event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
        save_link.dispatchEvent(event);
      }
// 用id包裹起来
html2canvas(document.querySelector("#capture")).then(canvas => {
        const imgUrl = canvas.toDataURL("png"); // 获取生成的图片的url
        saveFile(imgUrl, 'image.png') //下载成功
        //完成
   })