Introduction to the method of saving base64 images to the album in the mini program

This article brings you an introduction to the method of saving base64 images to the album in the mini program. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1. Authorization acquisition

1. Related api
wx.getSetting
wx.authorize

2. The authorization acquisition process is generally
Whether you have the permission——> If not——> Bring up the authorization pop-up window——> Agree——> Use the relevant API
(If the user refuses authorization, you can use wx.opensetting to guide the user to authorization Setting page authorization)

3. Code implementation

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
}

2. Writing temporary files

1. Related api
File system
writeFile

2. The parameter encoding is used to describe the format of the written parameter data. It does not mean that the data is written in the form of encoding. Here we should specify encoding as base64

3, code implementation

// 先获得一个实例  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)
    }
})

3. Format string

1, format of base64 string : "data:image/png;base64,...", the paragraph before the comma is the format description, which is used to indicate that the subsequent content format is the base64 format of the image format png.

2. If you directly pass in the entire string of characters, although it can be saved successfully, it will cause an image file format error. So do another cutting operation

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

Four. Complete implementation

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)
            }
        })
    }
}

The above is the detailed content of Introduction to the method of saving base64 images to the album in the mini program. For more information, please follow other related articles on the PHP Chinese website!