微信小程序中图片压缩的代码包封装
时间: 2024-02-12 21:05:52 浏览: 161
以下是一个基本的图片压缩函数,你可以将其封装成一个代码包:
```javascript
function compressImage(src, quality) {
return new Promise((resolve, reject) => {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const image = new Image();
image.onload = function() {
canvas.width = image.width;
canvas.height = image.height;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(image, 0, 0);
canvas.toBlob(
function(blob) {
resolve(blob);
},
'image/jpeg',
quality
);
};
image.onerror = function(err) {
reject(err);
};
image.src = src;
});
}
```
这个函数接受两个参数:`src` 表示要压缩的图片地址,`quality` 表示压缩质量,取值范围为 0-1 之间。函数返回一个 Promise 对象,resolve 的值为压缩后的 Blob 对象。
你可以将这个函数封装到一个单独的 js 文件中,然后在小程序中使用。例如:
```javascript
import compressImage from './utils/compressImage';
Page({
async handleChooseImage() {
const res = await wx.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
});
const tempFilePath = res.tempFilePaths[0];
const compressedBlob = await compressImage(tempFilePath, 0.8);
// 将 compressedBlob 上传到服务器或保存到本地
},
});
```
这样,你就可以在微信小程序中使用图片压缩函数了。
阅读全文
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![rar](https://img-home.csdnimg.cn/images/20241231044955.png)
![-](https://img-home.csdnimg.cn/images/20241231045053.png)
![-](https://img-home.csdnimg.cn/images/20241231045053.png)
![-](https://img-home.csdnimg.cn/images/20241231045053.png)
![-](https://img-home.csdnimg.cn/images/20241231045053.png)
![-](https://img-home.csdnimg.cn/images/20241226111658.png)
![rar](https://img-home.csdnimg.cn/images/20241231044955.png)
![-](https://img-home.csdnimg.cn/images/20241231045053.png)
![-](https://img-home.csdnimg.cn/images/20241231045053.png)
![-](https://img-home.csdnimg.cn/images/20241231045053.png)