Menu

Why getImageData returns different colors than putImageData wrote, at low alpha
📰

Why getImageData returns different colors than putImageData wrote, at low alpha

DEV Community: javascript·hao jia·about 8 hours ago
#OneEwAJ6
#devtojavascript#devto#dev#alpha#pixel
Reading 0:00
15s threshold

If you write a pixel with a low alpha into a canvas and read it back, the color is not the one you wrote. In Chromium 149, putImageData with (200, 100, 50) at alpha 2 came back from getImageData as (255, 128, 0). Alpha stays 2, the RGB is simply different. At alpha 0 the color is gone entirely.

I hit this while checking why cutout PNGs go grey or bright at the edge after a resize. The samples were three Wikimedia Commons CC photos (a portrait, a product, a hair close-up) that I cut out with ImgIng, a browser tool at https://imging.ai/ , on a desktop. The readback test below is only a pixel I made up and one browser version, a single run.

The readback test is twelve lines

The loop writes one pixel with RGB fixed at (200, 100, 50) for each alpha from 0 to 22 in steps of 2, then reads it back with getImageData .…

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.