sharp icon indicating copy to clipboard operation
sharp copied to clipboard

Overwrite opaque pixels with transparent ones when compositing

Open VendoAU opened this issue 1 year ago • 2 comments

Question about an existing feature

What are you trying to achieve?

I want to place an image with transparency on top of another, but cut through the original image so it is still fully transparent. I looked through the blend modes and I couldn't figure out how to do this without creating another image to use as a mask.

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

This was somewhat related, but I couldn't find any cutout method in the current version: https://github.com/lovell/sharp/issues/1016

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

const a = await sharp("A.png").toBuffer();
const b = await sharp("B.png").toBuffer();

const c = await sharp(b)
    .composite([{ input: a, left: 0, top: 0 }])
    .toFile("C.png");

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

A: A B: B A and B combined (I want the center to be transparent like this): C

VendoAU avatar Dec 07 '24 08:12 VendoAU

Did you see the dest-in blend? This can be used to "cut out" one image from another.

await sharp("B.png")
  .composite([{ input: "A.png", left: 0, top: 0, blend: "dest-in" }])
  .toFile("C.png");

lovell avatar Dec 07 '24 13:12 lovell

Yes, but I don't think that will help This is what the result is: C

VendoAU avatar Dec 08 '24 04:12 VendoAU