微信小程序图片压缩
压缩方案:
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()
}
})
}

浙公网安备 33010602011771号