fix: debug 分享卡片生成问题

This commit is contained in:
2026-03-11 11:48:40 +08:00
parent 883ce3c2c4
commit d3390d5e81
2 changed files with 44 additions and 18 deletions

View File

@@ -28,6 +28,17 @@ export default forwardRef(({ id, from, detail, userInfo }, ref) => {
const [shareImageUrl, setShareImageUrl] = useState(""); const [shareImageUrl, setShareImageUrl] = useState("");
const { fetchUserInfo } = useUserActions(); const { fetchUserInfo } = useUserActions();
async function ensureUserInfo() {
if (userInfo?.avatar_url && userInfo?.nickname) {
return userInfo;
}
const fetchedUserInfo = await fetchUserInfo();
return {
avatar_url: fetchedUserInfo?.avatar_url || userInfo?.avatar_url || "",
nickname: fetchedUserInfo?.nickname || userInfo?.nickname || "",
};
}
const publishFlag = from === "publish"; const publishFlag = from === "publish";
// const posterRef = useRef(); // const posterRef = useRef();
const { max_participants, participant_count } = detail || {}; const { max_participants, participant_count } = detail || {};
@@ -86,25 +97,34 @@ export default forwardRef(({ id, from, detail, userInfo }, ref) => {
const endTime = dayjs(end_time); const endTime = dayjs(end_time);
const dayofWeek = DayOfWeekMap.get(startTime.day()); const dayofWeek = DayOfWeekMap.get(startTime.day());
const gameLength = `${endTime.diff(startTime, "hour")}小时`; const gameLength = `${endTime.diff(startTime, "hour")}小时`;
console.log(userInfo, "userInfo"); const currentUserInfo = await ensureUserInfo();
const url = await generateShareImage({ try {
userAvatar: userInfo.avatar_url, const url = await generateShareImage({
userNickname: userInfo.nickname, userAvatar: currentUserInfo.avatar_url,
gameType: play_type, userNickname: currentUserInfo.nickname,
skillLevel: `NTRP ${genNTRPRequirementText( gameType: play_type,
skill_level_min, skillLevel: `NTRP ${genNTRPRequirementText(
skill_level_max, skill_level_min,
)}`, skill_level_max,
gameDate: `${startTime.format("M月D日")} (${dayofWeek})`, )}`,
gameTime: `${startTime.format("ah")} ${gameLength}`, gameDate: `${startTime.format("M月D日")} (${dayofWeek})`,
venueName: location_name, gameTime: `${startTime.format("ah")}${gameLength}`,
venueImages: image_list ? image_list : [], venueName: location_name,
}); venueImages: image_list ? image_list : [],
return url; });
if (!url) {
throw new Error("生成分享图片失败URL 为空");
}
return url;
} catch (e) {
console.error("生成分享卡片失败", e);
return `${OSS_BASE}/system/game_dou_di_tu.png`;
}
} }
useShareAppMessage(async (res) => { useShareAppMessage(async (res) => {
await changeMessageType(); await changeMessageType();
await ensureUserInfo();
const url = await generateShareImageUrl(); const url = await generateShareImageUrl();
// console.log(res, "res"); // console.log(res, "res");
return { return {
@@ -128,8 +148,8 @@ export default forwardRef(({ id, from, detail, userInfo }, ref) => {
} = detail || {}; } = detail || {};
// 先等待静默登录完成 // 先等待静默登录完成
await waitForAuthInit(); await waitForAuthInit();
const userInfo = await fetchUserInfo(); const currentUserInfo = await ensureUserInfo();
const { avatar_url, nickname } = userInfo; const { avatar_url, nickname } = currentUserInfo;
const startTime = dayjs(start_time); const startTime = dayjs(start_time);
const endTime = dayjs(end_time); const endTime = dayjs(end_time);
const dayofWeek = DayOfWeekMap.get(startTime.day()); const dayofWeek = DayOfWeekMap.get(startTime.day());

View File

@@ -106,6 +106,12 @@ const drawLabel = (ctx: any, x: number, y: number, width: number, height: number
ctx.restore() ctx.restore()
} }
/** 给图片 URL 加随机参数,避免同一链接二次加载不触发 onload */
function with_cache_bust(url: string): string {
const sep = url.includes('?') ? '&' : '?';
return `${url}${sep}_t=${Date.now()}_${Math.random().toString(36).slice(2)}`;
}
// 工具函数 - OffscreenCanvas 下加载图片(使用 offscreen.createImage // 工具函数 - OffscreenCanvas 下加载图片(使用 offscreen.createImage
const loadImage = (src: string): Promise<any> => { const loadImage = (src: string): Promise<any> => {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
@@ -117,7 +123,7 @@ const loadImage = (src: string): Promise<any> => {
const img = off.createImage() const img = off.createImage()
img.onload = () => resolve(img) img.onload = () => resolve(img)
img.onerror = reject img.onerror = reject
img.src = src img.src = with_cache_bust(src)
} catch (e) { } catch (e) {
reject(e) reject(e)
} }