总结js获取视频第一帧作为封面图并且上传的解决方法

html代码

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <video src="http://localhost:8080/test.mp4" id="tmpVideo"></video>
    <img src="" alt="" id="tmpImg">
</body>
</html>

js代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
function DrawCanvas(videoId) {
  var tmpVideo = document.getElementById(videoId);
  try {
    var canvasEle = document.createElement("canvas");
    canvasEle.width = tmpVideo.offsetWidth;
    canvasEle.height = tmpVideo.offsetHeight;
    canvasEle.getContext('2d').drawImage(tmpVideo, 0, 0, canvasEle.width,
      canvasEle.height);
    // canvasEle.style.cssText = `position:fixed;left:${tmpVideo.width}px;top:0;z-index: 3000`
    // document.body.append(canvasEle)
    var imgUrl = canvasEle.toDataURL("image/jpeg");
    var filename = `${videoId}.jpg`
    var binary = atob(imgUrl.split(',')[1]);
    var mime = imgUrl.split(',')[0].match(/:(.*?);/)[1];
    var array = [];
    for (var i = 0; i < binary.length; i++) {
      array.push(binary.charCodeAt(i));
    }
    return new Blob([new Uint8Array(array)], {
      type: mime,
    })
  } catch (e) {
    console.log(e)
    return false
  }
}

/**
 * 获取video标签的第一帧
 * @param url
 * @returns {Promise<unknown>}
 */
function getVideoPoster(url) {
  return new Promise((resolve, reject) => {
    var videoEle = document.createElement('video')
    var videoId = `${(new Date().getTime()).toString() + (Math.ceil(Math.random() * 1000).toString())}`
    videoEle.width = 600
    videoEle.id = `poster-${videoId}`
    videoEle.style.cssText = 'opacity:0;position:fixed;left:0;top:0;z-index: -1;'
    videoEle.setAttribute('src', url)
    videoEle.setAttribute("crossOrigin", 'Anonymous')
    videoEle.onloadedmetadata = function () {
      setTimeout(() => {
        var res = DrawCanvas(`poster-${videoId}`, `video-block${videoId}`)
        if (res) {
          resolve(res)
        } else {
          reject(false)
        }
        document.body.removeChild(videoEle);
      }, 300)
    }
    document.body.appendChild(videoEle);
  })
}