video 标签获取视频 第一帧 图像 和跨域问题 (Vue 的写法)

具体代码

captureImage() {
    let video = this.$refs.dragvd_pre; //dragvd_pre指video 标签 也可以使用 document.getElementById('video')
    let canvas = document.getElementById('myCanvas')
    let ctx = canvas.getContext("2d");
    ctx.drawImage(video, 0, 0, 343, 200);
    let oGrayImg = canvas.toDataURL('image/jpeg');
    this.cacheFristImgUrl = oGrayImg;
},

如果直接这样 就会报错 类似错误

Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement'

这是因为 你获取的video的标签无法获取外域的资源所以无法转化为本地可用的data

下面是处理的方法

需要给video 标签添加 crossorigin="anonymous"属性 让其 跨域

<video
             
   crossorigin="anonymous"
   @loadeddata="captureImage"
   preload>
 video>