小程序在分享页面增加了一个需求，就是要在分享的图片下面显示自定义的日期、星期、时间、识别，如下图：
要在小程序分享图片上显示时间日期（如你提供的示例图），核心思路是：先通过 Canvas 动态绘制包含时间的分享图，再将其作为自定义图片用于分享。下面以 Taro 框架为例，给出完整实现方案：
onShareAppMessage 中，将生成的临时图片路径作为 imageUrl 返回，实现分享时显示自定义图片。page.config.js 中，开启分享功能：export default { enableShareAppMessage: true, }
在页面中添加一个隐藏的 Canvas 组件：
import { Canvas, View } from '@tarojs/components'
import { useShareAppMessage, createCanvasContext, canvasToTempFilePath, downloadFile } from '@tarojs/taro'
export default function SharePage() {
// 预订时间
const bookTime = '1月27日 周四 19:00 晚餐'
// 网络背景图地址（替换为你的实际地址）
const bgImageUrl = 'https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/e718ea1f4e8a44e8bb7e64516b08d215.png'
// 下载网络图片到本地
const downloadImage = async (url) => {
try {
const res = await downloadFile({
url: url, // 网络图片地址
// header: {
// 部分图片需要设置请求头（如防盗链），根据实际情况添加
// 'Referer': 'https://xxx.com' // 示例：设置referer
// }
})
// 下载成功返回临时文件路径
if (res.statusCode === 200) {
return res.tempFilePath
} else {
throw new Error('图片下载失败')
}
} catch (error) {
console.error('下载图片出错：', error)
// 下载失败时使用本地默认图兜底
return '/assets/images/default-bg.jpg'
}
}
// 生成分享图
const generateShareImage = async () => {
return new Promise(async (resolve, reject) => {
// 1. 先下载网络图片到本地
const bgImagePath = await downloadImage(bgImageUrl)
// 2. 获取Canvas上下文
const ctx = createCanvasContext('shareCanvas')
// 3. 绘制背景图（使用下载后的临时路径）
ctx.drawImage(bgImagePath, 0, 0, 375, 250) // Canvas尺寸375x250
// 4. 绘制半透明黑色背景条
ctx.setFillStyle('rgba(0, 0, 0, 0.5)')
ctx.fillRect(0, 200, 375, 50)
// 5. 绘制时间文字
ctx.setFillStyle('#ffffff')
ctx.setFontSize(16)
ctx.fillText(bookTime, 20, 230)
// 6. 绘制完成后导出为图片
ctx.draw(false, () => {
canvasToTempFilePath({
canvasId: 'shareCanvas',
success: (res) => {
resolve(res.tempFilePath)
},
fail: reject
})
})
})
}
// 7. 配置分享 如果使用onShareAppMessage 方法也可以使用 onShareAppMessage = async (obj) => {...}
useShareAppMessage(async () => {
const imageUrl = await generateShareImage(); // 创建分享图片路径
return {
title: '贵宾王董事长先生您好，这是您的预订回执',
path: '/pages/share/share',
imageUrl: imageUrl
}
})return (
<View>
{/* 隐藏的Canvas */}
<Canvas canvasId="shareCanvas" style={{ position: 'absolute', left: '-9999px', width: '375px', height: '250px' }} />
{/* 显示其他组件内容 */}
<View> ... </View>
</View>
)
}
在 Canvas 中绘制背景图时能否直接使用网络图片路径，答案是：不可以直接使用，小程序的 Canvas drawImage 方法对网络图片有严格限制，直接使用会绘制失败。
小程序出于安全和性能考虑，drawImage 方法仅支持以下类型的图片路径：
/assets/images/xxx.jpg）wx.downloadFile 下载后的路径）/pages/xxx/xxx.png）wxfile:// 开头） 直接使用 https://xxx.com/xxx.jpg 这类网络路径，Canvas 会无法识别，导致背景图绘制不出来。
核心思路是：先用 wx.downloadFile（Taro 中为 downloadFile）将网络图片下载到本地，获取临时文件路径，再用这个路径绘制到 Canvas 上。
downloadFile 合法域名列表，否则下载会失败。分享图片就是空白downloadFile 的 header 中添加 Referer（值为图片所属域名），或者让后端处理图片转发。
downloadFile 下载到本地获取临时路径；drawImage 方法在小程序中对网络图片支持有限，建议先将网络图片下载到本地，再使用本地路径绘制。useShareAppMessage 必须返回一个 Promise 来等待图片生成完成。此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。