Image png color css or html or javascript

I have this image in my website, is a png.I want to know if there is anyway开发者_运维知识库 with HTML5 , javascript or css to change the color of the image? At least the image change to white (invert color black to white, not the transparency).

Thanks in advance

---

You cannot do this in plain HTML or CSS. You can do this with JS/HTML Canvas, but there is probably a much easier and more compatible solution than JS/HTML Canvas for performing image manipulation.

Depending on what you are trying to do, you may just want to create a second image that you swap out with the first. There are also some decent image manipulation packages in server-side languages like PHP, if you need to do something more dynamic.

If you are set on using js, the code below is modified from your example.

Using your example:

window.onload = function(){
    var imageObj = new Image();
    imageObj.onload = function(){
        drawImage(this);
    };
    imageObj.src = "darth-vader.jpg";
};

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

    var destX = 69; //update these to set the image position
    var destY = 50;

    context.drawImage(imageObj, destX, destY);

    var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
    var data = imageData.data;

    for (var i = 0, n = data.length; i < n; i += 4) {
        if(data[i] == 0 && data[i+1] == 0 && data[i+2] ==0){ //if black, ie. red, green, and blue are all 0
            //switch to white
            data[i] = 255; //red
            data[i+1] = 255; //green
            data[i+2] = 255; //blue
        }
        // i+3 is alpha (the fourth element)
    }

    // overwrite original image
    context.putImageData(imageData, 0, 0);
}

---

You haven't explained why you aren't just using Photoshop to do it, but I assume you have your reasons.

Well wanted to support all... but for now Firefox, Chrome will be nice. Latest versions , would be nice ... I guess with canvas HTML5 is possible.

I'm not sure how well it works with transparent .pngs, but you could try Pixastic.

Here's a demo of the "Invert" effect: http://www.pixastic.com/lib/docs/actions/invert/

You've lucked out with the browser support for "Invert" - it works in even IE:

Although a few of the effects in Pixastic are simulated in IE with proprietary filters, most actions and effects will not work without a canvas enabled browser. Please consider using either Firefox, Opera or Safari