bimwe/mini-programs
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 排查生成海报失败的原因

Browse Source
This commit is contained in:
刘杰
2026-03-06 11:10:07 +08:00
parent 05b89a4aeb
commit aed3c4cc54
2 changed files with 53 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
src/game_pages/detail/components/SharePopup/index.tsx
View File

@@ -134,35 +134,42 @@ 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")}小时`;
// Taro.showLoading({ title: "生成中..." }); let qrCodeUrl = "";
const qrCodeUrlRes = await DetailService.getQrCodeUrl({ try {
page: "game_pages/detail/index", const qrCodeUrlRes = await DetailService.getQrCodeUrl({
scene: `id=${id}`, page: "game_pages/detail/index",
}); scene: `id=${id}`,
// const qrCodeUrl = await base64ToTempFilePath( });
// qrCodeUrlRes.data.qr_code_base64 qrCodeUrl = qrCodeUrlRes.data.ossPath;
// ); } catch (e) {
const qrCodeUrl = qrCodeUrlRes.data.ossPath; Taro.showToast({ title: "获取二维码失败", icon: "error" });
return;
}
await delay(100); await delay(100);
// Taro.showLoading({ title: "生成中..." }); console.log("url", qrCodeUrl);
console.log('url', qrCodeUrl) let url = "";
const url = await generatePosterImage({ try {
playType: play_type, url = await generatePosterImage({
ntrp: `NTRP ${genNTRPRequirementText(skill_level_min, skill_level_max)}`, playType: play_type,
mainCoursal: ntrp: `NTRP ${genNTRPRequirementText(skill_level_min, skill_level_max)}`,
image_list[0] && image_list[0].startsWith("http") mainCoursal:
? image_list[0] image_list[0] && image_list[0].startsWith("http")
: `${OSS_BASE}/front/ball/images/0621b8cf-f7d6-43ad-b852-7dc39f29a782.png`, ? image_list[0]
nickname, : `${OSS_BASE}/front/ball/images/0621b8cf-f7d6-43ad-b852-7dc39f29a782.png`,
avatarUrl: avatar_url, nickname,
title, avatarUrl: avatar_url,
locationName: location_name, title,
date: `${startTime.format("M月D日")} (${dayofWeek})`, locationName: location_name,
time: `${startTime.format("ah")}点 ${gameLength}`, date: `${startTime.format("M月D日")} (${dayofWeek})`,
qrCodeUrl, time: `${startTime.format("ah")}点 ${gameLength}`,
}); qrCodeUrl,
});
} catch (e) {
Taro.showToast({ title: "生成海报失败，请重试", icon: "error" });
return;
}
console.log('urlend', url) console.log("urlend", url);
// Taro.hideLoading(); // Taro.hideLoading();
Taro.showShareImageMenu({ Taro.showShareImageMenu({
path: url, path: url,

38
src/utils/genPoster.ts
View File

@@ -55,26 +55,26 @@ function getImageWh(src: string): Promise<{ width: number; height: number }> {
} }
/** 加载图片 */ /** 加载图片 */
function loadImage(canvas: any, src: string): Promise<any> { function loadImage(canvas: any, src: string, key?: string): Promise<any> {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
let timer: ReturnType<typeof setTimeout>;
let timer: any;
const img = canvas.createImage(); const img = canvas.createImage();
img.crossOrigin = "anonymous" img.crossOrigin = "anonymous";
img.onload = () => { img.onload = () => {
clearTimeout(timer); clearTimeout(timer);
resolve(img); resolve(img);
}; };
img.onerror = () => { img.onerror = (e: Error) => {
clearTimeout(timer); clearTimeout(timer);
console.log('img error', src) const errMsg = `Image load failed: ${key}: ${src}`
} console.warn(errMsg)
reject(new Error(errMsg));
};
timer = setTimeout(() => { timer = setTimeout(() => {
reject(new Error(`Image load timeout: ${src}`)); reject(new Error(`Image load timeout: ${key}: ${src}`));
}, 8000); }, 8000);
img.src = src; img.src = src;
@@ -327,21 +327,21 @@ export async function generatePosterImage(data: any): Promise<string> {
console.log('ctx', ctx) console.log('ctx', ctx)
// 背景渐变 // 背景渐变
roundRectGradient(ctx, 0, 0, width, height, 24, "#BFFFEF", "#F2FFFC"); roundRectGradient(ctx, 0, 0, width, height, 24, "#BFFFEF", "#F2FFFC");
console.log('bgUrl', bgUrl) console.log('bgUrl', bgUrl)
const bgImg = await loadImage(canvas, bgUrl); const bgImg = await loadImage(canvas, bgUrl, 'bgUrl');
ctx.drawImage(bgImg, 0, 0, width, height); ctx.drawImage(bgImg, 0, 0, width, height);
console.log('bgUrlend', ) console.log('bgUrlend',)
roundRotateRect(ctx, 70, 100, width - 140, width - 140, 20, '#fff', deg2rad(-6)); roundRotateRect(ctx, 70, 100, width - 140, width - 140, 20, '#fff', deg2rad(-6));
// 顶部图片 // 顶部图片
const mainImg = await loadImage(canvas, data.mainCoursal); const mainImg = await loadImage(canvas, data.mainCoursal, 'mainCoursal');
console.log('mainCoursal', data.mainCoursal) console.log('mainCoursal', data.mainCoursal)
await drawRotateCoverImage( await drawRotateCoverImage(
ctx, ctx,
@@ -375,7 +375,7 @@ export async function generatePosterImage(data: any): Promise<string> {
left = 20; left = 20;
// 用户头像 // 用户头像
const avatarImg = await loadImage(canvas, data.avatarUrl); const avatarImg = await loadImage(canvas, data.avatarUrl, 'avatar');
ctx.save(); ctx.save();
ctx.beginPath(); ctx.beginPath();
ctx.arc(left + 30, top + 30, 30, 0, Math.PI * 2); ctx.arc(left + 30, top + 30, 30, 0, Math.PI * 2);
@@ -396,7 +396,7 @@ export async function generatePosterImage(data: any): Promise<string> {
ctx.fillStyle = "#00B578"; ctx.fillStyle = "#00B578";
ctx.fillText("球局", left, top); ctx.fillText("球局", left, top);
const ringImg = await loadImage(canvas, ringUrl); const ringImg = await loadImage(canvas, ringUrl, 'ring');
ctx.drawImage(ringImg, left - 10, top - 30, 80, 36); ctx.drawImage(ringImg, left - 10, top - 30, 80, 36);
left = 20; left = 20;
@@ -410,7 +410,7 @@ export async function generatePosterImage(data: any): Promise<string> {
top = r.top + 30; top = r.top + 30;
left = 20; left = 20;
const dateImg = await loadImage(canvas, dateIcon); const dateImg = await loadImage(canvas, dateIcon, 'date');
console.log('dateIcon', dateIcon) console.log('dateIcon', dateIcon)
await drawCoverImage( await drawCoverImage(
@@ -440,7 +440,7 @@ export async function generatePosterImage(data: any): Promise<string> {
top += 24; top += 24;
const mapImg = await loadImage(canvas, mapIcon); const mapImg = await loadImage(canvas, mapIcon, 'map');
await drawCoverImage(ctx, canvas, mapIcon, mapImg, left, top, 40, 40, 12); await drawCoverImage(ctx, canvas, mapIcon, mapImg, left, top, 40, 40, 12);
left += 40 + 16; left += 40 + 16;
@@ -454,7 +454,7 @@ export async function generatePosterImage(data: any): Promise<string> {
top = r.top + 60; top = r.top + 60;
const logoWh = await getImageWh(logoText); const logoWh = await getImageWh(logoText);
const logoTextImg = await loadImage(canvas, logoText); const logoTextImg = await loadImage(canvas, logoText, 'logo');
ctx.drawImage( ctx.drawImage(
logoTextImg, logoTextImg,
left, left,
@@ -464,7 +464,7 @@ export async function generatePosterImage(data: any): Promise<string> {
400 / (logoWh.width / logoWh.height) 400 / (logoWh.width / logoWh.height)
); );
const qrImg = await loadImage(canvas, data.qrCodeUrl); const qrImg = await loadImage(canvas, data.qrCodeUrl, 'qrcode');
// roundRectGradient(ctx, width - 12 - 150, height - 22 - 140, 140, 140, 20, "#fff", "#fff") // roundRectGradient(ctx, width - 12 - 150, height - 22 - 140, 140, 140, 20, "#fff", "#fff")
ctx.drawImage(qrImg, width - 22 - 100, height - 22 - 100 - 2, 100, 100); ctx.drawImage(qrImg, width - 22 - 100, height - 22 - 100 - 2, 100, 100);