微信小程序图片压缩

压缩方案:
1.wx.chooseMedia/wx.chooseImage:sizeType属性,选择上传原图还是缩略图  问题:不能指定压缩大小,要求要小于500kb
2.wx.compressImage:质量压缩,不会改变原图大小  仅对(jpg)有效 (有时候越压越大,概率大 - ^ -)
    只能压缩画质,不能压缩大小;
    ios和安卓压缩质量相同的情况下输出大小不一致,ios有自己的一套压缩机制,当压缩要极致质量大小以后,质量写再小都不会有变化;
    开发工具压缩后返回的地址没有后缀;
    在安卓中quality若是小于1,输出大小跟quality为80的一样。
3.wx.canvasToTempFilePath 可以自定义输出图片宽高和压缩质量  仅对(jpg)有效
    有宽高限制,根据具体机型的内存大小会有不同,一般建议不要超过4096,否则会绘制失败;
    ios和安卓的压缩机制不一致;
    通过canvas转的图片会有略微色差,色彩没有原图明艳
 可通过上面三种方式同时进行压缩

 

这里方案是 wx.chooseImage 选择图片时 sizeType 限定用压缩图,然后通过压缩图片质量接口wx.compressImage进行多次压缩,直到大小到500kb以内,经过测试大部分图片经过压缩后都会在500kb以内。

还有一种方案是改变图片尺寸大小,但是这个不好控制改变多少,已达到500kb内,设置太小,图片容易模糊,设置太大,有可能达不到要求。

代码实现:

// 对选择的图片进行压缩处理
function selectImg() {
    let success = function (res) {
        let file = res.tempFiles[0]
        let limitSize = 500000; //500kb,0.5MB
        console.log("压缩前大小", file.size)
        // 大于500kb
        if (file.size > limitSize) {
            compressImage(file.path, file.size).then(path => {
                file.path = path;
                // 再次判断压缩后大小
                imagesSizeIsLessLimitSize(res.tempFilePath, limitSize, () => {
                    // 压缩完成后 小于500kb
                    console.log('压缩完成后 小于500kb')
                }, (imagSize) => {
                    // 大于500kb  // 再次压缩
                    compressImage(res.tempFilePath, imagSize).then(path => {
                        //压缩完成
                        console.log('压缩完成')
                    })
                })
            })
        } else {
            // 小于500kb
            console.log('小于500kb')
        }

    }
    cameraImage(success, true)
}
// 选择图片
function cameraImage(success, isOnlyCompress = false) {
    if (!isFunction(success)) {
        logNullErr('cameraImage', 'success')
        return
    }
    let sizeType = isOnlyCompress ? ['compressed'] : ['original', 'compressed'];//只用拍照,则用压缩图
    wx.chooseImage({
        count: 1, //一次选择图片最多个数
        sizeType,
        sourceType: ['camera'], // album 从相册选图,camera 使用相机
        success: function (res) {
            // 选择图片后的完成确认操作
            success(res)
        }
    })
}
/**
 * 图片压缩
 * @param {string} src 压缩图片路径
 * @param {*} size 图片大小
 */
function compressImage(src, size) {
    return new Promise((resolve, reject) => {
        let quality = 100;
        let sizeMb = parseInt(size / 1024 / 1024)
        if (sizeMb >= 0 && sizeMb < 1) { // 0-1MB,压缩质量20
            quality = 50;
        } else if (sizeMb == 1) { //1M
            quality = 30;
        } else if (sizeMb > 1 && sizeMb <= 2) { //1~2M
            quality = 20;
        } else {
            quality = 10;
        }
        console.log("compressImage-quality", quality)
        wx.compressImage({
            src, // 图片路径
            quality, // 压缩质量
            success: function (res) {
                resolve(res.tempFilePath)
            },
            fail: function (err) {
                console.log("压缩失败", err)
                resolve(src)
            }
        })
    })
}
/** 图片大小是否小于限制大小 */
function imagesSizeIsLessLimitSize(imgPath, limitSize, lessCallBack, moreCallBack) {
    wx.getFileSystemManager().getFileInfo({
        filePath: imgPath,
        success: r => {
            console.log("图片大小:", r.size)
            if (r.size > limitSize) {
                console.log("压缩前大小:", r.size, 'byte');
                moreCallBack(r.size)
            } else {
                lessCallBack()
            }
        },
        fail: err => {
            lessCallBack()
        }
    })
}

 

posted @ 2024-11-12 08:48  爱美丽——  阅读(1557)  评论(0)    收藏  举报