uniapp压缩图片,不使用uni.compressImage的方法
时间: 2023-12-22 07:04:56 浏览: 112
city.js配合专栏uniapp有手系列,轻松解决地区选择
如果你不想使用`uni.compressImage`方法来压缩图片,也可以使用其它的第三方库或者自己写代码来实现图片压缩。以下是一种通用的压缩图片的方法:
```
/**
* 压缩图片
* @param {string} imgData 图片的Base64数据
* @param {number} maxWidth 图片最大宽度
* @param {number} maxHeight 图片最大高度
* @param {number} quality 压缩质量(0-1之间的小数)
* @return {Promise} 压缩后的Base64数据
*/
function compressImage(imgData, maxWidth, maxHeight, quality) {
return new Promise(function(resolve, reject) {
var img = new Image()
img.src = imgData
img.onload = function() {
var canvas = document.createElement('canvas')
var ctx = canvas.getContext('2d')
var w = img.width
var h = img.height
var ratio = 1
if (w > maxWidth) {
ratio = maxWidth / w
} else if (h > maxHeight) {
ratio = maxHeight / h
}
w *= ratio
h *= ratio
canvas.width = w
canvas.height = h
ctx.clearRect(0, 0, w, h)
ctx.drawImage(img, 0, 0, w, h)
var base64 = canvas.toDataURL('image/jpeg', quality)
resolve(base64)
}
img.onerror = function() {
reject(new Error('Failed to load image'))
}
})
}
```
使用该方法压缩图片的步骤如下:
1. 将原始图片转换为Base64格式。
2. 调用`compressImage`方法进行压缩,并传入最大宽度、最大高度和压缩质量等参数。
3. 在返回的Promise对象的回调函数中获取压缩后的Base64数据。
以下是示例代码:
```
uni.chooseImage({
count: 1,
success: function (res) {
var tempFilePaths = res.tempFilePaths
uni.getFileSystemManager().readFile({
filePath: tempFilePaths[0],
encoding: 'base64',
success: function (data) {
compressImage(data.data, 800, 800, 0.8).then(function (base64) {
console.log(base64) // 压缩后的图片Base64数据
})
}
})
}
})
```
在上面的示例中,首先使用`uni.chooseImage`方法选择一张图片,然后使用`uni.getFileSystemManager().readFile`方法将图片文件读取为Base64格式。接着调用`compressImage`方法进行压缩,并传入最大宽度800、最大高度800和压缩质量0.8等参数。最后在返回的Promise对象的回调函数中获取压缩后的Base64数据。
需要注意的是,压缩图片会消耗CPU和内存资源,因此需要根据实际情况进行调整压缩参数,以免影响应用性能。
阅读全文