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

src/game_pages/detail/components/SharePopup/index.tsx

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

src/utils/genPoster.ts

@@ -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) => {
-
-    let timer: any;
+    let timer: ReturnType<typeof setTimeout>;
     const img = canvas.createImage();
 
-    img.crossOrigin = "anonymous" 
+    img.crossOrigin = "anonymous";
 
     img.onload = () => {
       clearTimeout(timer);
       resolve(img);
     };
-    img.onerror = () => {
+    img.onerror = (e: Error) => {
       clearTimeout(timer);
-      console.log('img error', src)
-    }
-
+      const errMsg = `Image load failed: ${key}: ${src}`
+      console.warn(errMsg)
+      reject(new Error(errMsg));
+    };
 
     timer = setTimeout(() => {
-      reject(new Error(`Image load timeout: ${src}`));
+      reject(new Error(`Image load timeout: ${key}: ${src}`));
     }, 8000);
 
     img.src = src;
@@ -327,21 +327,21 @@ export async function generatePosterImage(data: any): Promise<string> {
 
   console.log('ctx', ctx)
 
-  
+
   // 背景渐变
   roundRectGradient(ctx, 0, 0, width, height, 24, "#BFFFEF", "#F2FFFC");
 
   console.log('bgUrl', bgUrl)
-  const bgImg = await loadImage(canvas, bgUrl);
+  const bgImg = await loadImage(canvas, bgUrl, 'bgUrl');
   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));
 
 
   // 顶部图片
-  const mainImg = await loadImage(canvas, data.mainCoursal);
+  const mainImg = await loadImage(canvas, data.mainCoursal, 'mainCoursal');
   console.log('mainCoursal', data.mainCoursal)
   await drawRotateCoverImage(
     ctx,
@@ -375,7 +375,7 @@ export async function generatePosterImage(data: any): Promise<string> {
   left = 20;
 
   // 用户头像
-  const avatarImg = await loadImage(canvas, data.avatarUrl);
+  const avatarImg = await loadImage(canvas, data.avatarUrl, 'avatar');
   ctx.save();
   ctx.beginPath();
   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.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);
 
   left = 20;
@@ -410,7 +410,7 @@ export async function generatePosterImage(data: any): Promise<string> {
   top = r.top + 30;
   left = 20;
 
-  const dateImg = await loadImage(canvas, dateIcon);
+  const dateImg = await loadImage(canvas, dateIcon, 'date');
 
   console.log('dateIcon', dateIcon)
   await drawCoverImage(
@@ -440,7 +440,7 @@ export async function generatePosterImage(data: any): Promise<string> {
   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);
 
   left += 40 + 16;
@@ -454,7 +454,7 @@ export async function generatePosterImage(data: any): Promise<string> {
   top = r.top + 60;
 
   const logoWh = await getImageWh(logoText);
-  const logoTextImg = await loadImage(canvas, logoText);
+  const logoTextImg = await loadImage(canvas, logoText, 'logo');
   ctx.drawImage(
     logoTextImg,
     left,
@@ -464,7 +464,7 @@ export async function generatePosterImage(data: any): Promise<string> {
     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")
   ctx.drawImage(qrImg, width - 22 - 100, height - 22 - 100 - 2, 100, 100);