1

config/dev.ts

@@ -4,7 +4,11 @@ export default {
     quiet: false,
     stats: true
   },
-  mini: {},
+  mini: {
+    webpackChain(chain) {
+      chain.devtool('source-map')
+    }
+  },
   h5: {},
   // 添加这个配置来显示完整错误信息
   compiler: {

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

@@ -145,6 +145,7 @@ export default forwardRef(({ id, from, detail, userInfo }, ref) => {
     const qrCodeUrl = qrCodeUrlRes.data.ossPath;
     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)}`,
@@ -160,6 +161,8 @@ export default forwardRef(({ id, from, detail, userInfo }, ref) => {
       time: `${startTime.format("ah")}点 ${gameLength}`,
       qrCodeUrl,
     });
+
+    console.log('urlend', url)
     // Taro.hideLoading();
     Taro.showShareImageMenu({
       path: url,

src/services/detailService.ts

@@ -169,7 +169,7 @@ class GameDetailService {
   }
 
   async getLinkUrl(req: { path: string, query: string }): Promise<ApiResponse<{ url_link: string, path: string, query: string }>> {
-    return httpService.post('/user/generate_url_link', req, { showLoading: true })
+    return httpService.post('/user/generate_url_link', req, { showLoading: false })
   }
 }
 

src/utils/genPoster.ts

@@ -56,9 +56,27 @@ function getImageWh(src: string): Promise<{ width: number; height: number }> {
 
 /** 加载图片 */
 function loadImage(canvas: any, src: string): Promise<any> {
-  return new Promise((resolve) => {
+  return new Promise((resolve, reject) => {
+
+    let timer: any;
     const img = canvas.createImage();
-    img.onload = () => resolve(img);
+
+    img.crossOrigin = "anonymous" 
+
+    img.onload = () => {
+      clearTimeout(timer);
+      resolve(img);
+    };
+    img.onerror = () => {
+      clearTimeout(timer);
+      console.log('img error', src)
+    }
+
+
+    timer = setTimeout(() => {
+      reject(new Error(`Image load timeout: ${src}`));
+    }, 8000);
+
     img.src = src;
   });
 }
@@ -146,6 +164,7 @@ async function drawRotateCoverImage(
   rotate = 0 // 旋转角度（弧度）
 ) {
   const { width, height } = await getImageWh(src);
+  console.log('width', width, 'height', height)
   const scale = Math.max(w / width, h / height);
   const newW = width * scale;
   const newH = height * scale;
@@ -179,6 +198,7 @@ async function drawRotateCoverImage(
 
   // 绘制 cover
   ctx.drawImage(img, offsetX, offsetY, newW, newH);
+  console.log('drawImage', offsetX, offsetY, newW, newH)
 
   ctx.restore();
 }
@@ -290,6 +310,8 @@ function drawTextWrap(
 
 /** 核心纯函数：生成海报图片 */
 export async function generatePosterImage(data: any): Promise<string> {
+
+
   console.log("start !!!!");
   // const dpr = Taro.getWindowInfo().pixelRatio;
   const dpr = 1;
@@ -297,19 +319,30 @@ export async function generatePosterImage(data: any): Promise<string> {
   const width = 600;
   const height = 1000;
 
+  console.log('width', width, 'height', height)
   const canvas = Taro.createOffscreenCanvas({ type: "2d", width: width * dpr, height: height * dpr });
   const ctx = canvas.getContext("2d");
   ctx.scale(dpr, dpr);
 
+
+  console.log('ctx', ctx)
+
+  
   // 背景渐变
   roundRectGradient(ctx, 0, 0, width, height, 24, "#BFFFEF", "#F2FFFC");
 
+  console.log('bgUrl', bgUrl)
   const bgImg = await loadImage(canvas, bgUrl);
   ctx.drawImage(bgImg, 0, 0, width, height);
+  console.log('bgUrlend', )
+
 
   roundRotateRect(ctx, 70, 100, width - 140, width - 140, 20, '#fff', deg2rad(-6));
+
+
   // 顶部图片
   const mainImg = await loadImage(canvas, data.mainCoursal);
+  console.log('mainCoursal', data.mainCoursal)
   await drawRotateCoverImage(
     ctx,
     canvas,
@@ -378,6 +411,8 @@ export async function generatePosterImage(data: any): Promise<string> {
   left = 20;
 
   const dateImg = await loadImage(canvas, dateIcon);
+
+  console.log('dateIcon', dateIcon)
   await drawCoverImage(
     ctx,
     canvas,
@@ -404,6 +439,7 @@ export async function generatePosterImage(data: any): Promise<string> {
   left = 20;
   top += 24;
 
+
   const mapImg = await loadImage(canvas, mapIcon);
   await drawCoverImage(ctx, canvas, mapIcon, mapImg, left, top, 40, 40, 12);
 
@@ -440,11 +476,13 @@ export async function generatePosterImage(data: any): Promise<string> {
   ctx.font = "400 20px sans-serif";
   ctx.fillText("长按识别二维码，快来加入，有你就有场！", left, height - 30/* top */);
 
+  console.log('canvas', canvas)
   // 导出图片
   const { tempFilePath } = await Taro.canvasToTempFilePath({
     canvas,
     fileType: 'png',
     quality: 0.7,
   });
+  console.log('tempFilePath', tempFilePath)
   return tempFilePath;
 }

src/utils/share.ts

@@ -533,7 +533,6 @@ const drawShareCard = async (ctx: any, data: ShareCardData, offscreen: any): Pro
             const locationPath = await loadImage(`${OSS_BASE}/front/ball/images/adc9a167-2ea9-4e3b-b963-6a894a1fd91b.jpg`)
             ctx.drawImage(locationPath, iconX, locationInfoY, iconSize, iconSize)
             drawBoldText(ctx, data.venueName, danDaX, locationInfoY + 10, locationFontSize, '#000000')
-
             try {
                 const wxAny: any = (typeof (globalThis as any) !== 'undefined' && (globalThis as any).wx) ? (globalThis as any).wx : null
                 if (wxAny && typeof wxAny.canvasToTempFilePath === 'function') {