vue环境vidoe画面截图获取Base64

300 阅读1分钟
        <video
          style="width: 200px; height: 200px"
          id="videoElement1"
          muted
          autoplay
          src="@/assets/movie.mp4"
        ></video>
     <span @click="snapshot(0)"
        ><i
          ><img
            :src="snapshotImg"
            style="width: 1vw"
          />截图</i
        ></span
      >
      <canvas style="display: none; width: 28vw; height: 24vw"></canvas>
snapshot(order) {
      var video = document.querySelectorAll("video")[order]; //获取前台要截图的video对象,
      var canvas = document.querySelectorAll("canvas")[order]; //获取前台的canvas对象,用于作图
      var ctx = canvas.getContext("2d"); //设置canvas绘制2d图,
      ctx.drawImage(video, 0, 0, canvas.width, canvas.height); //将video视频绘制到canvasvar images = canvas.toDataURL("image/png"); //canvas的api中的toDataURL()保存图像
    },