42、常用方法集合2---图片格式处理

73 阅读2分钟

6、base64图片转化成blob、file类型格式

/**
     * @method toBlob() base64图片转化成blob、file类型格式
     * @param {Object} base64Data base64数据
     * @return
     */
    toBlob(base64Data) {
        let byteString = ''
        if (base64Data.split(',')[0].indexOf('base64') >= 0)
            byteString = atob(base64Data.split(',')[1])
        else
            byteString = unescape(base64Data.split(',')[1]);
        let mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0]
        let ab = new ArrayBuffer(byteString.length)
        let ia = new Uint8Array(ab)
        for (var i = 0; i < byteString.length; i++) {
            ia[i] = byteString.charCodeAt(i)
        }
        return new Blob([ia], {
            type: mimeString
        })
    },

7、上传图片的格式转为base64

/**
     * @method fileToDataURL() 上传图片的格式转为base64
     * @param {file} imgFile 要转换的文件
     */
    fileToDataURL(imgFile) {
        // 选择的文件是图片
        if (!imgFile || imgFile.type.indexOf('image') !== 0) {
            return
        }
        return new Promise((resolve, reject) => {
            // 压缩图片需要的一些元素和对象
            var reader = new FileReader()
            // 文件base64化,以便获知图片原始尺寸
            reader.onload = function (e) {
                resolve(e.target.result)
            }
            reader.onerror = function (e) {
                reject(e)
            }
            // 选择的文件是图片
            reader.readAsDataURL(imgFile)
        })
    },

8、计算base64图片大小

/**
     * @method countBaseSize() 计算base64图片大小
     * @param base64url base64的图片编码
     */
    countBaseSize(base64url) {
        //获取base64图片大小,返回MB数字
        let str = base64url.replace('data:image/png;base64,', '')
        let equalIndex = str.indexOf('=')
        if (str.indexOf('=') > 0) {
            str = str.substring(0, equalIndex);
        }
        let strLength = str.length
        let fileLength = parseInt(strLength - (strLength / 8) * 2, 10)
        // 由字节转换为MB
        let size = ""
        size = (fileLength / (1024 * 1024)).toFixed(2)
        return size
    },

9、普通图片转化成base64

/**
     * @method getImageBase64() 普通图片转化成base64
     * @param {String} ext 图片的类型
     */
    getImageBase64(img, ext) {
        let canvas = document.createElement("canvas")
        canvas.width = img.width
        canvas.height = img.height
        let ctx = canvas.getContext("2d")
        ctx.drawImage(img, 0, 0, img.width, img.height)
        let dataURL = canvas.toDataURL("image/" + ext)
        canvas = null
        return dataURL
    },

10、对于小于0的进行补零操作

/**
     * @method addZero() 对于小于0的进行补零操作
     * @return {String}0后的数据
     */
    addZero: (time) => {
        let newTime = time > 9 ? time : '0' + time
        return newTime
    },

11、将秒转成时分秒

/**
     * @method toStringBySecond 将秒转成时分秒
     * @param {String} second 要转换的秒
     * @param {String} typeStr = 'h:m:s' || '' ? 'h:m:s' : '时:分:秒'
     */
    toStringBySecond(second, typeStr = 'h:m:s') {
        const sec = second < 60 ? this.addZero(second) : this.addZero(second % 60)
        const min = second < 60 ? '00' : second < 3600 ? this.addZero(parseInt(second / 60, 10)) : this.addZero(parseInt(second % 3600 / 60, 10))
        const hour = this.addZero(parseInt(second / 3600, 10))
        return typeStr === 'h:m:s' ? `${hour}:${min}:${sec}` : `${hour}${temp.$t('hour')}${min}${temp.$t('min')}${sec}${temp.$t('sec')}`
    },
    /**
     * @method toStringBySecond 将秒转成分秒
     * @param {String} second 要转换的秒
     * @param {String} typeStr = 'm:s' || '' ? 'm:s' : '分:秒'
     */
    toStringBySeconds(second, typeStr = 'm:s') {
        if (second === 0 || second === '') {
            return ''
        }
        const sec = second < 60 ? this.addZero(second) : this.addZero(second % 60)
        const min = second < 60 ? '00' : second < 3600 ? this.addZero(parseInt(second / 60, 10)) : this.addZero(parseInt(second % 3600 / 60, 10))
        return typeStr === 'm:s' ? `${min}:${sec}` : `${min}${temp.$t('min')}${sec}${temp.$t('sec')}`
    },