lovell / lovell/sharp

Overwrite opaque pixels with transparent ones when compositing

Open
#4,290 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

question
Dominant language
JavaScript
Stars
32.7k
Forks
1.4k
Avg merge
1d 14h
Merged PRs (30d)
5

Description

## 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

```js
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](https://github.com/user-attachments/assets/a7516e34-4883-467e-a6b7-b3753e1e5e7a)
B:
![B](https://github.com/user-attachments/assets/9634a53f-0ac2-42b1-ad8c-95d4e458e03f)
A and B combined (I want the center to be transparent like this):
![C](https://github.com/user-attachments/assets/09b287b1-2dfe-4dd6-b158-7ac81962e0b7)

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the standalone JavaScript example using composite and review the related discussion in issue #1016. Determine whether the existing compositing behavior can meet the requested cutout result or whether a new capability is needed; done means the center becomes transparent without requiring a separate mask image.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, nodejs
Domain
computer-graphics
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.