Add support for viewbox transformations for intrinsic raster image dimensions (#314)

* add computeViewBoxTransform for img

* update references to match viewbox transformations for raster images

---------

Co-authored-by: Lukas Hollaender <[email protected]>

Author: EugeneBalabai

src/nodes/image.ts

@@ -8,6 +8,7 @@ import { GraphicsNode } from './graphicsnode'
 import { Rect } from '../utils/geometry'
 import { Matrix } from 'jspdf'
 import { Viewport } from '../context/viewport'
+import { computeViewBoxTransform } from '../utils/transform'
 
 // groups: 1: mime-type (+ charset), 2: mime-type (w/o charset), 3: charset, 4: base64?, 5: body
 export const dataUriRegex = /^\s*data:(([^/,;]+\/[^/,;]+)(?:;([^,;=]+=[^,;=]+))?)?(?:;(base64))?,((?:.|\s)*)$/i
@@ -76,13 +77,26 @@ export class ImageNode extends GraphicsNode {
     } else {
       const dataUri = `data:image/${format};base64,${btoa(data)}`
       try {
-        context.pdf.addImage(
-          dataUri,
-          '', // will be ignored anyways if imageUrl is a data url
+        const [imgWidth, imgHeight] = await ImageNode.getImageDimensions(dataUri)
+        const viewBox = [0, 0, imgWidth, imgHeight]
+        const transform = computeViewBoxTransform(
+          this.element,
+          viewBox,
           x,
           y,
           width,
-          height
+          height,
+          context
+        )
+        context.pdf.setCurrentTransformationMatrix(transform)
+
+        context.pdf.addImage(
+          dataUri,
+          '', // will be ignored anyways if imageUrl is a data url
+          0,
+          0,
+          imgWidth,
+          imgHeight
         )
       } catch (e) {
         typeof console === 'object' &&
@@ -171,4 +185,15 @@ export class ImageNode extends GraphicsNode {
         return `image/${format}`
     }
   }
+
+  static getImageDimensions(src: string): Promise<[number, number]> {
+    return new Promise((resolve, reject) => {
+      const img = new Image()
+      img.onload = () => {
+        resolve([img.width, img.height])
+      }
+      img.onerror = reject
+      img.src = src
+    })
+  }
 }

test/common/tests.js

@@ -31,6 +31,7 @@ window.tests = [
   'gradient-units',
   'gradients-and-patterns-mixed',
   'hidden-clippath',
+  'image-aspect-ratio',
   'image-data-urls-base64-spaces',
   'image-svg-urls',
   'line-default-coordinates',