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)
}
相关推荐
Mintopia几秒前
图形学与坐标系入门教学
前端·javascript·计算机图形学
独立开阀者_FwtCoder16 分钟前
8年磨一剑,Koa 3.0 正式发布!看看带来了哪些新功能
前端·javascript·后端
Frankabcdefgh22 分钟前
初中级前端面试全攻略:自我介绍模板、项目讲解套路与常见问答
前端·面试·职场和发展
2401_8784545324 分钟前
thymeleaf的使用和小结
前端·javascript·学习
brzhang32 分钟前
宝藏发现:Sim Studio,一款让AI工作流搭建变简单的开源利器
前端·后端·github
2301_7994049133 分钟前
AJAX 介绍
前端·ajax·axios
脚本语言_菜鸟34 分钟前
音频转base64
android·javascript·音视频
拖孩38 分钟前
【Nova UI】十三、打造组件库之按钮组件(中):样式雕琢全攻略
前端·javascript·vue.js
高峰君主1 小时前
WebAssembly全栈革命:在Rust与JavaScript之间构建高性能桥梁
javascript·rust·wasm
好_快1 小时前
Lodash源码阅读-sortedUniqBy
前端·javascript·源码阅读