search

chdyiboke / weekly

issue and share weekly
5 stars 1 forks source link

怎么获取视频video第一帧图片 #18

Open liukexina opened 4 years ago

liukexina commented 4 years ago
  1. 截取图片 思想：canvas截取图片 const canvas = document.createElement('canvas'); canvas.getContext('2d').drawImage(videoRef.current, 0, 0, canvas.width, canvas.height); canvas.toBlob((b) => { imageFile = b; }, 'image/jpeg', 1.0); const suffix = imageFile.type.split('/')[1]; const file = new File([imageFile], ${name}.${suffix}, { type: imageFile.type, });
liukexina commented 4 years ago

2.获取第一帧图片 方法一：事件监听 loadeddata 当前帧数（第一帧）加载完毕触发 video.addEventListener('loadeddata', function (e) { //canvas操作 } 方法二：设置视频播放时间为0 video.currentTime = 0; 有延迟。。。。。

liukexina commented 4 years ago

使用第一种方法在谷歌浏览器上获取黑屏，解决办法： 在video标签上添加autoplay与muted属性(缺一不可,也是谷歌浏览器的默认限制)，即加载后立即静音播放，可以成功截取； 在video标签上添加preload属性.

liukexina commented 4 years ago

js截取视频获取第一帧