小程序分享海报生成

生成朋友圈/群分享海报的完整工具函数:渐变背景、圆形头像、昵称、二维码、导出保存。

场景:分享裂变 技术栈:微信小程序 Canvas 2D 来源:GitHub 参考

代码示例:离屏海报绘制

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 };

操作步骤

  1. 用离屏 canvastype="2d")绘制海报:背景、头像、昵称、二维码。
  2. 网络图片先 wx.downloadFile 到本地再绘制,避免 canvas 跨域污染。
  3. canvasToTempFilePath 导出临时图,wx.saveImageToPhotosAlbum 保存相册。
  4. 授权失败时引导用户打开设置页手动授权。

来源参考

GitHub 关键词:miniprogram-posterwxapp-share-postercanvas-poster