Fix images aspect with ratio

package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "@xmldom/xmldom": "^0.9.8",
         "@zip.js/zip.js": "^2.7.57",
+        "image-size": "^2.0.2",
         "ses": "^1.12.0"
       },
       "devDependencies": {
@@ -2185,6 +2186,18 @@
         "node": ">=10 <11 || >=12 <13 || >=14"
       }
     },
+    "node_modules/image-size": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/image-size/-/image-size-2.0.2.tgz",
+      "integrity": "sha512-IRqXKlaXwgSMAMtpNzZa1ZAe8m+Sa1770Dhk8VkSsP9LS+iHD62Zd8FQKs8fbPiagBE7BzoFX23cxFnwshpV6w==",
+      "license": "MIT",
+      "bin": {
+        "image-size": "bin/image-size.js"
+      },
+      "engines": {
+        "node": ">=16.x"
+      }
+    },
     "node_modules/immutable": {
       "version": "4.2.4",
       "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.2.4.tgz",
@@ -6129,6 +6142,11 @@
       "integrity": "sha512-yiWd4GVmJp0Q6ghmM2B/V3oZGRmjrKLXvHR3TE1nfoXsmoggllfZUQe74EN0fJdPFZu2NIvNdrMMLm3OsV7Ohw==",
       "dev": true
     },
+    "image-size": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/image-size/-/image-size-2.0.2.tgz",
+      "integrity": "sha512-IRqXKlaXwgSMAMtpNzZa1ZAe8m+Sa1770Dhk8VkSsP9LS+iHD62Zd8FQKs8fbPiagBE7BzoFX23cxFnwshpV6w=="
+    },
     "immutable": {
       "version": "4.2.4",
       "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.2.4.tgz",

package.json

@@ -41,6 +41,7 @@
   "dependencies": {
     "@xmldom/xmldom": "^0.9.8",
     "@zip.js/zip.js": "^2.7.57",
+    "image-size": "^2.0.2",
     "ses": "^1.12.0"
   }
 }

scripts/odf/templating/fillOdtElementTemplate.js

@@ -1,6 +1,7 @@
 import {traverse, Node, getAncestors, findCommonAncestor} from "../../DOMUtils.js";
 import {closingIfMarker, eachClosingMarker, eachStartMarkerRegex, elseMarker, ifStartMarkerRegex, imageMarkerRegex, variableRegex} from './markers.js'
 import {isOdfjsImage} from "../../shared.js"
+import imageSize from "image-size";
 /** @import {OdfjsImage} from "../../types.js" */
 
 /**
@@ -810,10 +811,30 @@ export default function fillOdtElementTemplate(rootElements, compartment, addIma
                                     newImageNode.setAttribute("draw:mime-type", imageMarker.odfjsImage.mediaType)
 
                                     const newFrameNode = currentNode.ownerDocument?.createElement('draw:frame')
-                                    newFrameNode.setAttribute("text:anchor-type", "frame")
+                                    newFrameNode.setAttribute("text:anchor-type", "as-char")
-                                    newFrameNode.setAttribute("svg:width", "7.28cm")
+                                    const buffer = new Uint8Array(imageMarker.odfjsImage.content)
-                                    newFrameNode.setAttribute("svg:height", "10.239cm")
+                                    
-                                    newFrameNode.setAttribute("draw:z-index", "0")
+                                    const dimensions = imageSize(buffer)
+
+                                    const MAX_WIDTH = 10 // cm
+                                    const MAX_HEIGHT = 10 // cm
+
+                                    let width;
+                                    let height;
+
+                                    if(dimensions.width > dimensions.height){
+                                        // image in landscape
+                                        width = MAX_WIDTH;
+                                        height = width*dimensions.height/dimensions.width
+                                    }
+                                    else{
+                                        // image in portrait
+                                        height = MAX_HEIGHT;
+                                        width = height*dimensions.width/dimensions.height
+                                    }
+
+                                    newFrameNode.setAttribute("svg:width", `${width}cm`)
+                                    newFrameNode.setAttribute("svg:height", `${height}cm`)
                                     newFrameNode.appendChild(newImageNode)
 
                                     currentNode.parentNode?.replaceChild(newFrameNode, currentNode)