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>

看看效果