From 5fa6ff062ea6c1ae6da34693be454c6c906d7994 Mon Sep 17 00:00:00 2001 From: Shu Ding Date: Tue, 3 Mar 2026 14:02:32 +0100 Subject: [PATCH] support for objectFit fill and scale-down --- README.md | 4 +- src/builder/rect.ts | 72 +++++++++-- src/handler/compute.ts | 2 + ...iner-aspect-ratio-not-preserved-1-snap.png | Bin 0 -> 13618 bytes ...th-fill-on-non-square-container-1-snap.png | Bin 0 -> 17129 bytes ...image-is-smaller-than-container-1-snap.png | Bin 0 -> 1088 bytes ...on-bottom-right-with-scale-down-1-snap.png | Bin 0 -> 1082 bytes ...object-position-with-scale-down-1-snap.png | Bin 0 -> 1099 bytes ...-image-is-larger-than-container-1-snap.png | Bin 0 -> 309 bytes test/image.test.tsx | 118 ++++++++++++++++++ 10 files changed, 184 insertions(+), 12 deletions(-) create mode 100644 test/__image_snapshots__/image-test-tsx-test-image-test-tsx-object-fit-and-object-position-object-fit-fill-should-stretch-image-to-fill-container-aspect-ratio-not-preserved-1-snap.png create mode 100644 test/__image_snapshots__/image-test-tsx-test-image-test-tsx-object-fit-and-object-position-object-fit-fill-should-stretch-with-fill-on-non-square-container-1-snap.png create mode 100644 test/__image_snapshots__/image-test-tsx-test-image-test-tsx-object-fit-and-object-position-object-fit-scale-down-should-not-scale-up-when-image-is-smaller-than-container-1-snap.png create mode 100644 test/__image_snapshots__/image-test-tsx-test-image-test-tsx-object-fit-and-object-position-object-fit-scale-down-should-respect-object-position-bottom-right-with-scale-down-1-snap.png create mode 100644 test/__image_snapshots__/image-test-tsx-test-image-test-tsx-object-fit-and-object-position-object-fit-scale-down-should-respect-object-position-with-scale-down-1-snap.png create mode 100644 test/__image_snapshots__/image-test-tsx-test-image-test-tsx-object-fit-and-object-position-object-fit-scale-down-should-scale-down-when-image-is-larger-than-container-1-snap.png diff --git a/README.md b/README.md index b7ebe8f5..f1f1426e 100644 --- a/README.md +++ b/README.md @@ -224,8 +224,8 @@ Satori uses the same Flexbox [layout engine](https://yogalayout.com) as React Na objectFit -contain, cover, none, default to none - +Supported +Example diff --git a/src/builder/rect.ts b/src/builder/rect.ts index 62dc963f..49907031 100644 --- a/src/builder/rect.ts +++ b/src/builder/rect.ts @@ -243,12 +243,64 @@ export default async function rect( } } const alignment = `x${xAlign}Y${yAlign}` - const preserveAspectRatio = - style.objectFit === 'contain' - ? alignment - : style.objectFit === 'cover' - ? `${alignment} slice` - : 'none' + + // Calculate objectFit behavior + let preserveAspectRatio: string + let imageWidth = width - offsetLeft - offsetRight + let imageHeight = height - offsetTop - offsetBottom + let imageX = left + offsetLeft + let imageY = top + offsetTop + + if (style.objectFit === 'contain') { + preserveAspectRatio = alignment + } else if (style.objectFit === 'cover') { + preserveAspectRatio = `${alignment} slice` + } else if (style.objectFit === 'fill') { + preserveAspectRatio = 'none' + } else if (style.objectFit === 'scale-down') { + // Get natural dimensions + const naturalWidth = style.__naturalWidth as number + const naturalHeight = style.__naturalHeight as number + + if (naturalWidth && naturalHeight) { + // Calculate if we need to scale down + const containerWidth = width - offsetLeft - offsetRight + const containerHeight = height - offsetTop - offsetBottom + const scaleX = containerWidth / naturalWidth + const scaleY = containerHeight / naturalHeight + const minScale = Math.min(scaleX, scaleY) + + if (minScale >= 1) { + // Image is smaller than or equal to container + // Use natural size (don't scale up) + imageWidth = naturalWidth + imageHeight = naturalHeight + preserveAspectRatio = 'none' + + // Center according to objectPosition + const extraWidth = containerWidth - naturalWidth + const extraHeight = containerHeight - naturalHeight + + // Apply objectPosition alignment + if (xAlign === 'Min') imageX += 0 + else if (xAlign === 'Max') imageX += extraWidth + else imageX += extraWidth / 2 // Mid + + if (yAlign === 'Min') imageY += 0 + else if (yAlign === 'Max') imageY += extraHeight + else imageY += extraHeight / 2 // Mid + } else { + // Image is larger than container, scale down like 'contain' + preserveAspectRatio = alignment + } + } else { + // Fall back to 'contain' behavior if natural dimensions are unavailable + preserveAspectRatio = alignment + } + } else { + // Default/none: fill (stretch) + preserveAspectRatio = 'none' + } if (style.transform) { imageBorderRadius = getBorderRadiusClipPath( @@ -266,10 +318,10 @@ export default async function rect( } shape += buildXMLString('image', { - x: left + offsetLeft, - y: top + offsetTop, - width: width - offsetLeft - offsetRight, - height: height - offsetTop - offsetBottom, + x: imageX, + y: imageY, + width: imageWidth, + height: imageHeight, href: src, preserveAspectRatio, transform: matrix ? matrix : undefined, diff --git a/src/handler/compute.ts b/src/handler/compute.ts index 6e46f9b2..80ebf594 100644 --- a/src/handler/compute.ts +++ b/src/handler/compute.ts @@ -111,6 +111,8 @@ export default async function compute( ? (contentBoxHeight as number) + extraVertical : contentBoxHeight style.__src = resolvedSrc + style.__naturalWidth = imageWidth + style.__naturalHeight = imageHeight } if (type === 'svg') { diff --git a/test/__image_snapshots__/image-test-tsx-test-image-test-tsx-object-fit-and-object-position-object-fit-fill-should-stretch-image-to-fill-container-aspect-ratio-not-preserved-1-snap.png b/test/__image_snapshots__/image-test-tsx-test-image-test-tsx-object-fit-and-object-position-object-fit-fill-should-stretch-image-to-fill-container-aspect-ratio-not-preserved-1-snap.png new file mode 100644 index 0000000000000000000000000000000000000000..0200e7d04a6b3ec653cf04edc53d85e5fd2dbfad GIT binary patch literal 13618 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 B&(;6{ literal 0 HcmV?d00001 diff --git a/test/__image_snapshots__/image-test-tsx-test-image-test-tsx-object-fit-and-object-position-object-fit-fill-should-stretch-with-fill-on-non-square-container-1-snap.png b/test/__image_snapshots__/image-test-tsx-test-image-test-tsx-object-fit-and-object-position-object-fit-fill-should-stretch-with-fill-on-non-square-container-1-snap.png new file mode 100644 index 0000000000000000000000000000000000000000..fb6ed3d00135940818fde291d2a4a89a3c44a645 GIT binary patch literal 17129 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 P00000NkvXXu0mjf@}`iE literal 0 HcmV?d00001 diff --git a/test/__image_snapshots__/image-test-tsx-test-image-test-tsx-object-fit-and-object-position-object-fit-scale-down-should-not-scale-up-when-image-is-smaller-than-container-1-snap.png b/test/__image_snapshots__/image-test-tsx-test-image-test-tsx-object-fit-and-object-position-object-fit-scale-down-should-not-scale-up-when-image-is-smaller-than-container-1-snap.png new file mode 100644 index 0000000000000000000000000000000000000000..6d4d670a85aa7037e309b33c19b20a600b7e6d5f GIT binary patch literal 1088 zcmeAS@N?(olHy`uVBq!ia0vp^DIm% z{$TGgVXCRCVm_=~+OxFnLzNo;8M{n(ruO`Lw%T5cH+#80hA@e*Uz@ObOXtz4t}c5x zUY*?~d$iZiMOQu+81x@+n|Jt9zWt(z-CYmo3Fhdg2i&h0Qoil^P4U^op|rzZ0LkO!y`x;;srN1xXSG)=dCzcFZH^Y z$xS_fbN{Zp5td~vFQb=zcz0v|j}nvq1AJ>L&+)83x>8}`inZ#Y(f)3yY%7#2xUOcW z=F}H+1x9ap+;7vpvNLnf&%@Cb>Qz#K`VLzoH*dc4aHrUkzfIf4?fa_wAJ6OFyCbFh z=aIksH;>;II`?e* z@4d6mDZ62~uF%Ni#J!DC{(nB4%anO>zrUuE_okPi{My>yuH5|h<-MC7|LM!Q1g;EE zygy;f4k_g)B@;fplm7PQHZzBO>;C_@AIU9mzSBY5Jb|A1ezLE8GD9HKf*}c5GB9|$ L`njxgN@xNAaq#8$ literal 0 HcmV?d00001 diff --git a/test/__image_snapshots__/image-test-tsx-test-image-test-tsx-object-fit-and-object-position-object-fit-scale-down-should-respect-object-position-bottom-right-with-scale-down-1-snap.png b/test/__image_snapshots__/image-test-tsx-test-image-test-tsx-object-fit-and-object-position-object-fit-scale-down-should-respect-object-position-bottom-right-with-scale-down-1-snap.png new file mode 100644 index 0000000000000000000000000000000000000000..dbc2ce465748a108fc848e3338b5f123d54b2882 GIT binary patch literal 1082 zcmeAS@N?(olHy`uVBq!ia0vp^DIm@K&TEXhRxdbgHTUp3wPmtvi#?~Edv>)x>~YS~)yp22fBY?S>)D*=Pagezc5ZiG))K`E`pf?;a>wvMSt^4l>81j>2C1cjy|_~V_VcV+vt~W8me*db{Vl_Gxx(!4=UbjH-m%`IbMDdG6MQOP$ofA1`)RYrFG=aG zX=~DX9&aqvVV^efhi>D~rIowy-Tay@DUvezmGIN0%%9x8U-t7&6{m>;NwJ1LXMGk%tvF=a9kg{n*CtE3nrLZNml&Dz z?f0D*JbHY2viFO(+Q|ynn!|-N6aExRbIR=bs#y|pXv24{mSn*>`;FS4-Z5JCe3@VY zV2;yCvou6pUj@hodVao) z^Y^#x8?MA2yqJ4GA^f(%zKB0OC+DnHNcaC_&YC%)YRZP|eHFL!?tIJ@R?|D9ba^NH z!hdxoJokG7(s`a1KQDN4DRIt=E~cB^WlyWPE;($~SP_;pnf+ZH!@SS)jwGoz|9cqy zW^tbOvpyN8Kg$I7*nY6Kd*^?6d!y?1x?iG84mNF@FOqBj^7QtHrvEub)<4nbNp z?qNRrFD7nnZXbV@=Ra8cz>{Tef6~^J@Yu&9OE$jJuc-d`ctf>F`P}^Dthdj!zpFi9 zckfxjv*RprAM9OrS?0gA@lOA)|9_D}^nvZ2dN*C}3*YKId8+PD!L#s^_Z^Sh80Gb! z_a#0nx)|2JRwde0TJwb1hdJ$CZ&i0I*;<%bG}`N>1#U^cZ58z)tx9V7v~#y=+t>0* zZ=TqcBUpWWm(@o0?fpsd&*PSS=JpWV^dsS+x5%4{zkl4giey{L u-lm*|x9*zfRJ|6CsSf#F`}RcrU)J@%X9!FbV&Vsu2@IaDelF{r5}E+(4&^QY literal 0 HcmV?d00001 diff --git a/test/__image_snapshots__/image-test-tsx-test-image-test-tsx-object-fit-and-object-position-object-fit-scale-down-should-respect-object-position-with-scale-down-1-snap.png b/test/__image_snapshots__/image-test-tsx-test-image-test-tsx-object-fit-and-object-position-object-fit-scale-down-should-respect-object-position-with-scale-down-1-snap.png new file mode 100644 index 0000000000000000000000000000000000000000..749d1bbddaf9b976423210a798ff01f0b961fbea GIT binary patch literal 1099 zcmeAS@N?(olHy`uVBq!ia0vp^DImy6{UmYIJlx@MPIr(J7)M7bQ4RDalW%W5M*M zqs8d-{wodZ3N4;7J$myaD*UF(^SBSI z4xY&>uGc4vq)Oq zFR`1KRKINdl9+1N_~~8pi|Ds5+;zwKH@f*ewL7raw|XMy^NCtZChVHAN%$tuM){j_ zq9%MbRcZ3GssDSsqup(TMLk#YJ? zDmaeswrYICY8~_{Q`tkIgDE;N=hTC9tPdpL7wUu=y^!B`a^EYnf^GDf2@3MvOyK;`Fr0Vap{%gEz`_aO?4gKQ9?uNxHGd3Sin{-xc z<$7(lk8|3))~Z_Hswzk*VA>yhVo}EJZClJAe*I$Nr#E-wbH3TKW^S)ucR4bZ9bfhK z#{N=~YO6Bkx$zF0CLFEip1(NZ_Vw@HwSUtm?C<)OD00g6M!iRt$m9RTR}~IkHqZI~ ztKmWHhu`OQgYv_9m9Ecgnh+>p#O37XctV3il2viBLW)RB&oB}E!}w5ox`08X(l1~k O!QkoY=d#Wzp$Py#q3o9c literal 0 HcmV?d00001 diff --git a/test/__image_snapshots__/image-test-tsx-test-image-test-tsx-object-fit-and-object-position-object-fit-scale-down-should-scale-down-when-image-is-larger-than-container-1-snap.png b/test/__image_snapshots__/image-test-tsx-test-image-test-tsx-object-fit-and-object-position-object-fit-scale-down-should-scale-down-when-image-is-larger-than-container-1-snap.png new file mode 100644 index 0000000000000000000000000000000000000000..6b4fee1812ac3bc81de4f2af9460a8321adb5d45 GIT binary patch literal 309 zcmV-50m}Y~P)m@q68^%sUqU!WEBUOF8UIJxas8JDAv`{LB~#R(id=Wl%gO$fg(aF z2-;BEi!okLi7kav=*J!IIsbRgQIs%@Kq?wVz!IkA^D*%#U4vsg5-Rk!mb&v!l?gw$ zDaJ=6V?W$_C-}LDg1<&)#-aRFmN^+wCClVhfxYY%wMLz!al^uNjmqpBlXgHgdZ4MB zvhn|Pm|fwpYB3)yGq=9U{cD9Y_ZcHnhg1|~Is5Gmwq7!fyB>OVk=^J*l9Zlk$v3n; z&cBMdxhW3X*VJP}!mp%#VwdCm4y{;o`FLJr#>nCyRz6Y%3^3c400000NkvXX Hu0mjfd3=a= literal 0 HcmV?d00001 diff --git a/test/image.test.tsx b/test/image.test.tsx index 5cc69e47..0d8479f1 100644 --- a/test/image.test.tsx +++ b/test/image.test.tsx @@ -979,4 +979,122 @@ describe('objectFit and objectPosition', () => { ) expect(toImage(svg, 100)).toMatchImageSnapshot() }) + + describe('objectFit: fill', () => { + it('should stretch image to fill container (aspect ratio not preserved)', async () => { + const svg = await satori( +
+ +
, + { width: 100, height: 100, fonts } + ) + expect(toImage(svg, 100)).toMatchImageSnapshot() + }) + + it('should stretch with fill on non-square container', async () => { + const svg = await satori( +
+ +
, + { width: 150, height: 100, fonts } + ) + expect(toImage(svg, 150)).toMatchImageSnapshot() + }) + }) + + describe('objectFit: scale-down', () => { + it('should not scale up when image is smaller than container', async () => { + // PNG_SAMPLE is 20x15, container is 100x100 + // Should show image at 20x15, centered + const svg = await satori( +
+ +
, + { width: 100, height: 100, fonts } + ) + expect(toImage(svg, 100)).toMatchImageSnapshot() + }) + + it('should scale down when image is larger than container', async () => { + // PNG_SAMPLE is 20x15, container is 10x10 + // Should scale down like 'contain' + const svg = await satori( +
+ +
, + { width: 10, height: 10, fonts } + ) + expect(toImage(svg, 10)).toMatchImageSnapshot() + }) + + it('should respect objectPosition with scale-down', async () => { + const svg = await satori( +
+ +
, + { width: 100, height: 100, fonts } + ) + expect(toImage(svg, 100)).toMatchImageSnapshot() + }) + + it('should respect objectPosition bottom right with scale-down', async () => { + const svg = await satori( +
+ +
, + { width: 100, height: 100, fonts } + ) + expect(toImage(svg, 100)).toMatchImageSnapshot() + }) + }) })