图像 png 颜色 css 或 html 或 javascript

Question

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

Answer 1

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);
}

Answer 2

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 .png s, 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