js 如何获取input框选择视频的首帧图

2019-09-22 分类：前端之旅阅读(2200) 评论(0)

这个功能经常用到, 代码逻辑记录一下:

首选我们在change事件之后操作:

let files = file.target.files;
if (files.length > 0) {
  let img = new Image();
  this.thumbUrl = img.src = URL.createObjectURL(files[0]);
  setTimeout(()=> {
    this.viedoFirst(files[0]);
  })
}

1

2

3

4

5

6

7

8

let files = file.target.files;

if (files.length > 0) {

let img = new Image();

this.thumbUrl = img.src = URL.createObjectURL(files[0]);

setTimeout(()=> {

this.viedoFirst(files[0]);

})

}

viedoFirst 方法:

viedoFirst (files) {
  var scale = 0.8;
  var video = document.getElementById("videoHide");
  video.addEventListener('loadeddata', () => {
    var canvas = document.createElement("canvas");
    canvas.width = video.videoWidth * scale;
    canvas.height = video.videoHeight * scale;
    canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
    this.firstBaseData = canvas.toDataURL("image/png");
  });
},

1

2

3

4

5

6

7

8

9

10

11

viedoFirst (files) {