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

使用背景:使用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();
					}
				);

			},

  • 1
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值