fix exp

src/lib/services/picletExport.ts

@@ -10,57 +10,49 @@ export async function generateShareableImage(piclet: PicletInstance): Promise<Bl
   const ctx = canvas.getContext('2d');
   if (!ctx) throw new Error('Could not create canvas context');
   
-  // Set canvas size (square format for social media sharing)
-  const canvasSize = 800;
+  // Set canvas size to match original piclet resolution
+  const canvasSize = 1024;
   canvas.width = canvasSize;
   canvas.height = canvasSize;
   
-  // Fill background with a gradient
-  const gradient = ctx.createLinearGradient(0, 0, 0, canvasSize);
-  gradient.addColorStop(0, '#87CEEB'); // Sky blue
-  gradient.addColorStop(0.6, '#98D98E'); // Light green
-  gradient.addColorStop(1, '#567d46'); // Dark green
-  ctx.fillStyle = gradient;
+  // Fill background with solid sky blue
+  ctx.fillStyle = '#87CEEB';
   ctx.fillRect(0, 0, canvasSize, canvasSize);
   
-  // Load and draw grass platform
+  // Load piclet image first to maintain original size
+  const picletImg = await loadImage(piclet.imageData || piclet.imageUrl);
+  const picletSize = 512; // Display at half the canvas size for better composition
+  const picletX = (canvasSize - picletSize) / 2;
+  const picletY = canvasSize / 2 - picletSize / 2 + 50; // Center with slight offset down
+  
+  // Load and draw grass platform positioned under the piclet
   const grassImg = await loadImage('/assets/grass.PNG');
-  const platformSize = 400;
+  const platformSize = picletSize + 100; // Slightly larger than piclet
   const platformX = (canvasSize - platformSize) / 2;
-  const platformY = canvasSize - platformSize + 100;
+  const platformY = picletY + picletSize - 150; // Position so piclet sits on platform
   ctx.drawImage(grassImg, platformX, platformY, platformSize, platformSize);
   
-  // Load and draw piclet
-  const picletImg = await loadImage(piclet.imageData || piclet.imageUrl);
-  const picletSize = 300;
-  const picletX = (canvasSize - picletSize) / 2;
-  const picletY = platformY - picletSize + 100;
+  // Draw piclet on top of platform
   ctx.drawImage(picletImg, picletX, picletY, picletSize, picletSize);
   
-  // Add piclet info text
+  // Add piclet name only (no level)
   ctx.fillStyle = 'white';
   ctx.strokeStyle = 'black';
-  ctx.lineWidth = 4;
-  ctx.font = 'bold 48px Arial';
+  ctx.lineWidth = 6;
+  ctx.font = 'bold 64px Arial';
   ctx.textAlign = 'center';
   
   const nameText = piclet.nickname || piclet.typeId;
-  const levelText = `Lv.${piclet.level}`;
   
   // Draw name with outline
-  ctx.strokeText(nameText, canvasSize / 2, 100);
-  ctx.fillText(nameText, canvasSize / 2, 100);
-  
-  // Draw level with outline
-  ctx.font = 'bold 36px Arial';
-  ctx.strokeText(levelText, canvasSize / 2, 150);
-  ctx.fillText(levelText, canvasSize / 2, 150);
+  ctx.strokeText(nameText, canvasSize / 2, 120);
+  ctx.fillText(nameText, canvasSize / 2, 120);
   
-  // Load and draw watermark
+  // Load and draw translucent watermark
   const logoImg = await loadImage('/assets/snap_logo.png');
-  const logoSize = 120;
-  ctx.globalAlpha = 0.7; // Semi-transparent
-  ctx.drawImage(logoImg, canvasSize - logoSize - 20, canvasSize - logoSize - 20, logoSize, logoSize);
+  const logoSize = 150;
+  ctx.globalAlpha = 0.3; // More translucent
+  ctx.drawImage(logoImg, canvasSize - logoSize - 30, canvasSize - logoSize - 30, logoSize, logoSize);
   ctx.globalAlpha = 1.0;
   
   // Get the image as blob