小程序分享（下载）海报随记

大包子2025-08-25 15:37

最近我开发了一个小程序中的 "分享领取积分" 功能，其中有一个核心交互是让用户将活动海报下载到本地。虽然页面的整体绘制细节不作过多展开，但这个海报下载功能的实现过程很有探讨价值，下面我来具体分享一下实现思路。

首先，这个功能的核心技术是使用 Canvas 来绘制海报内容。我们先创建一个 Canvas 上下文并定义画布尺寸：

ini 复制代码

const ctx = uni.createCanvasContext('posterCanvas', this);
const canvasWidth = 300;
const canvasHeight = 500; // 根据实际情况调整高度

由于海报包含背景图片，我们需要确保图片加载完成后再进行绘制，这里用到了uni.getImageInfo方法。图片加载完成后，我们将其绘制为海报背景：

ini 复制代码

ctx.drawImage(res.path, 0, 0, canvasWidth, canvasHeight);

接下来就是绘制海报上的各种元素，以标题为例：

arduino 复制代码

ctx.setFontSize(16); // 设置字体大小
ctx.setFillStyle('#fff'); // 设置字体颜色
const titleText = this.xxxTitle; // 标题名称
const titleTextWidth = ctx.measureText(titleText).width; // 标题所占宽度
ctx.fillText(titleText, (canvasWidth - titleTextWidth )/2, medalImageY + medalImageHeight + 10); // 填充内容

其他元素如二维码、描述文字等也采用类似的方式绘制，具体的坐标和样式可根据实际需求调整。当所有内容绘制完成后，我们需要完成以下三个步骤来实现图片下载：

调用ctx.draw()方法确认绘制完成
使用uni.canvasToTempFilePath方法，传入 Canvas 的 id，将 Canvas 内容转换为临时图片路径
调用uni.saveImageToPhotosAlbum方法，传入临时图片路径，将图片保存到用户相册

需要特别注意的是，保存图片到相册需要用户授权。如果用户未授权，我们需要通过uni.openSetting引导用户前往设置页面开启相关权限。

整个功能的完整流程是：用户生成并下载海报后，将其分享给其他用户，其他用户通过扫描海报上的二维码登录小程序，分享者即可获得相应的积分奖励。