@TOC小程序如何用canvas实现base64图片制成海报
欢迎使用Markdown编辑器
最近在开发小程序的时候遇到这个问题,网上也没有找到合适的答案。
survived:function () {
let vm = this
// 创建画布对象
const ctx = wx.createCanvasContext("myCanvas", vm)
// base64格式图片转本地文件
const fsm = wx.getFileSystemManager();
const timestamp = Date.parse(new Date()); // 先创建时间戳用来命名(不加时间戳在画连续画第二张图的时候有问题)
timestamp: timestamp / 1000
const FILE_BASE_NAME = 'tmp_base64' + timestamp; //自定义文件名 因第二张图相同名字读取第一张故加个时间戳
console.log(FILE_BASE_NAME)
var base64data = vm.properties.base64Image;//base64格式图片
const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(base64data) || [];
if (!format) {
return (new Error('ERROR_BASE64SRC_PARSE'));
}
const filePath = `${wx.env.USER_DATA_PATH}/${FILE_BASE_NAME}.${format}`;
const buffer = wx.base64ToArrayBuffer(bodyData);
console.log(filePath)
fsm.writeFile ({
filePath,
data: buffer,
encoding: 'binary',
success() {
filePath;
},
fail() {
return (new Error('ERROR_BASE64SRC_WRITE'));
},
});
console.log(filePath)
console.log(wx.env.USER_DATA_PATH)
const basepath = `${wx.env.USER_DATA_PATH}`
// console.log(filePath === filePath)
// console.log(filePath)
setTimeout(() => {
wx.getImageInfo({
src: filePath,
success: function (res) {
// 根据 图片的大小 绘制底图 的大小
console.log(res) // 绘制底图的图片信息",
let imgW = res.width
let imgH = res.height
let imgPath = res.path
vm.setData({
canvasHeight: imgH,
canvasWidth: imgW
})
// 绘制底图 用原图的宽高比绘制
ctx.drawImage(imgPath, 0, 0, imgW, imgH)
let srclogo = vm.data.codeImg // logo图片的路径
// 绘制logo
ctx.drawImage(srclogo, 12, imgH - 56, 240, 38)
ctx.draw()
wx.showLoading({
title: '正在保存',
mask: true
})
setTimeout(() => {
wx.canvasToTempFilePath({
canvasId: 'myCanvas',
success: function (res) {
console.log(res) // 合成的带有logo得图片
let tempFilePath = res.tempFilePath
// 保存到相册
console.log(tempFilePath)
wx.saveImageToPhotosAlbum({
filePath: tempFilePath,
success(res) {
wx.hideLoading()
fsm.readdir({ // 读取目录内文件列表
dirPath: basepath,
success(res) {
res.files.forEach((val) => { // 遍历文件列表里的数据
console.log(val)
fsm.unlink({ // 清除writeFile保存的图片
filePath: basepath + '/' + val
});
})
}, fail(err) {
console.log(err)
}
})
// wx.getSavedFileList({
// success: savedFileInfo => {
// let list = savedFileInfo.fileList
// console.log("list:", savedFileInfo.fileList)
// for (let i = 0; i < list.length; i++) {
// wx.removeSavedFile({
// filePath: list[i].filePath,
// })
// }
// }
// })
wx.showModal({
title: '温馨提示',
content: '图片保存成功,可在相册中查看',
showCancel: false,
})
},
fail(res) {
wx.hideLoading()
wx.showModal({
title: '温馨提示',
content: '图片保存失败,请重试',
showCancel: false
})
}
})
}
}, vm)
}, 1000)
},
fail(res) {
wx.hideLoading()
wx.showModal({
title: '温馨提示',
content: '图片信息获取失败,请重试',
showCancel: false
})
}
})
},100)
},