diff --git a/app.js b/app.js index 9df4fdf..f3c9ea7 100644 --- a/app.js +++ b/app.js @@ -496,19 +496,20 @@ async function render3DCommercialPoster(canvas, productImg, title, price) { strokeOval(ctx, stageCx, topTierY, topTierRx, topTierRy); // 4. Hero Product Scaling & Placement - const targetH = 550; - const targetW = 540; - const srcW = productImg.width; - const srcH = productImg.height; + const targetH = 500; + const targetW = 520; + const srcW = productImg.width || 500; + const srcH = productImg.height || 500; const scale = Math.min(targetW / srcW, targetH / srcH); const destW = srcW * scale; const destH = srcH * scale; const destLeft = (w - destW) / 2; const destTop = topTierY - destH + 18; - // 4.1 Glossy Mirror Product Reflection + // 4.1 Glossy Mirror Product Reflection (Multiply blended) ctx.save(); - ctx.globalAlpha = 0.20; + ctx.globalCompositeOperation = 'multiply'; + ctx.globalAlpha = 0.25; ctx.translate(0, (topTierY + 6) * 2); ctx.scale(1, -1); ctx.drawImage(productImg, destLeft, topTierY + 6, destW, destH * 0.35); @@ -521,8 +522,11 @@ async function render3DCommercialPoster(canvas, productImg, title, price) { ctx.fillStyle = contactShadow; drawOval(ctx, stageCx, topTierY + 2, destW * 0.38, 12); - // Draw Hero Product + // Draw Hero Product with Multiply Blend Mode (removes white background completely) + ctx.save(); + ctx.globalCompositeOperation = 'multiply'; ctx.drawImage(productImg, destLeft, destTop, destW, destH); + ctx.restore(); // 5. Value Trust Badges drawPillBadge(ctx, 40, 240, '🇰🇷 100% Original Korea', true); diff --git a/index.html b/index.html index 2096b33..99a90cc 100644 --- a/index.html +++ b/index.html @@ -306,7 +306,7 @@ - +