Tell me more ×
Graphic Design Stack Exchange is a question and answer site for professional graphic designers and non-designers trying to do their own graphic design. It's 100% free, no registration required.
up vote 2 down vote favorite
1

I have this image in my website, is a png:

enter image description here

I want to know if there is any way with HTML5, javascript or css to change the color of the image. Or at least make the image change to white (invert color black to white, not the transparency).

share|improve this question

4 Answers

up vote 1 down vote accepted

I'm not sure this belongs on GD, but...

It can be done using HTML5's CANVAS element, here's a super quick & dirty:

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript">
    window.onload = function(){
        var imageObj = new Image();
        imageObj.onload = function(){ alterImage(this); }
        imageObj.src = document.getElementById( "origImg" ).src;
    }

    function alterImage(imageObj){
        var canvas = document.getElementById("myCanvas");
        var ctx= canvas.getContext("2d");

        ctx.drawImage(imageObj, 0, 0);
        var id= ctx.getImageData(0, 0, canvas.width, canvas.height);

        // Iterate over data.  Data is RGBA matrix so go by +=4 to get to next pixel data.
        for (var i = 0; i < id.data.length; i += 4) {
            // Check if RGB == 0 (black)
            if ( id.data[i] + id.data[i+1] + id.data[i+2] == 0 )
                id.data[i] = 255; //change R bit to 255.
                // change G & B bits to 255 also if you want white.
        }

        // redraw your altered data on the canvas.
        ctx.putImageData(id, 0, 0);
    }
    </script>
  </head>
  <body>
    <img id="origImg" src="test.png" alt="Original image">
    <canvas id="myCanvas" width="250" height="100"></canvas>
  </body>
</html>

BUT YOU DON'T WANT TO DO THIS!

Problems:

  1. getImageData requires 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.
  2. If your user has Javascript disabled, or an older browser that doesn't support HTML5, it won't work.
  3. HTML5 is still in draft so the canvas implementation could change.
  4. 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:

share|improve this answer
Thanks a lot for the answer, was something like that i was looking just implemented with some diferences – Ricardo Rodrigues Jun 8 '11 at 10:24
up vote 1 down vote

I've done this kind of thing in the past by placing the "after" image behind the "before" in z-order and just changing the alpha on the front image.

share|improve this answer
1  
Can actually make that one step simpler nowadays: Just add a CSS background style to the "before" IMG tag and no "after" IMG tag is required. Works on recent versions of all major browsers. – Farray Jun 7 '11 at 19:42
1  
Sure enough. Lots of ways to skin cats, these days! – Alan Gilbertson♦ Jun 7 '11 at 19:57
1  
Improved cross-cat compliance has really made the skinning easier! ;-) – Farray Jun 7 '11 at 19:59
LOL! Ain't dat da trufe! – Alan Gilbertson♦ Jun 7 '11 at 20:14
Guess could found some good answers HERE – Ricardo Rodrigues Jun 8 '11 at 9:31
up vote 0 down vote

This works very good on almost any browser.

<img alt="" src="images/bd7VJ.png" style="filter:invert;" onmouseover="this.style.filter='none'" onmouseout="this.style.filter='invert'">

I hope it works for yuor project.

share|improve this answer
1  
I believe that would be primarily just for IE – DA01 Jun 13 '12 at 1:23
up vote -1 down vote

There doesn't seem to be any easy way to do it. If you need 2 pngs you could use css sprites.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.