uniapp和vue上传图片前进行压缩

直接上方法了 !调用方法就行!

vue 方法

直接拿到input的file,注意使用async ,因为方法是采用Promise返回的

   this.file = this.$refs.file.files[0]
   
      file = await compressImgs(this.file, compress)
/**
 * 压缩图片
 * @param {file} file 文件file
 * @param {*} filename filename 为name   
 * @param {*} objCompressed objCompressed 可传图片宽高,高默认同比例
 * @returns 
 */
export function compressImgs(file, objCompressed = {}) {
    return new Promise((resolve, reject) => {
        const windowURL = window.URL || window.webkitURL;
        const src = windowURL.createObjectURL(file);
        var img = new Image()
        img.src = src

        img.onload = function () {
            var that = this
            //默认压缩后图片规格
            var quality = 0.7
            var wd = that.width
            var hd = that.height
            var scale = wd / hd
            //实际要求
            const w = objCompressed.width || wd
            const h = objCompressed.height || w / scale
            //生成canvas
            var canvas = document.createElement('canvas')
            var ctx = canvas.getContext('2d')
            // 创建属性节点
            var anw = document.createAttribute('width')
            anw.nodeValue = w
            var anh = document.createAttribute('height')
            anh.nodeValue = h
            canvas.setAttributeNode(anw)
            canvas.setAttributeNode(anh)
            ctx.drawImage(that, 0, 0, w, h)
            var base64 = canvas.toDataURL('image/jpeg', quality)
            const url = dataURLtoFile(base64, file.name)
            // 回调函数返回base64的值
            resolve(url)
        }
    })
}
export function dataURLtoFile(dataurl, filename = Date.now()) {
    var arr = dataurl.split(','),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n)
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
    }
    // var url = URL || webkitURL
    // return url.createObjectURL(new Blob([u8arr], { type: mime }))
    return new File([u8arr], filename, {
        type: mime
    })
}


uniapp方法,由于uniapp 上传后得到的是路径,所以采用路径压缩!

/**
 * 压缩图片
 * @param {*} path 文件路径 为filePath  
 * @param {*} filename filename 为name   
 * @param {*} objCompressed objCompressed 可传图片宽高,高默认同比例
 * @returns 
 */
export function compressImgs(path, filename = Date.now(), objCompressed = {}) {
    return new Promise((resolve, reject) => {
        var img = new Image()
        img.src = path
        img.onload = function () {
            var that = this
            //默认压缩后图片规格
            var quality = 0.7
            var wd = that.width
            var hd = that.height
            var scale = wd / hd
            //实际要求
            const w = objCompressed.width || wd
            const h = objCompressed.height || w / scale
            //生成canvas
            var canvas = document.createElement('canvas')
            var ctx = canvas.getContext('2d')
            // 创建属性节点
            var anw = document.createAttribute('width')
            anw.nodeValue = w
            var anh = document.createAttribute('height')
            anh.nodeValue = h
            canvas.setAttributeNode(anw)
            canvas.setAttributeNode(anh)
            ctx.drawImage(that, 0, 0, w, h)

            var base64 = canvas.toDataURL('image/jpeg', quality)
            const url = dataURLtoFile(base64, filename)
            // 回调函数返回base64的值
            resolve(url)
        }
    })
}
export function dataURLtoFile(dataurl, filename = Date.now()) {
    var arr = dataurl.split(','),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n)
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
    }
    // var url = URL || webkitURL
    // return url.createObjectURL(new Blob([u8arr], { type: mime }))
    return new File([u8arr], filename, {
        type: mime
    })
}


相关内容

发表评论

验证码:
点击我更换图片

最新评论