js 获取上传图片和视频的宽高,还有视频的时长

13 篇文章 0 订阅
1 篇文章 0 订阅

场景:

当产品经理告诉你说:我们需要限制上传的图片或视频的尺寸,不符合要求不允许上传,这个时候你该怎么做?

不用多想,很明显我们需要想办法拿到图片或视频的宽度,然后和预期的尺寸进行对比过滤,就能轻易实现这个需求。

 

上代码:

// 获取素材宽高
    getMaterialResolution (info, callback) {
      const _this = this
      const reader = new FileReader()
      let width = 0
      let height = 0
      reader.readAsDataURL(info.file)
      reader.onload = function (e) {
        info.file['url'] = e.target.result
        if (info.file.type.includes('image/')) { // 如果是图片,获取图片宽高
          const image = new Image()
          image.src = info.file['url']
          image.onload = function () {
            width = image.width
            height = image.height
            console.log('width, height:', width, height)
            callback(width, height)
          }
        } else if (info.file.type.includes('video/')) { // 如果是视频,获取视频的宽高和时长,只能获取到H264及以上视频编码协议(MPEG-4编码格式也获取不到)
          const videoUrl = URL.createObjectURL(info.file)
          const videoObj = document.createElement('video')
          videoObj.preload = 'metadata'
          videoObj.src = videoUrl
          videoObj.onloadedmetadata = function (evt) {
            URL.revokeObjectURL(videoUrl)
            _this.form.videoDuration = Math.round(videoObj.duration) // 视频的时长
            width = videoObj.videoWidth
            height = videoObj.videoHeight
            console.log('width, height:', width, height)
            callback(width, height)
          }
        }
      }
    },

上面的这个方法是非常完整了,注意:

image是拿Image 类型的对象实例的height和width字段,video需要创建一个类型为video的html元素,然后在onloadedmetadata 事件中去获取这个元素的videoWidth和videoHeight。 当天时长duration也可以直接从这个元素对象中获取。

还有就是如果是视频,获取视频的宽高和时长,只能获取到H264及以上视频编码协议的视频文件(MPEG-4编码格式也获取不到),当然我们可以想办法直接不让非符合要求编码的视频进行上传,但是目前没有找到非常合适又简便的方法。欢迎有此经验的朋友提供帮助,谢谢!

然后我们只需要调用这个方法,在回调函数中就能拿到想要的数据了。

getMaterialResolution(file, (width, height) => {
   // todo 处理图片或视频尺寸是否符合要求的逻辑
)

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现这个功能,你可以使用HTML5的File API来读取上传的视频文件,然后使用JavaScript解析视频文件的元数据。以下是一个简单的示例代码: ```javascript function handleFileSelect(event) { var files = event.target.files; var file = files[0]; // 只处理第一个文件 var video = document.createElement('video'); video.preload = 'metadata'; video.onloadedmetadata = function() { // 读取视频元数据 var duration = video.duration; // 视频时长,单位为秒 var width = video.videoWidth; // 视频度,单位为像素 var height = video.videoHeight; // 视频度,单位为像素 var fps = getFrameRate(video); // 视频帧率,单位为帧/秒 var bitrate = getBitrate(file.size, duration); // 视频码率,单位为Mbps // 输出结果 console.log('Duration: ' + duration.toFixed(2) + 's'); console.log('Resolution: ' + width + 'x' + height); console.log('FPS: ' + fps.toFixed(2)); console.log('Bitrate: ' + bitrate.toFixed(2) + 'Mbps'); }; video.src = URL.createObjectURL(file); } function getFrameRate(video) { var frameCount = 0; var lastTime = 0; var fps = 0; video.addEventListener('loadeddata', function() { frameCount = 0; lastTime = Date.now(); }); video.addEventListener('timeupdate', function() { frameCount++; var now = Date.now(); if (now - lastTime >= 1000) { fps = frameCount; frameCount = 0; lastTime = now; } }); return fps; } function getBitrate(fileSize, duration) { var bits = fileSize * 8; var bitrate = bits / duration / 1000000; // Mbps return bitrate; } document.getElementById('file').addEventListener('change', handleFileSelect, false); ``` 这段代码会在文件选择框中选择文件后执行,创建一个video元素,并使用URL.createObjectURL()方法生成一个blob URL,然后将video元素的preload属性设置为'metadata',以便在元数据加载完成后触发onloadedmetadata事件。在事件处理程序中,我们可以读取视频时长、分辨率和帧率等信息。其中,getFrameRate()函数使用timeupdate事件来计算视频的帧率,getBitrate()函数根据文件大小和时长计算视频的码率。最后,我们可以在控制台中输出结果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值