Add limited support for objectPosition property

Author: damianstasik

src/builder/image.ts

@@ -0,0 +1,36 @@
+export function getPreserveAspectRatio(
+  objectFit: string,
+  objectPosition?: string
+) {
+  if (objectFit !== 'contain' && objectFit !== 'cover') {
+    return 'none'
+  }
+
+  let align = 'xMidYMid'
+
+  if (objectPosition) {
+    const parts = objectPosition.split(' ')
+
+    if (parts.length === 2) {
+      const [x, y] = parts
+
+      if (x === 'left') {
+        align = 'xMin'
+      } else if (x === 'right') {
+        align = 'xMax'
+      } else {
+        align = 'XMid'
+      }
+
+      if (y === 'top') {
+        align += 'YMin'
+      } else if (y === 'bottom') {
+        align += 'YMax'
+      } else {
+        align += 'YMid'
+      }
+    }
+  }
+
+  return align + (objectFit === 'cover' ? ' slice' : '')
+}

src/builder/rect.ts

@@ -9,6 +9,7 @@ import { buildXMLString } from '../utils.js'
 import border, { getBorderClipPath } from './border.js'
 import { genClipPath } from './clip-path.js'
 import buildMaskImage from './mask-image.js'
+import { getPreserveAspectRatio } from './image.js'
 
 export default async function rect(
   {
@@ -200,12 +201,10 @@ export default async function rect(
       ((style.borderBottomWidth as number) || 0) +
       ((style.paddingBottom as number) || 0)
 
-    const preserveAspectRatio =
-      style.objectFit === 'contain'
-        ? 'xMidYMid'
-        : style.objectFit === 'cover'
-        ? 'xMidYMid slice'
-        : 'none'
+    const preserveAspectRatio = getPreserveAspectRatio(
+      String(style.objectFit),
+      String(style.objectPosition)
+    )
 
     shape += buildXMLString('image', {
       x: left + offsetLeft,

test/image.test.tsx

@@ -427,6 +427,55 @@ describe('Image', () => {
 
     expect(toImage(svg, 100)).toMatchImageSnapshot()
   })
+
+  it('should convert objectFit', async () => {
+    const svg = await satori(
+      <div
+        style={{
+          width: '100%',
+          height: '100%',
+          display: 'flex',
+        }}
+      >
+        <img
+          width='100%'
+          height='100%'
+          src='https://via.placeholder.com/150'
+          style={{
+            objectFit: 'cover',
+          }}
+        />
+      </div>,
+      { width: 100, height: 100, fonts }
+    )
+
+    expect(svg).toContain('preserveAspectRatio="xMidYMid slice"')
+  })
+
+  it('should convert objectPosition', async () => {
+    const svg = await satori(
+      <div
+        style={{
+          width: '100%',
+          height: '100%',
+          display: 'flex',
+        }}
+      >
+        <img
+          width='100%'
+          height='100%'
+          src='https://via.placeholder.com/150'
+          style={{
+            objectFit: 'cover',
+            objectPosition: 'right top',
+          }}
+        />
+      </div>,
+      { width: 100, height: 100, fonts }
+    )
+
+    expect(svg).toContain('preserveAspectRatio="xMaxYMin slice"')
+  })
 })
 
 describe('background-image: url()', () => {