小程序分享海报生成
生成朋友圈/群分享海报的完整工具函数:渐变背景、圆形头像、昵称、二维码、导出保存。
代码示例:离屏海报绘制
js
// utils/poster.js —— Canvas 2D 分享海报生成
async function drawPoster({ canvas, qrPath, avatarPath, name }) {
const ctx = canvas.getContext("2d");
const dpr = wx.getWindowInfo().pixelRatio;
const W = 600, H = 900;
canvas.width = W * dpr;
canvas.height = H * dpr;
ctx.scale(dpr, dpr);
// 背景
const bg = ctx.createLinearGradient(0, 0, 0, H);
bg.addColorStop(0, "#1b2f63");
bg.addColorStop(1, "#0e1730");
ctx.fillStyle = bg;
ctx.fillRect(0, 0, W, H);
// 头像(先下载成本地路径再画)
const avatar = await loadImage(avatarPath);
ctx.save();
ctx.beginPath();
ctx.arc(W / 2, 200, 60, 0, Math.PI * 2);
ctx.clip();
ctx.drawImage(avatar, W / 2 - 60, 140, 120, 120);
ctx.restore();
// 昵称
ctx.fillStyle = "#ffffff";
ctx.font = "bold 34px sans-serif";
ctx.textAlign = "center";
ctx.fillText(name, W / 2, 330);
// 二维码
const qr = await loadImage(qrPath);
ctx.drawImage(qr, W / 2 - 110, 560, 220, 220);
// 导出临时文件
return new Promise((resolve) => {
wx.canvasToTempFilePath({
canvas,
success: (res) => resolve(res.tempFilePath),
fail: () => resolve("")
});
});
}
function loadImage(src) {
return new Promise((resolve, reject) => {
const img = wx.createImage();
img.onload = () => resolve(img);
img.onerror = reject;
img.src = src;
});
}
module.exports = { drawPoster };
操作步骤
- 用离屏
canvas(type="2d")绘制海报:背景、头像、昵称、二维码。 - 网络图片先
wx.downloadFile到本地再绘制,避免 canvas 跨域污染。 canvasToTempFilePath导出临时图,wx.saveImageToPhotosAlbum保存相册。- 授权失败时引导用户打开设置页手动授权。
来源参考
GitHub 关键词:miniprogram-poster、wxapp-share-poster、canvas-poster。