Skip to content

Commit 7a78ce6

Browse files
beebbeeb
committed
fix(image): allow replacing alpha with color for all formats
1 parent 98a4a91 commit 7a78ce6

4 files changed

Lines changed: 23 additions & 14 deletions

File tree

‎packages/integrations/image/src/loaders/sharp.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,12 +23,12 @@ class SharpService extends BaseSSRService {
2323
});
2424
}
2525

26+
if (transform.background) {
27+
sharpImage.flatten({ background: transform.background });
28+
}
29+
2630
if (transform.format) {
2731
sharpImage.toFormat(transform.format, { quality: transform.quality });
28-
29-
if (transform.background && !isOutputFormatSupportsAlpha(transform.format)) {
30-
sharpImage.flatten({ background: transform.background });
31-
}
3232
}
3333

3434
const { data, info } = await sharpImage.toBuffer({ resolveWithObject: true });

‎packages/integrations/image/test/background-color-image-ssg.test.js‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,16 @@ describe('SSG image with background - dev', function () {
4646
id: '#rgb-spaced',
4747
bg: 'rgb(105, 105, 105)',
4848
},
49+
{
50+
title: 'RGBA',
51+
id: '#rgba',
52+
bg: 'rgba(105,105,105,0.5)',
53+
},
54+
{
55+
title: 'RGBA color with spaces',
56+
id: '#rgba-spaced',
57+
bg: 'rgba(105, 105, 105, 0.5)',
58+
},
4959
].forEach(({ title, id, bg }) => {
5060
it(title, async () => {
5161
const image = $(id);
@@ -71,7 +81,7 @@ describe('SSG image with background - build', function () {
7181
});
7282

7383
async function verifyImage(pathname, expectedBg) {
74-
const url = new URL('./fixtures/background-color-image/dist/' + pathname, import.meta.url);
84+
const url = new URL('./fixtures/background-color-image/dist' + pathname, import.meta.url);
7585
const dist = fileURLToPath(url);
7686
const data = await sharp(dist).raw().toBuffer();
7787
// check that the first RGB pixel indeed has the requested background color
@@ -106,7 +116,6 @@ describe('SSG image with background - build', function () {
106116
id: '#rgb-spaced',
107117
bg: [105, 105, 105],
108118
},
109-
110119
{
111120
title: 'RGBA color',
112121
id: '#rgba',

‎packages/integrations/image/test/background-color-image-ssr.test.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ describe('SSR image with background', function () {
2020
title: 'Named color',
2121
id: '#named',
2222
query: {
23-
f: 'jpeg',
23+
f: 'png',
2424
w: '256',
2525
h: '256',
2626
href: /^\/_astro\/file-icon.\w{8}.png/,
@@ -42,7 +42,7 @@ describe('SSR image with background', function () {
4242
title: 'Hex color short',
4343
id: '#hex-short',
4444
query: {
45-
f: 'jpeg',
45+
f: 'webp',
4646
w: '256',
4747
h: '256',
4848
href: /^\/_astro\/file-icon.\w{8}.png/,
@@ -79,7 +79,7 @@ describe('SSR image with background', function () {
7979
w: '256',
8080
h: '256',
8181
href: /^\/_astro\/file-icon.\w{8}.png/,
82-
bg: 'rgb(105,105,105,0.5)',
82+
bg: 'rgba(105,105,105,0.5)',
8383
},
8484
},
8585
{
@@ -90,7 +90,7 @@ describe('SSR image with background', function () {
9090
w: '256',
9191
h: '256',
9292
href: /^\/_astro\/file-icon.\w{8}.png/,
93-
bg: 'rgb(105, 105, 105, 0.5)',
93+
bg: 'rgba(105, 105, 105, 0.5)',
9494
},
9595
},
9696
].forEach(({ title, id, query }) => {

‎packages/integrations/image/test/fixtures/background-color-image/src/pages/index.astro‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,19 +7,19 @@ import { Image } from '@astrojs/image/components';
77
<!-- Head Stuff -->
88
</head>
99
<body>
10-
<Image id="named" src={import('../assets/file-icon.png')} width={256} format="jpeg" background="dimgray" alt="named" />
10+
<Image id="named" src={import('../assets/file-icon.png')} width={256} format="png" background="dimgray" alt="named" />
1111
<br />
1212
<Image id="hex" src={import('../assets/file-icon.png')} width={256} format="jpeg" background="#696969" alt="hex" />
1313
<br />
14-
<Image id="hex-short" src={import('../assets/file-icon.png')} width={256} format="jpeg" background="#666" alt="hex-short" />
14+
<Image id="hex-short" src={import('../assets/file-icon.png')} width={256} format="webp" background="#666" alt="hex-short" />
1515
<br />
1616
<Image id="rgb" src={import('../assets/file-icon.png')} width={256} format="jpeg" background="rgb(105,105,105)" alt="rgb" />
1717
<br />
1818
<Image id="rgb-spaced" src={import('../assets/file-icon.png')} width={256} format="jpeg" background="rgb(105, 105, 105)" alt="rgb-spaced" />
1919
<br />
20-
<Image id="rgba" src={import('../assets/file-icon.png')} width={256} format="jpeg" background="rgb(105,105,105,0.5)" alt="rgba" />
20+
<Image id="rgba" src={import('../assets/file-icon.png')} width={256} format="jpeg" background="rgba(105,105,105,0.5)" alt="rgba" />
2121
<br />
22-
<Image id="rgba-spaced" src={import('../assets/file-icon.png')} width={256} format="jpeg" background="rgb(105, 105, 105, 0.5)" alt="rgba-spaced" />
22+
<Image id="rgba-spaced" src={import('../assets/file-icon.png')} width={256} format="jpeg" background="rgba(105, 105, 105, 0.5)" alt="rgba-spaced" />
2323
<br />
2424
</body>
2525
</html>

0 commit comments

Comments
 (0)