js获取图片和视频的宽高等

获取图片和视频的宽高

日常开发中，在提交给后端视频和图片等文件之前，需要控制文件的的宽高，大小等。

• 图片

// 上传文件的方法
uploadFile(e) {
            let that = this
            // 该file中可以获取到文件名，大小等信息
            let file = e.target.files[0]
            let img = new Image()
                let reader = new FileReader()
                // 通过此方法可以让图片显示
                reader.readAsDataURL(file)
                reader.onload = function() {
                    img.src = this.result·`
                }·
                // 加载完成执行
                img.onload = function() {
                     console.log(img.width, img.height)
                }
        },

下图为测试图片的信息

• 视频

uploadFile(e) {
     // 该file中可以获取到文件名，大小等信息
    let file = e.target.files[0]
    let video = document.createElement('video')
    video.preload = 'metadata'
    video.src = URL.createObjectURL(file)
    video.onloadedmetadata = () => {
        window.URL.revokeObjectURL(video.src)
        console.log(video.videoWidth, video.videoHeight)
    }
}

对视频也有时长等属性，下面做个封装

/**
 * @param file 文件流
 * 格式如: {
 *  lastModified: 1565170652842
 *  lastModifiedDate: Wed Aug 07 2019 17:37:32 GMT+0800 (中国标准时间) {}
 *  name: "Dunhuang Y [Full HD 1080p].mp4"
 *  size: 35935847
 *  type: "video/mp4"
 *  webkitRelativePath: ""
 * 适配信息
 * @param fileNum 想要返回的视频大小 {1: "KB", 2: "MB", 3: "GB", 4: "TB"}
 * @return Object  {duration, fileSize, type, width, height}
 * }
 */
class CalcVideo {
    constructor(file, fileNum) {
        this.video = document.createElement('video')
        this.video.preload = 'metadata'
        this.video.src = URL.createObjectURL(file)
        return this.init(file, fileNum)
    }
    init(file, fileNum) {
        return new Promise(resolve => {
            let fileSize = this.fileLengthFormat(file.size, fileNum)
            // 文件类型限制
            let type = this.getFileType(file.name)
            if (type === 'mp4') {
                // 时长
                this.video.onloadedmetadata = () => {
                    window.URL.revokeObjectURL(this.video.src)
                    var duration = this.video.duration
                    resolve({
                        fileSize,
                        duration,
                        type,
                        height: this.video.videoHeight,
                        width: this.video.videoWidth,
                    })
                }
            } else {
                resolve({
                    fileSize,
                    duration: 0,
                    type,
                    height: this.video.videoHeight,
                    width: this.video.videoWidth,
                })
            }
        })
    }
    getFileType(fileName) {
        var exts = fileName.split('.')
        var ext = ''
        if (exts != undefined) {
            if (exts.length <= 1 && fileName.indexOf('=') > -1) {
                //直接输入上传到azure之后生成的文件地址
                console.log('输入是文件地址：', exts)
                return false
            } else {
                ext = exts[exts.length - 1]
                ext = ext.toLowerCase()
                return ext
            }
        } else {
            return false
        }
    }
    /**
     * [fileLengthFormat 格式化文件大小]
     * @param  {[int]} total [文件大小] Byte
     * @param  {[int]} n {1: "KB", 2: "MB", 3: "GB", 4: "TB"}
     * @return {[string]}       [带单位的文件大小的字符串]
     */
    fileLengthFormat(total, n) {
        var format
        var len = total / 1024.0
        if (len > 1000) {
            return this.fileLengthFormat(len, ++n)
        } else {
            switch (n) {
                case 1:
                    format = len.toFixed(2)
                    break
                case 2:
                    format = len.toFixed(2)
                    break
                case 3:
                    format = len.toFixed(2)
                    break
                case 4:
                    format = len.toFixed(2)
                    break
            }
            return +format
        }
    }
}

export default CalcVideo

如何使用

// 引入文件
import CalcVideo from '../../../utils/calcVideo'
// 上传文件的方法
uploadFile() {
    let file = e.target.files[0]
    let video = new CalcVideo(file, 2)
    video.then(res => {
        const { height, width } = res
    })
}