用canvas截取视频第一帧图片作为封面图

这篇博客介绍了如何使用JavaScript处理视频文件,通过创建video元素,设置源,监听'loadeddata'事件,然后利用canvas绘制视频第一帧并转换为JPEG格式的base64数据。该方法适用于前端视频预览和处理。
摘要由CSDN通过智能技术生成

在这里插入图片描述

fileList.forEach((item) => {
        console.log(item.raw.type, 'item.raw.type')
        if (item.raw.type === 'video/mp4') {
          // item.url = require('../../../assets/images/video.png')
          let dataURL = ''
          const video = document.createElement('video')
          video.currentTime = 1 // 指定帧数
          video.setAttribute('crossOrigin', 'anonymous') // 处理跨域
          video.setAttribute('src', item.url)
          video.setAttribute('width', 150)
          video.setAttribute('height', 150)
          video.addEventListener('loadeddata', function () {
            const canvas = document.createElement('canvas')
            const width = video.width // canvas的尺寸和图片一样
            const height = video.height
            canvas.width = width
            canvas.height = height
            canvas.getContext('2d').drawImage(video, 0, 0, width, height) // 绘制canvas
            dataURL = canvas.toDataURL('image/jpeg') // 转换为base64
          })
        }
      })

dataURL就是视频的第一帧图片,为base64格式

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
截取视频第一做为封面,可以使用 HTML5 的 video 元素和 canvas 元素来实现。 首先,在 Vue 的组件中,可以使用 video 元素来加载视频: ```html <video ref="myVideo" src="your-video-url"></video> ``` 然后,在 mounted 钩子函数中,可以监听 video 元素的 loadedmetadata 事件,获取视频的宽高信息以及视频播放时长: ```javascript mounted() { this.$refs.myVideo.addEventListener('loadedmetadata', this.handleVideoLoaded) }, methods: { handleVideoLoaded() { const video = this.$refs.myVideo this.videoWidth = video.videoWidth this.videoHeight = video.videoHeight this.videoDuration = video.duration } } ``` 接下来,可以使用 canvas 元素来截取视频第一作为封面: ```javascript const canvas = document.createElement('canvas') canvas.width = this.videoWidth canvas.height = this.videoHeight const ctx = canvas.getContext('2d') ctx.drawImage(this.$refs.myVideo, 0, 0, this.videoWidth, this.videoHeight) const coverUrl = canvas.toDataURL() ``` 最后,将封面图片的 URL 赋值给组件的 data 中的 coverUrl 属性,就可以在页面中显示视频封面了: ```javascript this.coverUrl = coverUrl ``` 完整的代码如下: ```html <template> <div> <video ref="myVideo" src="your-video-url"></video> <img :src="coverUrl" alt="video-cover"> </div> </template> <script> export default { data() { return { videoWidth: 0, videoHeight: 0, videoDuration: 0, coverUrl: '' } }, mounted() { this.$refs.myVideo.addEventListener('loadedmetadata', this.handleVideoLoaded) }, methods: { handleVideoLoaded() { const video = this.$refs.myVideo this.videoWidth = video.videoWidth this.videoHeight = video.videoHeight this.videoDuration = video.duration const canvas = document.createElement('canvas') canvas.width = this.videoWidth canvas.height = this.videoHeight const ctx = canvas.getContext('2d') ctx.drawImage(this.$refs.myVideo, 0, 0, this.videoWidth, this.videoHeight) const coverUrl = canvas.toDataURL() this.coverUrl = coverUrl } } } </script> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

爱喝冰可乐

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值