html2canvas截图拍照，结合element小图大图预览

cnpm i html2canvas -S //安装html2canvas

cnpm i jquery -S //安装jquery

script标签内引用

import html2canvas from "html2canvas";
import $ from "jquery";

视频区域（所需要截图的区域，博主的区域是canvas的一个帧视频区域，你可以用一张图片代替）

 <canvas id="canvas" width="1280" height="720">Your browser sucks.</canvas>

截图到这个容器（但这个容器我们并不会真正去显示图片，反而会给他设置隐藏，我们图片会转成base64用img标签实现）

 <canvas id="myCanvas"></canvas>

点击该标签进行截图

 <i @click="getCanvasPic" class="el-icon-camera" style="margin-right: 15px"></i>

在data()中创建一个变量

data(){
    return{
    canvass:[] //截图后图片存放这里
  }
}

vue 实例中实现getCanvasPic  （注释的是保存下载的方法，如果你需要的话）

    getCanvasPic() {
      // 截图
      const c = document.getElementById("myCanvas");
      const cxt = c.getContext("2d");
      const canvas = document.querySelector("#canvas");
      //设置图片大小
      cxt.drawImage(canvas, 0, 0, 240, 144);
       //将canvas转为base64
      var url = canvas.toDataURL();
      var newImg = document.createElement("img");
      newImg.src = url;
      // 往数组第一个添加数据
      this.canvass.unshift(url);
      console.log(this.canvass);
      // this.saveAsPNG(c)
    },
    // saveAsPNG(canvas) {
    //   // 转为图片
    //   return canvas.toDataURL("image/png");
    //   console.log(canvas.toDataURL("image/png"))
    // },
    // downLoad(url) { // 下载图片
    //     const oA = document.createElement('a')
    //     oA.download = new Date()// 设置下载的文件名，默认是'下载'
    //     oA.href = url
    //     document.body.appendChild(oA)
    //     oA.click()
    //     oA.remove() // 下载之后把创建的元素删除
    // },

这样我们就拿到了数据，可以开始渲染了

<div class="box">
      <span v-for="(item,i) in canvass" :key="i">
               <div class="demo-image__preview">
               <el-image
               style="width: 128px; height: 72px;margin-left:10px"
               :src="item"
               :preview-src-list="item.split('??????')" //问号是为了将字符串变成数组提供的
           ></el-image>
       </div>
   </span>
</div>

看看效果