feat: add background image upload to banner builder

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/lib/client/bannerRenderer.ts

@@ -113,6 +113,7 @@ export interface BannerConfig {
   price: string         // ex: "79 €"
   comparePrice: string  // ex: "119 €" (barré)
   productImageUrl: string | null
+  backgroundImageBlob?: Blob | null  // image de fond uploadée (remplace la couleur unie)
 }
 
 export async function renderBanner(config: BannerConfig): Promise<Blob> {
@@ -123,8 +124,28 @@ export async function renderBanner(config: BannerConfig): Promise<Blob> {
   const scheme = COLOR_SCHEMES[config.scheme]
 
   // ── Fond ─────────────────────────────────────────────────────────────────
-  ctx.fillStyle = scheme.bg
-  ctx.fillRect(0, 0, W, H)
+  if (config.backgroundImageBlob) {
+    try {
+      const bgImg = await createImageBitmap(config.backgroundImageBlob)
+      // Cover : remplit tout le canvas en centrant
+      const scale = Math.max(W / bgImg.width, H / bgImg.height)
+      const dw = bgImg.width * scale
+      const dh = bgImg.height * scale
+      const dx = (W - dw) / 2
+      const dy = (H - dh) / 2
+      ctx.drawImage(bgImg, dx, dy, dw, dh)
+      bgImg.close()
+      // Overlay semi-transparent pour lisibilité du texte
+      ctx.fillStyle = 'rgba(0,0,0,0.35)'
+      ctx.fillRect(0, 0, W, H)
+    } catch {
+      ctx.fillStyle = scheme.bg
+      ctx.fillRect(0, 0, W, H)
+    }
+  } else {
+    ctx.fillStyle = scheme.bg
+    ctx.fillRect(0, 0, W, H)
+  }
 
   // Zone texte : 55% gauche, zone image : 45% droite
   const textZoneW = Math.round(W * 0.55)