微信小程序中图片压缩的代码包封装
时间: 2024-02-12 16:02:56 浏览: 66
好的,以下是一个简单的封装代码示例:
```javascript
// 图片压缩函数
function compressImage(imageSrc, quality = 80) {
return new Promise((resolve, reject) => {
wx.getImageInfo({
src: imageSrc,
success: function (res) {
// 获取图片原始宽高
let originWidth = res.width;
let originHeight = res.height;
// 目标宽高
let maxWidth = 750, maxHeight = 750;
// 判断图片是否超过最大宽高,超过则等比例缩小
if (originWidth > maxWidth || originHeight > maxHeight) {
let ratio = Math.max(originWidth / maxWidth, originHeight / maxHeight);
originWidth /= ratio;
originHeight /= ratio;
}
// 压缩图片
wx.compressImage({
src: imageSrc,
quality: quality,
width: originWidth,
height: originHeight,
success: function (res) {
resolve(res.tempFilePath);
},
fail: function (res) {
reject(res);
}
});
},
fail: function (res) {
reject(res);
}
});
});
}
// 封装图片压缩代码包
function compressImagePackage(images, quality = 80) {
let compressImagePromises = [];
for (let i = 0; i < images.length; i++) {
compressImagePromises.push(compressImage(images[i], quality));
}
return Promise.all(compressImagePromises);
}
```
这个示例中,`compressImage` 函数用于压缩单张图片,并返回压缩后的临时文件路径。`compressImagePackage` 函数则是封装了 `compressImage` 函数,用于批量压缩图片。
你可以将这个代码包封装到一个单独的 js 文件中,并在需要使用的地方引入即可。例如:
```javascript
import { compressImagePackage } from '../../utils/image-compress.js';
Page({
data: {
images: []
},
// 选择图片
chooseImage() {
let that = this;
wx.chooseImage({
count: 9,
success: function (res) {
that.setData({
images: res.tempFilePaths
});
}
});
},
// 压缩图片
compressImage() {
let that = this;
compressImagePackage(that.data.images)
.then(res => {
console.log(res);
// 压缩成功后的操作
})
.catch(res => {
console.log(res);
// 压缩失败后的操作
});
}
});
```
这个示例中,我们在页面中引入了 `image-compress.js` 文件,并在选择图片后调用 `compressImagePackage` 函数进行压缩。压缩成功后,可以在 `.then` 回调函数中执行后续操作,如上传到服务器等。
阅读全文