Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove white pixels to have a transparent background #4076

Open
LouisR-P opened this issue Apr 20, 2024 · 2 comments
Open

Remove white pixels to have a transparent background #4076

LouisR-P opened this issue Apr 20, 2024 · 2 comments
Labels

Comments

@LouisR-P
Copy link

LouisR-P commented Apr 20, 2024

Question about an existing feature

What are you trying to achieve?

I am trying to remove white pixels (RGB ➡️ 255 255 255, but also close values like 255 254 255 or 253 255 255 for example) from any random clothes images.

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

I found this, so I tried to use threshold and unflatten.

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

const processedPantsImage = await sharp(pantsImage)
        .threshold(0, { greyscale: false })
        .unflatten()
        .toBuffer();

With this code ⬆️, im having this result:
Before:
trouser
After:
image

This is good but not perfect, it seems to remove the whitest pixels (255 255 255) but not the darkest ones (253 255 255) for example as you can see still some white part staying around the pant.

So I tried different values/options in thresold but I never manage to found one. I tried

const processedPantsImage = await sharp(pantsImage)
        .threshold(240, { greyscale: false })
        .unflatten()
        .toBuffer();

But I gave me a strange black pants in result 😅 Im not sure to really understand how this works

Could you help me finding the correct values I need or give me a better solution? Thanks!

@LouisR-P

This comment was marked as off-topic.

@lovell
Copy link
Owner

lovell commented May 6, 2024

https://sharp.pixelplumbing.com/api-operation#unflatten

Existing alpha channel values for non-white pixels remain unchanged.

This means unflatten is probably the wrong solution to your problem as you also want non-fully-white pixels to become transparent.

I'd use threshold to create a single-channel negative mask:

await sharp(input)
  .negate()
  .threshold(5)
  .toFile("mask.png");

You can then attach this as an alpha channel:

await sharp(input)
  .joinChannel("mask.png")
  .toFile("output.png");

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants