Can 'extend' be chained multiple times to add borders?

[pdaplyn]

Question about an existing feature

What are you trying to achieve?

I'm trying to add a double-border to an image by chaining extend calls with different background colours.

When I try, the second extend seems to replace the first extend rather than "chaining" them together.

The only way I've got it to work is generating a buffer & new sharp object in-between the extend calls. Is there a "correct" way to do this?

When you searched for similar issues, what did you find that might be related?

Can't find anything relevant, but the example is based on the example given on issue 2858

Please provide a minimal, standalone code sample, without other dependencies, that demonstrates this question

        // Create an 150x150 red image
        sharp({ create: { height: 150, width: 150, channels: 4, background: 'red' } })
            // Extend the image, adding a blue border
            .extend({
                background: 'blue',
                bottom: 20,
                left: 20,
                top: 20,
                right: 20,
            })
            // Further extend the image, adding a green border
            .extend({
                background: 'green',
                bottom: 10,
                left: 10,
                top: 10,
                right: 10,
            })
            .png()
            .toFile('out.png')

Please provide sample image(s) that help explain this question

With the above code I hoped it would produce an image of size 210 x 210 with colours red, blue, green emanating from the center out.

Instead it produced the following image of size 170 x 170 with just a green border around the red center:

[lovell]

Hi, to extend twice, you'll need to break this into two pipelines.

const oneBorder = await sharp({ ... }).extend({ ... }).png().toBuffer();
const twoBorder = await sharp(oneBorder).extend({ ... }).toBuffer();

Alternatively, if the aim is to "draw" shapes, then SVG is often a good solution. Here's the same thing:

<svg viewBox="0 0 210 210" xmlns="http://www.w3.org/2000/svg">
  <rect width="210" height="210" fill="green" />
  <rect width="190" height="190" x="10" y="10" fill="blue" />
  <rect width="150" height="150" x="30" y="30" fill="red" />
</svg>

A double-border could be added to an existing image by compositing an SVG over it - see https://sharp.pixelplumbing.com/api-composite

[lovell]

I hope this information helped. Please feel free to re-open with more details if further assistance is required.