微信的api提供了压缩图片的接口，但是真机使用时，发现quality设为60以上时，基本无压缩，而在部分机型上，反而还稍微增大一点。而且还不能重复压缩。
鉴于此，只能用其它方式。
想到可以使用画布（canvas）压缩图片，大致思路就是，先把图片画到画布上，然后获取画布上的内容生成图片。可通过指定大小来达到重复压缩的效果。
/**
* 给的文件资源是否小于LimitSize （M）, 小于走lessCallBack， 大于走moreCallBack
*/
function imageSizeIsLessLimitSize(imagePath, limitSize, lessCallBack, moreCallBack) {
wx.getFileInfo({
filePath: imagePath,
success(res) {
console.log("压缩前图片大小:", res.size / 1024, 'kb');
if (res.size > 1024 * 1024 * limitSize) {
moreCallBack();
}else {
lessCallBack();
}
}
})
}
// 主调用方法
/**
* 获取小于限制大小的Image, limitSize默认为1M，递归调用。
*/
function getLessLimitSizeImage(canvasId, imagePath, limitSize = 1, drawWidth, callBack) {
console.log(getApp().globalData.systemInfo);
imageSizeIsLessLimitSize(imagePath, limitSize,
(lessRes) => {
callBack(imagePath);
},
(moreRes) => {
wx.getImageInfo({
src: imagePath,
success: function (imageInfo) {
var maxSide = Math.max(imageInfo.width, imageInfo.height);
//画板的宽高默认是windowWidth
var windowW = drawWidth;
var scale = 1;
if (maxSide > windowW) {
scale = windowW / maxSide;
}
var imageW = Math.floor(imageInfo.width * scale);
var imageH = Math.floor(imageInfo.height * scale);
console.log('调用压缩',imageW, imageH);
getCanvasImage(canvasId, imagePath, imageW, imageH,
(pressImgPath) => {
getLessLimitSizeImage(canvasId, pressImgPath, limitSize, drawWidth * 0.7, callBack);
}
);
}
})
}
)
}
/**
* 获取画布图片
*/
function getCanvasImage(canvasId, imagePath, imageW, imageH, getImgsuccess) {
const ctx = wx.createCanvasContext(canvasId);
ctx.drawImage(imagePath, 0, 0, imageW, imageH);
ctx.draw(false, () => {
wx.canvasToTempFilePath({
canvasId: canvasId,
x: 0,
y: 0,
width: imageW,
height: imageH,
quality: 1,
success(res) {
getImgsuccess(res.tempFilePath);
}
});
});
}
可以把这几个方法写到一个工具类里面，然后导出
module.exports = {
getLessLimitSizeImage: getLessLimitSizeImage,
}
主方法getLessLimitSizeImage调用的时候，需要在调用页面的wxml文件中增加一个canvas组件，
// windowWidth为屏幕宽度
<canvas
canvas-id='pressCanvas'
class='press-canvas'
style='width: {{ windowWidth }}px; height: {{ windowWidth }}px;' ></canvas>
js设置如下，让canvas组件显示不出来即可。
.press-canvas {
position: absolute;
top: -1000px;
background-color: gray;
}
