小程序中將base64圖片保存到相冊中

1、受權獲取

  1. 相關api
    wx.getSetting
    wx.authorize
  2. 受權獲取流程通常爲
    是否有該權限 ——> 若無 ——> 調起受權彈窗 ——> 贊成 ——> 使用相關api
    (若是用戶拒絕受權則可以使用wx.opensetting引導用戶前往受權設置頁受權)
  3. 代碼實現javascript

    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、寫入臨時文件

  1. 相關api
    文件系統
    writeFile
  2. 參數encoding 用於說明 寫入的參數data的格式是什麼,並不是是將data按encoding的形式寫入。在這裏咱們應該指定encoding爲base64
  3. 代碼實現html

    // 先得到一個實例  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、格式化字符串

  1. base64字符串的格式: "data:image/png;base64,...........",逗號前面這一段爲格式說明,用於說明後續的內容格式是圖片格式爲png的base64格式。
  2. 若是直接將整一串字符傳入,雖然能夠保存成功,可是將致使圖片文件格式錯誤。所以再作一步切割操做
  3. let startIdx = this.qrcode.indexOf('base64,') + 7

4、完整實現

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)
            }
        })
    }
}
相關文章
相關標籤/搜索