vue 移动端使用canvas.toBlob()失败，内容包含视频截取第一帧

最新推荐文章于 2024-04-10 15:10:01 发布

原创最新推荐文章于 2024-04-10 15:10:01 发布 · 1.6k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

web 同时被 3 个专栏收录

31 篇文章

订阅专栏

前端

31 篇文章

订阅专栏

26 篇文章

订阅专栏

本文探讨了在移动端使用canvas的toBlob()方法时遇到的兼容性问题，导致转换视频封面为blob对象失败。问题源于手机端浏览器的不兼容。为解决此问题，文章提供了替代方案，通过将canvas内容转换为base64，再进一步转换为blob对象，最终实现文件上传。同时，代码示例展示了修正后的实现方式，包括dataURI到blob的转换和blob到文件的转换过程。

问题：

在移动端使用canvas的toBlob()会出现失败的情况导致转blob对象失败

原因：

因canvas.toBlob()方法兼容问题，手机端会出现不兼容的情况

代码：

错误示例：

findvideocover(url, file) {
        const video = document.getElementById("upvideo"); // 获取视频对象
        // const video = document.createElement("video") // 也可以自己创建video
        video.src = url // url地址 url跟 视频流是一样的
        var canvas = document.getElementById('mycanvas') // 获取 canvas 对象
        const ctx = canvas.getContext('2d'); // 绘制2d
        video.crossOrigin = 'anonymous' // 解决跨域问题，也就是提示污染资源无法转换视频
        video.currentTime = 1 // 第一帧
        video.oncanplay = () => {
          canvas.width = video.videoWidth; // 获取视频宽度
          canvas.height = video.videoHeight; //获取视频高度
          // 利用canvas对象方法绘图
          ctx.drawImage(video, 0, 0, video.videoWidth, video.videoHeight)
          // 转换成base64形式
          this.imgsrc = canvas.toDataURL("image/png") // 截取后的视频封面

          // 移动端会出现找不到toBlob方法
          canvas.toBlob((blob) => {
            console.log('截图成功！',blob)
          });
        }
      }

正确示例：

//截取视频第一帧作为播放前默认图片
      findvideocover(url, file) {
        const video = document.getElementById("upvideo"); // 获取视频对象
        // const video = document.createElement("video") // 也可以自己创建video
        video.src = url // url地址 url跟 视频流是一样的
        var canvas = document.getElementById('mycanvas') // 获取 canvas 对象
        const ctx = canvas.getContext('2d'); // 绘制2d
        video.crossOrigin = 'anonymous' // 解决跨域问题，也就是提示污染资源无法转换视频
        video.currentTime = 1 // 第一帧
        video.oncanplay = () => {
          canvas.width = video.videoWidth; // 获取视频宽度
          canvas.height = video.videoHeight; //获取视频高度
          // 利用canvas对象方法绘图
          ctx.drawImage(video, 0, 0, video.videoWidth, video.videoHeight)
          // 转换成base64形式
          this.imgsrc = canvas.toDataURL("image/png") // 截取后的视频封面

          // 更换为以下代码
          let fileImage = this.blobToFile(this.dataURItoBlob(this.imgsrc), 'file')
          this.uploadImageObj.webUploader.addFile(fileImage);
          this.uploadImageObj.webUploader.upload()
        }
      },
      dataURItoBlob(dataURI) {
        let arr = dataURI.split(',')
        let mime = arr[0].match(/:(.*?);/)[1]
        let bstr = atob(arr[1])
        let n = bstr.length
        let u8arr = new Uint8Array(n)
        while (n--) {
          u8arr[n] = bstr.charCodeAt(n)
        }
        return new Blob([u8arr], {
          type: mime
        })
      },
      blobToFile(theBlob, fileName) {
        theBlob.lastModifiedDate = new Date()
        theBlob.name = fileName
        return theBlob
      },