开发uniapp 时,有时需要让用户上传手机相册或者拍摄图片,对图片进行处理,下面提供了一个method,支持打开摄像头拍照和相册功能,完成后,对图片做base64处理。
// 打开相册的方法
openCamera() {
let _this=this
uni.chooseImage({
count: 1, // 默认9, 设置图片的选择数量
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album','camera'], // 从相册选择
success: (res) => {
// 成功选择图片后的回调
console.log(res.tempFilePaths);
_this.localChooseImgUrl = res.tempFilePaths[0]
uni.showLoading({
title: 'loading'
})
uni.getFileSystemManager().readFile({
filePath: _this.localChooseImgUrl,
encoding: 'base64',
success: r => { // r.data
let base64 = r.data;
//把arraybuffer转成base64
base64 = 'data:image/jpeg;base64,' + base64;
//不加上这串字符,在页面无法显示
//console.log('base64', base64);
uni.showToast({
title: "图片解析成功 !",icon:"none",duration:3000,
});
uni.hideLoading();
},fail() {
uni.showToast({
title: "图片处理异常 !",icon:"error",duration:5000,
});
uni.hideLoading();
return
}
})
uni.hideLoading();
},
fail: (err) => {
// 选择失败的回调
console.error(err);
}
})
},
相对应的button 设置click到该函数即可
<u-button type="success" @click="openCamera" text="图片智能识别"></u-button>
这里我使用该功能,开发了个自动识别图片的功能,支持动植物,人物,物体解析功能,可以扫码体验一下,给些建议~