vue上传视频时取第一帧做缩略图

最新推荐文章于 2024-01-04 17:37:06 发布

榴莲豆包

最新推荐文章于 2024-01-04 17:37:06 发布

阅读量1.4k

点赞数 1

分类专栏： vue 文章标签： vue.js 音视频 javascript

本文链接：https://blog.csdn.net/qq_41992943/article/details/128371529

版权

vue 专栏收录该内容

65 篇文章 2 订阅

订阅专栏

 //截取视频第一帧
          var base64URL = ''
          let video = document.createElement('video')
          video.setAttribute('crossOrigin', 'anonymous') //处理跨域
          video.setAttribute('src', 视频文件地址)
          video.currentTime = 1
          video.addEventListener('loadeddata', function() {
          debugger
          let canvas = document.createElement('canvas')
          //使用视频的宽高作为canvas、预览图的宽高
          let width = video.videoWidth 
          let height = video.videoHeight
          canvas.width = width
          canvas.height = height
          canvas.getContext('2d').drawImage(video, 0, 0, width, height) //绘制canvas
          base64URL = canvas.toDataURL('image/jpeg') //转换为base64，图片格式默认为png，这里修改为jpeg
          const imgfile = thit.getFileFromBase64(base64URL,file.name)

// base64转图片
    getFileFromBase64(base64URL, filename) {
      var arr = base64URL.split(","),
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new File([u8arr], filename.split(".")[0]+".png", { type: "image/png" });
    },