当前位置:首页站长学院后端开发小程序中将base64图片保存到相册中的方法介绍
企业营销,就选知企PROSAAS

小程序中将base64图片保存到相册中的方法介绍

本篇文章给大家带来的内容是关于小程序中将base64图片保存到相册中的方法介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

一、授权获取

1、相关api
wx.getSetting
wx.authorize

2、授权获取流程一般为
是否有该权限 ——> 若无 ——> 调起授权弹窗 ——> 同意 ——> 使用相关api
(如果用户拒绝授权则可使用wx.opensetting引导用户前往授权设置页授权)

3、代码实现

static async weAuthCheck(type = 'address') {
    let resGetting = await new Promise((resolve, reject) => {
        wepy.getSetting({
            success: res => {
                // console.log(res, 'getsetting')
                if (res.authSetting.hasOwnProperty(`scope.${type}`) && res.authSetting[`scope.${type}`]) {
                    resolve({
                        succeeded: true
                    })
                } else {
                    wepy.authorize({
                        scope: `scope.${type}`,
                        success: () => {
                            resolve({
                                succeeded: true
                            })
                        },
                        fail: err => {
                            // console.log(err, 'errrrr')
                            resolve({
                                succeeded: false,
                                err: err
                            })
                        }
                    })
                }
            },
            fail: err => {
                resolve({
                    succeeded: false,
                    err: err
                })
            }
        })
    })
    console.log('getSetting res: \n', resGetting)
    return resGetting
}

二、写入临时文件

1、相关api
文件系统
writeFile

2、参数encoding 用于说明 写入的参数data的格式是什么,并非是将data按encoding的形式写入。在这里我们应该指定encoding为base64

3、代码实现

// 先获得一个实例  this.fileManager = wx.getFileSystemManager()
this.fileManager.writeFile({
    filePath: `${wx.env.USER_DATA_PATH}/qrcode_${timestamp}.png`,
    data: data,
    encoding: 'base64',
    success: res => {
        console.log('res: \n:', res)
    },
    fail: res => {
        console.log(res)
    }
})

三、格式化字符串

1、base64字符串的格式: “data:image/png;base64,………..”,逗号前面这一段为格式说明,用于说明后续的内容格式是图片格式为png的base64格式。

2、如果直接将整一串字符传入,虽然可以保存成功,但是将导致图片文件格式错误。因此再做一步切割操作

let startIdx = this.qrcode.indexOf('base64,') + 7

四、完整实现

async onTapSaveQrcode() {
    let startIdx = this.qrcode.indexOf('base64,') + 7
    let resCheck = await this.$weAuthCheck('writePhotosAlbum')
    let timestamp = new Date().getTime()
    let self = this
    if (resCheck.succeeded) {
        wepy.showLoading()
        this.fileManager.writeFile({
            filePath: `${wx.env.USER_DATA_PATH}/qrcode_${timestamp}.png`,
            data: this.qrcode.slice(startIdx),
            encoding: 'base64',
            success: res => {
                console.log('res: \n:', res)
                wx.saveImageToPhotosAlbum({
                    filePath: `${wx.env.USER_DATA_PATH}/qrcode_${timestamp}.png`,
                    success: res => {
                        self.$emit('save-qrcode-success')
                        wepy.showToast({
                            title: '保存成功'
                        })
                    },
                    fail: err => {
                        console.log(err)
                        if (!err.errMsg.includes('cancel')) {
                            wepy.showToast({
                                title: err.errMsg,
                                icon: 'none'
                            })
                        }
                    },
                    complete: () => {
                        wepy.hideLoading()
                    }
                })
            },
            fail: res => {
                wepy.hideLoading()
                console.log(res)
            }
        })
    }
}

以上就是小程序中将base64图片保存到相册中的方法介绍的详细内容,更多请关注知企PROSAAS其它相关文章!

温馨提示:

文章标题:小程序中将base64图片保存到相册中的方法介绍

文章链接:https://ceshi.prosaas.cn/17007.html

更新时间:2018年12月14日

声明: 本站大部分内容均收集于网络!若内容若侵犯到您的权益,请发送邮件至:973664285@qq.com我们将第一时间处理! 资源所需价格并非资源售卖价格,是收集、整理、编辑详情以及本站运营的适当补贴,并且本站不提供任何免费技术支持。 所有资源仅限于参考和学习,版权归原作者所有,更多请阅读知企PROSAAS协议

给TA打赏
共{{data.count}}人
人已打赏
后端开发

微信小程序修改data使页面数据实时更新的代码示例

2018-12-14 10:23:46

后端开发

小程序主包体积优化的方法介绍

2018-12-14 10:47:23

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索