compressImage 说明
文档平台差异说明已标出:官网提供的api
uni.compressImage
除了H5
平台,其余平台都支持,所以我们利用条件编译,然后单独处理一下H5的图片压缩即可。
utils.js
里面封装一下该方法,方便调用文章来源:https://www.toymoban.com/news/detail-545740.html
/**
* 图片压缩
*/
export const imageCompress = (url) => {
return new Promise((resolve, reject) => {
// #ifndef H5
// 条件编译一下,除了H5平台,都可以使用uni 自带的图片压缩api处理
uni.compressImage({
src: url,
quality: 80, // 压缩质量,范围0~100,数值越小,质量越低,压缩率越高(仅对jpg有效)
success: async res => {
console.log('app-----imgCompress', res.tempFilePath)
resolve(res.tempFilePath)
}
})
// #endif
// #ifdef H5
const img = new Image()
img.src = url
let files = {};
img.onload = async () => {
const canvas = document.createElement('canvas') // 创建Canvas对象(画布)
const context = canvas.getContext('2d')
// 默认按比例压缩
let cw = img.width
let ch = img.height
let w = img.width
let h = img.height
canvas.width = w
canvas.height = h
if (cw > 600 && cw > ch) {
w = 600
h = (600 * ch) / cw
canvas.width = w
canvas.height = h
}
if (ch > 600 && ch > cw) {
h = 600
w = (600 * cw) / ch
canvas.width = w
canvas.height = h
}
// 生成canvas
let base64 // 创建属性节点
context.clearRect(0, 0, 0, w, h)
context.drawImage(img, 0, 0, w, h)
base64 = canvas.toDataURL()
resolve(base64)
}
// #endif
})
}
封装的这个方法,只是将图片地址返回了,也可以根据具体的实际场景返回不同的数据文章来源地址https://www.toymoban.com/news/detail-545740.html
到了这里,关于uniapp 之 多端实现图片压缩(含H5实现)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!