使用背景:使用uniapp 开发App。后端返回的图片是二进制流格式,
一、请求后端获取图片文件流
因为预览时,uni.previewImage 不支持base64路径,所以我们要把得到的base64转成path
// 获取arraybuffer格式数据
let res = await uni.request({
method: "GET",
url: /* 请求路径 */,
params: {
id
},
responseType: "arraybuffer" //只有text、arraybuffer两种
})
// 转成base64格式路径
const base64Src = 'data:image/png;base64,' + uni.arrayBufferToBase64(res.data);
// 通过 image-tools 中方法再将base64路径转为普通路径,用于预览
const path = await base64ToPath(base64Src);
二、预览
uni.previewImage({
urls, // 预览的图片路径数组["路径1","路径2",...]
current, //打开的图片在数组中的索引
longPressActions: { //长按图片出现的提示保存图片的弹框
itemList: ['保存图片'],
success: (data) => {
//使用 image-tools 再将path转为base64,因为以下保存方法需要base64格式
pathToBase64(urls[data.index]).then(base64 => {
this.saveImgToLocal(base64) //保存方法
}).catch(error => {
console.error(error)
})
console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
},
fail: (err) => {
console.log(err.errMsg);
}
}
});
三、保存图片到本地相册
与图片预览结合使用。因为是App所以才使用如下方法。
saveImgToLocal(base64) {
const bitmap = new plus.nativeObj.Bitmap('test');
bitmap.loadBase64Data(
base64,
function() {
const url = '_doc/' + new Date() + '.png'; // url建议用时间戳命名方式
console.log('url:', url);
bitmap.save(
url, {
overwrite: true // 是否覆盖
// quality: 'quality' // 图片清晰度
},
i => {
//保存图片到系统相册
uni.saveImageToPhotosAlbum({
filePath: url,
success: function() {
uni.showToast({
title: '保存成功',
icon: 'none'
})
bitmap.clear();
}
});
},
e => {
uni.showToast({
title: '保存失败',
icon: 'none'
})
console.log(e);
bitmap.clear();
}
);
},
e => {
console.log('保存失败', e);
bitmap.clear();
}
);
},