微信小程序保存base64图片到相册(uni-app)

先上代码:

    saveAlbum() {
                console.log("保存相册");
                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);
                                }
                            })
                        }
                    },
                    error: (res) => {
                        console.log('保存失败', res);
                    }
                })

            },
            saveImageToPhotosAlbum(reportTimes) {
                if (!reportTimes) {
                    reportTimes = 0;
                }

                let fileName = new Date().getTime();
                let base64 = this.img.replace('data:image/jpeg;base64,', ""); //去掉data:image/png;base64,
                // let base64 = this.img;

                if (reportTimes == 1) {
                    base64 += '=';
                }
                if (reportTimes == 2) {
                    base64 += '==';
                }

                console.log("图片base64长度", base64.length);

                console.log("图片base64末尾", base64.substr(base64.length - 4, base64.length));

                // console.log("图片base64", base64);
                let filePath = wx.env.USER_DATA_PATH + '/homework' + fileName + '.jpg';
                uni.showLoading({
                    title: '加载中',
                    mask: true
                });
                setTimeout(() => {
                    uni.getFileSystemManager().writeFile({
                        filePath: filePath, //创建一个临时文件名
                        data: base64, //写入的文本或二进制数据
                        encoding: 'base64', //写入当前文件的字符编码
                        success: res => {
                            uni.saveImageToPhotosAlbum({
                                filePath: filePath,
                                success: function(res2) {
                                    uni.hideLoading();
                                    uni.showToast({
                                        title: '保存成功',
                                        icon: "none",
                                        duration: 1500
                                    });
                                },
                                fail: function(err) {
                                    // console.log(err.errMsg);
                                    uni.hideLoading();
                                }
                            })

                        },
                        fail: err => {
                            if (reportTimes < 3) {
                                this.saveImageToPhotosAlbum(reportTimes + 1);
                            }
                        }
                    })
                }, 500)

            },

 

  在保存的失败回调函数里递归调用了保存,这样做的原因是调用微信的wx.getFileSystemManager().writeFile函数时,有时会报base64 fail encode error格式错误,把base64放在image的src中渲染是可以显示图片的。

  base64有很多版本,wx能接受的版本应该是位数为3的整数倍,若不满足则使用= 号补位至3的整数倍位数。但是我尝试使用 base64.length%3判断补位的等号数量时,并不一定符合这一规则。

  也就是说不同的base64不确定是否需要补0位,1位还是2位=号。

  不得已只能使用递归依次尝试,直至保存成功,或三种都尝试且都失败为止。

 

本身是为了实现保存的一种临时妥协方案,如果后端可以直接返回图片链接还是使用图片链接比较好,base64由于编码原因,体积会比原图片增加1/3,请求速度会比较慢。

这是我的方案,希望有人能提出更科学的方案来解决base64格式差异的问题。

 

posted @ 2020-10-20 13:27  匿静喜。  阅读(973)  评论(0)    收藏  举报
下一个