微信小程序中不同图片类型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时使用，可以详情看文章：http://blog.mokevip.top/2021/04/01/miniprogram-canvas/

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绘制的图片保存至本地，可以详情看文章：http://blog.mokevip.top/2021/04/01/miniprogram-canvas/

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。

感谢大家的关注。