uniapp微信小程序绘制后端返回的base64图片到canvas画布，点击画布保存图片到相册，亲测可行。废话不多说，直接上代码：
html代码：
<view class="qrcode-wrap" @click="saveQrcode">
<canvas canvas-id="qrcode" style="width:400rpx; height: 450rpx; margin-bottom: 20rpx;"></canvas>
<view class="p">(点击保存到相册)</view>
</view>
绘制base64到canvas代码：
const title = '邓紫棋合肥体育馆演唱会'
const base64Str = res.data // 此地址为后端返回的base64，不含有“data:image/jpeg;base64,”
// 转换base64
const fsm = uni.getFileSystemManager()
const FILE_BASE_NAME = 'tmp_base64src'
const buffer = uni.base64ToArrayBuffer(base64Str)
const filePath = `${wx.env.USER_DATA_PATH}/${FILE_BASE_NAME}.png`
// 写文件
fsm.writeFile({
filePath,
data: buffer,
encoding: 'binary',
success: (res) => {
wx.getImageInfo({ // 读取图片
src: filePath,
success: (res) => {
const ctx = uni.createCanvasContext('qrcode') // 定义画布
ctx.save() //开始绘制
ctx.beginPath() //开始新的路径
ctx.drawImage(res.path, 0, uni.upx2px(40), uni.upx2px(400), uni.upx2px(400)) // 绘制图片 参数分别为（图片路径，x轴开始位置，Y轴开始位置，宽，高）
ctx.setFontSize(uni.upx2px(26)) // 字号
ctx.setFillStyle('#333') // 颜色
ctx.setTextAlign('left') // 文字在设定的x位置
ctx.setTextBaseline('top') //文字在设定的y轴线
ctx.fillText(title, uni.upx2px(5), uni.upx2px(5)) // 参数分别为 内容 x轴位置 y轴位置
ctx.draw()
},
error: (err) => {
console.log('err', err)
}
})
}
})
保存canvas到相册代码：
function saveQrcode() {
uni.canvasToTempFilePath({
width: uni.upx2px(400),
height: uni.upx2px(450),
canvasId: 'qrcode',
success: (res) => {
// #ifndef H5
uni.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success(res) {
uni.$app.showToast('保存成功')
},
fail(err) {
uni.$app.showToast('保存失败')
console.log('err', err)
}
})
// #endif
// #ifdef H5
var arr = res.tempFilePath.split(',')
var bytes = atob(arr[1])
let ab = new ArrayBuffer(bytes.length)
let ia = new Uint8Array(ab)
for (let i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i)
}
var blob = new Blob([ab], {
type: 'application/octet-stream'
})
var url = URL.createObjectURL(blob)
var a = document.createElement('a')
a.href = url
a.download = new Date().valueOf() + ".png"
var e = document.createEvent('MouseEvents')
e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
a.dispatchEvent(e)
URL.revokeObjectURL(url)
// #endif
},
fail: (res) => {
uni.$app.showToast('保存失败')
console.log(res)
}
})
}
最终保存的图片：
