Question

我的网站上有image，是png。我想知道是否还有HTML5，javascript或css来改变图像的颜色？至少图像变为白色（将颜色变为黑色至白色，而不是透明度）。

提前致谢

Answer 1

你无法在纯HTML或CSS中执行此操作。您可以使用JS / HTML Canvas执行此操作，但是可能有比JS / HTML Canvas更容易和更兼容的解决方案来执行图像处理。

根据您要执行的操作，您可能只想创建第二个与第一个图像交换的图像。如果你需要做一些更动态的事情，那么在PHP等服务器端语言中也有一些不错的图像处理包。

如果您开始使用js，则会从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

你没有解释为什么你不只是使用Photoshop来做这件事，但我认为你有理由。

很想支持所有......但是现在Firefox，Chrome会很不错。最新版本，会很好......我猜测画布HTML5是可能的。

我不确定透明.png的效果如何，但你可以试试Pixastic。

以下是“反转”效果的演示：http://www.pixastic.com/lib/docs/actions/invert/

你对浏览器支持“Invert”感到非常幸运 - 它甚至适用于IE：

虽然有一些影响 Pixastic是在IE中模拟的专有过滤器，大多数动作和没有画布，效果将无法奏效启用浏览器。请考虑使用 Firefox，Opera或Safari

图像png颜色css或html或javascript

2 个答案: