uniapp App端预览图片并保存本地相册并且获得的是二进制流格式图片

原创已于 2022-12-24 21:23:45 修改 · 3.6k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app

于 2022-12-22 23:08:15 首次发布

uniapp归档专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用uniapp获取后端返回的二进制图片流，转换为base64路径以便预览，并结合image-tools插件实现本地保存。重点涉及arrayBuffer操作、base64转换和图片预览、保存到本地的功能。

使用背景：使用uniapp 开发App。后端返回的图片是二进制流格式，

使用插件：image-tools - DCloud 插件市场

一、请求后端获取图片文件流

因为预览时，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();
					}
				);

			},