uniapp微信小程序保存base64图片的方法

最近在开发点餐系统的找人付款的功能,生成付款二维码,生成后用户可以分享二维码发送给朋友替他付款,但是微信小程序是无法分享图片的,需要把图片保存到相册里面,然后在微信里面分享相册里面的图片就行了,但是后台给的图片是base64图片,那么如何下载base64图片呢?

如果直接用wx.downloadFile方法会提示,我们使用uni.FileSystemManager.writeFile 将 ArrayBuffer 写为本地用户路径的二进制图片文件。
 



使用uni.getFileSystemManager().writeFile去下载base64图片

<view class="share-btn" @click="saveAlbum()">保存相册分享</view>
 

//保存相册
            saveAlbum(){
                uni.getSetting({//获取用户的当前设置
                    success:(res)=> {
                        if(res.authSetting['scope.writePhotosAlbum']){//验证用户是否授权可以访问相册
                            this.saveImageToPhotosAlbum();
                        }else{
                            uni.authorize({//如果没有授权,向用户发起请求
                                scope: 'scope.writePhotosAlbum',
                                success:()=> {
                                    this.saveImageToPhotosAlbum();
                                },
                                fail:()=>{
                                    uni.showToast({
                                        title:"请打开保存相册权限,再点击保存相册分享",
                                        icon:"none",
                                        duration:3000
                                    });
                                    setTimeout(()=>{
                                        uni.openSetting({//调起客户端小程序设置界面,让用户开启访问相册
                                            success:(res2)=> {
                                                // console.log(res2.authSetting)
                                            }
                                        });
                                    },3000);
                                }
                            })
                        }
                    }
                })

            },


           

saveImageToPhotosAlbum(){
                let base64=this.qrcode.replace(/^data:image\/\w+;base64,/, "");//去掉data:image/png;base64,
                let filePath=wx.env.USER_DATA_PATH + '/hym_pay_qrcode.png';
                uni.getFileSystemManager().writeFile({
                    filePath:filePath ,  //创建一个临时文件名
                    data: base64,    //写入的文本或二进制数据
                    encoding: 'base64',  //写入当前文件的字符编码
                    success: res => {
                        uni.saveImageToPhotosAlbum({
                            filePath: filePath,
                            success: function(res2) {
                                uni.showToast({
                                    title: '保存成功,请从相册选择再分享',
                                    icon:"none",
                                    duration:5000
                                })
                            },
                            fail: function(err) {
                                // console.log(err.errMsg);
                            }
                        })
                    },
                    fail: err => {
                        //console.log(err)
                    }
                })
            }
        },


好了uniapp微信小程序保存base64图片的方法就讲到这里,希望对你们有帮助!

猜你喜欢

转载自blog.csdn.net/wcdunf/article/details/127932490
今日推荐