小程式中將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圖片儲存到相簿中的方法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！