使用createOffscreenCanvas制作分享海报,但是canvasToTempFilePath不支持离屏Canvas,所以只能通过Canvas的toDataURL转base64,再通过getFileSystemManager中的writeFile将文件写入,再进行预览。
大致实现代码如下【不需要wxml代码】
async drawPoster() {
const {
backImg,
promoImg,
} = this.data;
const canvas = wx.createOffscreenCanvas({
type: '2d',
width: 750,
height: 840
});
const ctx = canvas.getContext('2d');
// 绘制背景
let bgImg = canvas.createImage();
// 等待图片加载
await new Promise(resolve => {
bgImg.onload = resolve;
bgImg.src = backImg; // 要加载的图片 url
})
ctx.drawImage(bgImg, 0, 0, 750, 840);
// 绘制二维码
let mycode = canvas.createImage();
// 等待图片加载
await new Promise(resolve => {
mycode.onload = resolve;
mycode.src = promoImg; // 要加载的图片 url
})
// 创建二维码圆形
ctx.save();
ctx.arc(568 * dpr, 524, 120, 0, 2 * Math.PI);
ctx.clip();
ctx.fillStyle = "#FFF";
ctx.fill();
ctx.drawImage(mycode, 458 * dpr, 414, 220, 220);
ctx.restore();
const imgData = canvas.toDataURL();
const time = new Date().getTime();
const fs = wx.getFileSystemManager();
const filePath = wx.env.USER_DATA_PATH + "/poster" + time + "share" + ".png";
fs.writeFile({
filePath,
data: imgData.replace(/^data:image\/\w+;base64,/, ""),
encoding: 'base64',
success: res => {
wx.showShareImageMenu({
path: filePath,
success: res => {
console.log(res);
}
})
},
fail: err => {
// 此处可能存在内存满了的情况
// 需要根据具体需求处理
console.log(err);
}
});
fs.close();
},