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

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) => {
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);