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

hykeda4年前uniapp380

使用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)
                    }
                })
            }
        },



如果是直接远程图片:

uni.getImageInfo({

src: path, //远程地址

success: function (image) {

uni.saveImageToPhotosAlbum({

filePath: image.path,//返回图片的本地路径

success() {

that.$common.showToast('下载成功')

},

fail(res) {

console.log(path)

console.log(res);

that.$common.showToast(res)

},

complete() {

// console.log(image.path)

}

});

}

});



标签: uniapp

相关文章

微信小程序 getUserProfile直接进入fail函数,getUserProfile调用失败:fail can only be invoked by user TAP gesture.

问题描述小程序更改了调用用户信息的接口调用getUserProfile直接进入失败返回的错误信息如下getUserProfile:fail can only be invoked by user TA...

HBuilderX打开微信开发工具失败解决方案

先停止运行到微信开发工具, 然后在微信开发者工具设置-安全里面那个服务端口, 关闭再打开。重新运行就可以了 !...

uni-app注意点

uni-app注意点

vue只会将已经在data中声明的属性变为响应,没有声明的是不响应的,特别是数组和对象千万要注意export default({    data(){    &...

关于uniapp中v-for循环使用slice(0, 4)导致click事件报错问题

关于uniapp中v-for循环使用slice(0, 4)导致click事件报错问题

在使用uniapp开发时遇到只要循环数组的前四个值,使用了slice函数,在添加click事件后报错:_vm.e0 is not a function<view   ...

uniapp开发微信小程序中使用block标签,在开发环境显示正常,生产环境中显示错误问题

在使用uniapp开发微信小程序时,使用了block标签进行了逻辑判断:<block v-show="list.type === 2">...

uni-app错误总结

H5页面中报错信息:[Vue warn]: Duplicate keys detected: 'pages/index/index'. This may cause an update...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。