video获取第一帧 canvas在chrome无法绘制的问题
- video标签上面添加 preload=“auto” crossorigin=“anonymous” @loadeddata=“loadeddata” 属性
- 要保证的是资源是不跨域也就是本地的或者配置跨域方法 preload=“auto” 最重要的属性
<video :src="item" preload="auto" crossorigin="anonymous" @loadeddata="loadeddata"></video>
loadeddata(e){
var canvas = document.createElement('canvas')
canvas.getContext('2d').drawImage(e.target, 0, 0, 370, 200)
console.log(canvas.toDataURL('image/png'))//视频第一帧的地址
}
此方法不适用于拍照上传,可能会因为上传打断video loadeddata导致无法完成第一帧绘制