Erweiterungen

src/main/frontend/invoice-generator/profile-invoice-generator.js

@@ -167,10 +167,29 @@ window.initProfileInvoiceGenerator = function() {
       ctx.stroke();
     } else if (el.type === 'image') {
       if (el.imageData) {
-        // Draw the uploaded image
+        // Draw the uploaded image with aspect ratio preserved
         var img = new Image();
         img.onload = function() {
-          ctx.drawImage(img, x, y, w, h);
+          // Calculate dimensions to maintain aspect ratio (object-fit: contain)
+          var imgAspect = img.width / img.height;
+          var boxAspect = w / h;
+          var drawW, drawH, drawX, drawY;
+          
+          if (imgAspect > boxAspect) {
+            // Image is wider than box - fit to width
+            drawW = w;
+            drawH = w / imgAspect;
+            drawX = x;
+            drawY = y + (h - drawH) / 2; // Center vertically
+          } else {
+            // Image is taller than box - fit to height
+            drawW = h * imgAspect;
+            drawH = h;
+            drawX = x + (w - drawW) / 2; // Center horizontally
+            drawY = y;
+          }
+          
+          ctx.drawImage(img, drawX, drawY, drawW, drawH);
           // Redraw selection if this element is selected
           if (selectedElement && selectedElement.id === el.id) {
             drawSelection(el);
@@ -716,11 +735,38 @@ window.initProfileInvoiceGenerator = function() {
   
   window.updateProfileElementImage = function(id, imageData) {
     var el = elements.find(function(e) { return e.id === id; });
-    if (el) {
-      el.imageData = imageData;
+    if (!el) return;
+    
+    // Load image to get dimensions
+    var img = new Image();
+    img.onload = function() {
+      var MAX_WIDTH = 1090;
+      var width = img.width;
+      var height = img.height;
+      
+      // Only resize if image is larger than MAX_WIDTH
+      if (width > MAX_WIDTH) {
+        height = Math.round(height * (MAX_WIDTH / width));
+        width = MAX_WIDTH;
+        
+        // Create canvas to resize image
+        var canvas = document.createElement('canvas');
+        canvas.width = width;
+        canvas.height = height;
+        var ctx = canvas.getContext('2d');
+        ctx.drawImage(img, 0, 0, width, height);
+        
+        // Get resized image data (maintain original format if possible)
+        var resizedDataUrl = canvas.toDataURL('image/jpeg', 0.9);
+        el.imageData = resizedDataUrl;
+      } else {
+        el.imageData = imageData;
+      }
+      
       el.text = 'Bild';
       draw();
-    }
+    };
+    img.src = imageData;
   };
   
   window.deleteProfileElement = function(id) {