微信小程序中不同图片类型canvas、url、base64、本地临时文件的互相转换

本地临时文件转base64

迫于后端只接受base64作为文件上传入口，无法使用wx.uploadFile接口上传图片，因此只能在用户选择图片后转为base64作为储存和上传。

// 本地文件转base64
function wxfileTobase64(url, ishead = false) {
    return new Promise((reslove, reject) => {
        wx.getFileSystemManager().readFile({
            filePath: url, //选择图片返回的相对路径
            encoding: 'base64', //编码格式
            success: res => { //成功的回调
                reslove((ishead ? 'data:image/jpeg;base64,' : '') + res.data)
            },
            fail: err => {
                reject(err)
            }
        })
    })
}
// 使用
wx.chooseImage({
    count: 4,
    sizeType: ['compressed'],
    sourceType: ['album', 'camera'],
    success(res) {
        wxfileTobase64(res.tempFilePaths[0]).then(base64=>{
             console.log(base64)
        })
    }
})

base64转本地临时文件

主要是在canvas时使用，可以详情看文章：blog.mokevip.top/2021/04/01/…

function base64ToWxfile(base64,fileName) {
    const path = wx.env.USER_DATA_PATH + "/"+ fileName
    return new Promise((reslove, reject) => {
        wx.getFileSystemManager().writeFile({
            filePath: path,
            data: base64,
            encoding: 'base64',
            success: (res) => {
                reslove(path)
            },
            fail: (err) => {
                reject(err)
            }
        })
    })
}

URL转base64

将线上的URL转换为BASE64编码。

function urlTobase64(url, ishead = false) {
    return new Promise((reslove, reject) => {
        wx.request({
            url: url,
            responseType: 'arraybuffer', //最关键的参数，设置返回的数据格式为arraybuffer
            success: res => {
                //把arraybuffer转成base64
                let base64 = wx.arrayBufferToBase64(res.data);

                //不加上这串字符，在页面无法显示的哦
                base64 = (ishead ? 'data:image/jpeg;base64,' : '') + base64

                //打印出base64字符串，可复制到网页校验一下是否是你选择的原图片呢
                reslove(base64)
            }
        })
    })
}

canvas转本地临时文件

主要是在canvas时使用，用于将canvas绘制的图片保存至本地，可以详情看文章：blog.mokevip.top/2021/04/01/…

wx.canvasToTempFilePath({
    x: 0,
    y: 0,
    width: 350,
    height: 450,
    canvasId: 'myCanvas',
    success: function(res) {
        // 获取到临时文件路径，我们也可以使用这个路径将canvas保存到本地
        let img = res.tempFilePath
    },
    fail(err) {
        console.log(err)
    }
})

结语

大概微信小程序不同文件格式之间互转的方法就是如上了，有了这些基础方法，我们也可以通过他们的组合来将不同的文件类型自由转换。如将canvas转化成base64编码，就是将canvas先转为本地临时文件后再转换为base64。

**注意，使用这几种转换方式，选择图片最好不要太大，否则容易导致出现阻塞和错误！**如使用wx.chooseImage中sizeType设为compressed。

感谢大家的关注。