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)
}
相关推荐
闲不住的李先森4 分钟前
深入解析 Cursor 规则:为团队打造统一的 AI 编程规范
前端·ai编程·cursor
FlowGram18 分钟前
FlowGram 官网建设
前端
晚枫~23 分钟前
零基础快速上手Playwright自动化测试
javascript·python·测试工具·c#·自动化
~无忧花开~24 分钟前
JavaScript学习笔记(二十八):JavaScript性能优化全攻略
开发语言·前端·javascript·笔记·学习·性能优化·js
BumBle25 分钟前
基于UniApp实现DeepSeek AI对话:流式数据传输与实时交互技术解析
前端·uni-app
九十一27 分钟前
vue3事件总线与emit
前端·vue.js
岁月向前1 小时前
不同的协议和场景防丢包方案
前端
琢磨先生TT1 小时前
一个前端工程师的年度作品:从零开发媲美商业级应用的后台管理系统!
前端·前端框架
云枫晖1 小时前
JS核心知识-Ajax
前端·javascript
玄魂1 小时前
VTable Gantt 智能 zoom(缩放)功能介绍与开发实践
前端·开源·数据可视化