Change the color of an image in a website
I have this image in my website, is a png:
I'm not sure this belongs on GD, but...
It can be done using HTML5's
CANVAS element, here's a super quick & dirty:
BUT YOU DON'T WANT TO DO THIS!
getImageDatarequires privilege elevation unless the source images are hosted on the same domain as the script. You can't use any hosting services unless you want to bother users with priv-escalation prompts.
- HTML5 is still in draft so the
canvasimplementation could change.
- You're asking your browsers to do image processing for you every time the image is loaded. If you're only using a few basic colors, you're better off doing your own processing and determining which image to serve at response time instead of expecting them to process. (And, if you care, from a "green" standpoint, you end up asking users to reproduce the exact same "Color X" version countless times using countless CPU cycles which uses more power and yada yada yada.)
You can save CPU cycles for you and your users by just creating the colors you need server-side (there are scripts that can do this for you) and serving them the colors they need. You only want to use
canvas for this if you have no other choice (e.g. the user is determining the color on the fly).
Similar questions have also been asked on SO a few times: