vue2 使用canvas 视频截图

<template>
  <div>
    <input type="file" accept=".mp4" @change="change">
    <video style="width: 300px; height: 240px; background: blue;" ref="video" src="" autoplay></video>
    <button @click="capture">点击截图</button>
    <img src="" alt="" ref="image">
  </div>
</template>
<script>
export default {
  data() {
    return {}
  },
  methods: {
    change(ev) {
      // ev.target.files点击上传的；ev.dataTransfer.files拖拽上传
      const files = ev.target.files || ev.dataTransfer.files
      const target = files[0]
      if (target) {
        if (window.createObjectURL !== undefined) {
          this.$refs.video.src = URL.createObjectURL(target)
        } else if (window.URL !== undefined) {
          this.$refs.video.src = URL.createObjectURL(target)
        } else if (window.webkitURL !== undefined) {
          this.$refs.video.src = URL.createObjectURL(target)
        }
      }
    },
    capture() {
      // 创建canvas元素
      const canvas = document.createElement('canvas')
      // 设置canvas的画布的大小，画布的大小就决定了我们截图的大小
      canvas.width = this.$refs.video.videoWidth
      canvas.height = this.$refs.video.videoHeight
      // 绘制2D绘图空间并且截图大小及坐标设置
      /*
          drawImage()介绍
              第一个参数：图片源（你要从哪里截取图片）
              第二、三个参数：截取的起始坐标
              第四、五个参数：你要截多大
       */
      canvas.getContext('2d').drawImage(this.$refs.video, 0, 0, canvas.width, canvas.height)
      // canvas.toDataURL('image/png')
      this.$refs.image.src = canvas.toDataURL('image/png') // 把截图后的图片转为base64
    }
  }
}
// 获取img元素

// 视频截图
</script>
<style>
img {
  width: 300px;
  height: 300px;
  object-fit: cover;
}
</style>

URL.createObjectURL() 是一个用于创建临时 URL 的方法，它接受一个参数作为源对象（如 Blob、File 或 MediaSource）。它返回一个表示该源对象的临时 URL，该 URL 可以被用作 <video>、<audio> 或 <img> 等元素的源。

现在让我们逐行解释代码的意思：

if (window.createObjectURL !== undefined) { ... }：此条件检查浏览器是否支持 createObjectURL 方法。如果支持，则将视频元素的 src 属性设置为使用 URL.createObjectURL() 方法创建的临时 URL。

else if (window.URL !== undefined) { ... }：如果第一个条件不满足，则检查浏览器是否支持 URL 对象。如果支持，也使用 URL.createObjectURL() 方法为视频元素设置临时 URL。

else if (window.webkitURL !== undefined) { ... }：如果上述两个条件都不满足，则检查浏览器是否支持 webkitURL 对象（某些旧版的 WebKit 浏览器）。如果支持，同样使用 URL.createObjectURL() 方法为视频元素设置临时 URL。

最后，this.$refs.video.src = URL.createObjectURL(target) 表示根据以上条件之一，将 target 对象（即视频文件）通过 URL.createObjectURL() 方法创建的临时 URL，设置为名为 video 的组件引用的视频元素的 src 属性。这样就可以将视频源加载到 <video> 元素中，从而播放该视频。