Enhance card drawing functionality to crop and center uploaded art as background

web/templates/card_creator.html

@@ -93,7 +93,7 @@ async function generateCardId(...args) {
   const hex = hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
 
   // Return first 12 characters
-  return hex.slice(0, 12);
+  return hex;
 }
 
 
@@ -124,10 +124,33 @@ frameSelect.addEventListener("change", updateFrame);
 function drawCard() {
   ctx.clearRect(0, 0, canvas.width, canvas.height);
 
-
+  // Draw uploaded art as cropped and centered background if present
-  // Draw uploaded art as background if present
   if (uploadedImage) {
-    ctx.drawImage(uploadedImage, 0, 0, canvas.width, canvas.height);
+    const targetWidth = 599;
+    const targetHeight = 745;
+    const x = (canvas.width - targetWidth) / 2;
+    const y = ((canvas.height - targetHeight) / 2)-78;
+
+    // Calculate cropping for source image to fit aspect ratio
+    const srcAspect = uploadedImage.width / uploadedImage.height;
+    const targetAspect = targetWidth / targetHeight;
+    let srcX = 0, srcY = 0, srcW = uploadedImage.width, srcH = uploadedImage.height;
+
+    if (srcAspect > targetAspect) {
+      // Source is wider: crop sides
+      srcW = uploadedImage.height * targetAspect;
+      srcX = (uploadedImage.width - srcW) / 2;
+    } else {
+      // Source is taller: crop top/bottom
+      srcH = uploadedImage.width / targetAspect;
+      srcY = (uploadedImage.height - srcH) / 2;
+    }
+
+    ctx.drawImage(
+      uploadedImage,
+      srcX, srcY, srcW, srcH, // source crop
+      x, y, targetWidth, targetHeight // destination on canvas
+    );
   }
 
   ctx.drawImage(frameImage, 0, 0, canvas.width, canvas.height);