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

爱写代码的老张

4456人浏览 · 2021-01-15 18:04:31

爱写代码的老张 · 2021-01-15 18:04:31 发布

具体代码

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>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^