5
way to change a color to transparency on a png (feddit.fr)
submitted 2 days ago by Salcie@feddit.fr to c/javascript@programming.dev
2 comments fedilink hide all child comments

hello

I need to create in javascript something to change a color to transparent, on PNG
I'd like to create a form that, when I post a picture, everything white should be transformed to transparent and generated as a new PNG, however this white is coming from a picture so it won't be exactly white
but contrast are good since this will pictures of text written on a white page
maybe some king of green screen algo

any ideas on how to do that ?

top 2 comments
sorted by: hot top new old
[-] SnoopSqueak@lemmy.today 2 points 2 days ago

You can probably use getImageData, iterate over the data property, and check each pixel to see if it is close enough to white.

Pixel data is stored in groups of four: RGBA. So your loop will probably increment i += 4 to check each value of each pixel. You can adjust how much tolerance you want; 255 in RGB is white, so maybe you can check to see that data[i] >= 255 - tolerance where tolerance is some fairly small number, maybe 5. If data[i], data[i+1], and data[i+2] are all acceptably high, set the pixel in the new image to transparent. Otherwise, set it equal to the value of the original image.

This page has some examples of similar operations: https://pictureelement.github.io/html5tech/canvas-pixel-manipulation-and-animations.html

[-] OwOarchist@pawb.social 3 points 2 days ago* (last edited 2 days ago)

where tolerance is some fairly small number, maybe 5

If this is to be part of a user-submitted form, maybe set a sane default, but let the user decide exactly where to set the limit -- because it will change depending on the particular image being worked on. Some need a high tolerance because the white background isn't very close to true white, others need a low tolerance because the foreground you want to keep has highlights that are too close to white. So you give the form an extra control slider to change the tolerance between, say, 1 and 30, with it defaulting to, say, 5.

this post was submitted on 27 Aug 2026
5 points (100.0% liked)

JavaScript

2785 readers
6 users here now

founded 3 years ago
MODERATORS
erlingur@programming.dev
Ategon@programming.dev
nick@programming.dev