js 获取图片宽高和视频宽高时长

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

// 获取素材宽高
    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)
          }
        }
      }
    },

获取视频的宽高和时长，只能获取到H264及以上视频编码协议的视频文件（MPEG-4编码格式也获取不到），需要限制非符合要求编码的视频上传

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

原文链接