From 132c74d27c8a2740256feeb6796bef409f961191 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BC=A0=E6=88=90?= Date: Mon, 9 Feb 2026 22:02:43 +0800 Subject: [PATCH] 1 --- config/dev.ts | 6 ++- .../detail/components/SharePopup/index.tsx | 3 ++ src/services/detailService.ts | 2 +- src/utils/genPoster.ts | 42 ++++++++++++++++++- src/utils/share.ts | 1 - 5 files changed, 49 insertions(+), 5 deletions(-) diff --git a/config/dev.ts b/config/dev.ts index 851db66..e66db33 100644 --- a/config/dev.ts +++ b/config/dev.ts @@ -4,7 +4,11 @@ export default { quiet: false, stats: true }, - mini: {}, + mini: { + webpackChain(chain) { + chain.devtool('source-map') + } + }, h5: {}, // 添加这个配置来显示完整错误信息 compiler: { diff --git a/src/game_pages/detail/components/SharePopup/index.tsx b/src/game_pages/detail/components/SharePopup/index.tsx index 174d19d..8c2a105 100644 --- a/src/game_pages/detail/components/SharePopup/index.tsx +++ b/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, diff --git a/src/services/detailService.ts b/src/services/detailService.ts index b84642b..b2f0c01 100644 --- a/src/services/detailService.ts +++ b/src/services/detailService.ts @@ -169,7 +169,7 @@ class GameDetailService { } async getLinkUrl(req: { path: string, query: string }): Promise> { - return httpService.post('/user/generate_url_link', req, { showLoading: true }) + return httpService.post('/user/generate_url_link', req, { showLoading: false }) } } diff --git a/src/utils/genPoster.ts b/src/utils/genPoster.ts index ba9a72a..898ee05 100644 --- a/src/utils/genPoster.ts +++ b/src/utils/genPoster.ts @@ -56,9 +56,27 @@ function getImageWh(src: string): Promise<{ width: number; height: number }> { /** 加载图片 */ function loadImage(canvas: any, src: string): Promise { - 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 { + + console.log("start !!!!"); // const dpr = Taro.getWindowInfo().pixelRatio; const dpr = 1; @@ -297,19 +319,30 @@ export async function generatePosterImage(data: any): Promise { 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 { 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 { 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 { 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; } diff --git a/src/utils/share.ts b/src/utils/share.ts index 5adc4ea..2fdc1f2 100644 --- a/src/utils/share.ts +++ b/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') {