canvas获取视频封面及个别电脑获取到空图

读取视频封面:

csharp 复制代码
        let video = document.createElement("video");
        video.src = videosrc;
        video.currentTime= 10 // 可能出现黑屏,从10帧
        video.muted = true; // 解决个别电脑获取到空图
        video.autoplay = true; // 解决个别电脑获取到空图
        video.preload = true; // 解决个别电脑获取到空图
        video.addEventListener('loadeddata', async () => {
          video.pause();
          var canvas = document.createElement('canvas')
          canvas.width = video.videoWidth
          canvas.height = video.videoHeight
          canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height)
          const cover = canvas.toDataURL('image/png')
           console.log('图片base64是:',cover)
          video.remove();
    }}

base64转file:

csharp 复制代码
const convertFile = base64 => {
  let fileArray = base64.split(','),
    fileType = fileArray[0].match(/:(.*?);/)[1],
    bstr = atob(fileArray[1]),
    n = bstr.length,
    u8arr = new Uint8Array(n)
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n)
  }
  return new File([u8arr], '文件名', { type: fileType })
}

下载:

csharp 复制代码
const buttonClick = (base64) => {
  let file = convertFile(base64)
  const node = document.createElement('a')
  node.href = URL.createObjectURL(file)
  node.download = file.name
  node.click()
  URL.revokeObjectURL(node.href)
  document.body.appendChild(node)
  document.body.removeChild(node)
}
相关推荐
你的人类朋友7 分钟前
浅谈Object.prototype.hasOwnProperty.call(a, b)
javascript·后端·node.js
Mintopia12 分钟前
深入理解 Three.js 中的 Mesh:构建 3D 世界的基石
前端·javascript·three.js
打瞌睡de喵15 分钟前
JavaScript 空对象检测
javascript
前端太佬17 分钟前
暂时性死区(Temporal Dead Zone, TDZ)
前端·javascript·node.js
Mintopia18 分钟前
Node.js 中 http.createServer API 详解
前端·javascript·node.js
艾克马斯奎普特23 分钟前
Vue.js 3 渐进式实现之响应式系统——第三节:建立副作用函数与被操作字段之间的联系
javascript·vue.js
xRainco23 分钟前
Redux从简单到进阶(Redux、React-redux、Redux-toolkit)
前端
印第安老斑鸠啊25 分钟前
由一次CI流水线失败引发的对各类构建工具的思考
前端
CodePencil26 分钟前
CSS专题之外边距重叠
前端·css
hepherd29 分钟前
Flask学习笔记 - 表单
前端·flask