微信小程序怎么用js函数压缩图片到指定大小
时间: 2023-08-09 11:09:36 浏览: 472
可以使用以下代码来压缩图片到指定大小:
```javascript
/**
* 压缩图片到指定大小
* @param {string} src - 图片路径
* @param {number} maxSize - 压缩后最大文件大小,单位为 KB
* @returns {Promise<string>} - 返回 Promise 对象,resolve 后返回压缩后的图片路径
*/
function compressImage(src, maxSize) {
return new Promise((resolve, reject) => {
wx.getImageInfo({
src,
success(res) {
const { width, height, path } = res;
const quality = 0.9; // 初始压缩质量
const MAX_WIDTH = 800; // 压缩后最大宽度
const MAX_HEIGHT = 600; // 压缩后最大高度
const canvas = wx.createCanvasContext('compress-canvas');
// 如果图片尺寸小于等于最大尺寸,则不需要压缩
if (width <= MAX_WIDTH && height <= MAX_HEIGHT) {
resolve(path);
return;
}
// 计算压缩比例
let ratio = Math.min(MAX_WIDTH / width, MAX_HEIGHT / height);
let targetWidth = width * ratio;
let targetHeight = height * ratio;
// 设置 canvas 宽高
canvas.canvas.width = targetWidth;
canvas.canvas.height = targetHeight;
// 绘制图片到 canvas
canvas.drawImage(path, 0, 0, targetWidth, targetHeight);
function compress() {
// 将 canvas 转为图片路径
wx.canvasToTempFilePath({
canvasId: 'compress-canvas',
quality,
success(res) {
// 判断图片文件大小是否小于等于最大文件大小
wx.getFileSystemManager().readFile({
filePath: res.tempFilePath,
success(res) {
const fileSize = res.data.byteLength / 1024; // 文件大小,单位为 KB
if (fileSize <= maxSize) {
resolve(res.filePath);
} else {
// 文件大小大于最大文件大小,继续压缩
quality -= 0.1;
compress();
}
},
fail(e) {
reject(e);
}
});
},
fail(e) {
reject(e);
}
});
}
// 开始压缩
compress();
},
fail(e) {
reject(e);
}
});
});
}
```
在上面的代码中,我们使用了 `wx.getImageInfo()` 获取图片信息,然后根据图片尺寸和最大尺寸计算出压缩比例,将图片绘制到 canvas 上,再将 canvas 转为图片进行压缩。在压缩过程中,我们不断调整压缩质量,直到文件大小小于等于最大文件大小为止。最后返回压缩后的图片路径。
阅读全文