Search code examples
javascripttransparencypixel

Read transparent pixels from image


Is there a way to read transparent pixels from a picture using javascript?

I think, that it could be something similar to what PNG fixes does for IE (reading transparent pixels and applying some stuff, lol). But yes, for every browser..

Ah, would be awesome if it could be achieved without HTML5.


Solution

  • This is a bit tricky problem, since the only way to access files directly from Javascript is by using FileReader, which is a relatively new feature and not yet supported in most browsers.

    However, you could get the desired result by using a canvas. If you have a canvas, you could assign it some distinctive color (such as neon green used in green screens). Then you could insert the image onto canvas and use the method mentioned here to get each individual pixel. Then you could check each pixel's color and see whether that point corresponds to your background color (ergo it's transparent) or does it have some other color (not transparent).

    Kind of hackish, but don't think there's anything else you can do with pure JS.