画布 - 使用HTML5/CSS/JS更改图像的颜色？

Question

有没有办法像使用HTML5/CSS/JavaScript一样更改Flash/ActionScript中的图像颜色？

以下是Flash中的一个示例:http ://www.kirupa.com/developer/actionscript/color.htm 编辑:这是我希望复制的过程.

我正在尝试完成这样的事情(颜色变化方面,保留光照和阴影):http: //www.acura.com/ExteriorColor.aspx ？ model = TL无需每次加载和替换新图像; 我希望能够简单地改变色调(即做一个纯HTML5/CSS/JS方法).编辑:这是我希望实现的结果,而不是过程.

基本上我想改变图像的调色板/色调,同时保留图像的其他方面(例如渐变,光照等).我已经接近了,但还不够近; 我已经达到了在原始图像上使用图像蒙版和复合的程度(有点像透明图像叠加).下面是一些示例代码(请注意这只是一个片段,所以它可能会或可能不会工作;我只显示示例代码,以便您了解我正在尝试做什么):

<div id='mask'>
    <canvas id='canvas' width='100' height='100'></canvas>
</div>
<button data-rgba='255,0,0,0.5'>red</button>
<button data-rgba='0,255,0,0.5'>green</button>

<script>
foo = {};
foo.ctx = jQuery('#canvas')[0];
foo.ctx_context = foo.ctx.getContext('2d');
foo.mask = jQuery('#mask')[0];
foo.img = new Image();
foo.img_path = '/path/to/image_mask.png'; // 100px x 100px image

foo.changeColor = function(rgba){
    foo.ctx_context.clearRect(0, 0, 100, 100);
    foo.ctx_context.fillStyle = 'rgba(' + rgba + ')';
    foo.ctx_context.fillRect(0, 0, 100, 100);
    foo.ctx_context.globalCompositeOperation = 'destination-atop';
    foo.ctx_context.drawImage(foo.img, 0, 0);
    foo.ctx_context.css({'background-image': "url(" + foo.ctx.toDataURL("image/png") + ")"});
};

jQuery("button").click(function(){
    foo.changeColor(jQuery(this).attr('data-rgba'));
});
</script>

使用这种方法的主要问题是图像看起来非常平坦.还有其他的东西缺失,或者我正在使用的面具(这是一个纯白色的不规则形状的图像),是错误的方法.

Answer 1

此功能需要加载图像,并且必须来自同一域(由于跨域策略)

function tintImage(imgElement,tintColor) {
    // create hidden canvas (using image dimensions)
    var canvas = document.createElement("canvas");
    canvas.width = imgElement.offsetWidth;
    canvas.height = imgElement.offsetHeight;

    var ctx = canvas.getContext("2d");
    ctx.drawImage(imgElement,0,0);

    var map = ctx.getImageData(0,0,320,240);
    var imdata = map.data;

    // convert image to grayscale
    var r,g,b,avg;
    for(var p = 0, len = imdata.length; p < len; p+=4) {
        r = imdata[p]
        g = imdata[p+1];
        b = imdata[p+2];
        // alpha channel (p+3) is ignored           

        avg = Math.floor((r+g+b)/3);

        imdata[p] = imdata[p+1] = imdata[p+2] = avg;
    }

    ctx.putImageData(map,0,0);

    // overlay filled rectangle using lighter composition
    ctx.globalCompositeOperation = "lighter";
    ctx.globalAlpha = 0.5;
    ctx.fillStyle=tintColor;
    ctx.fillRect(0,0,canvas.width,canvas.height);

    // replace image source with canvas data
    imgElement.src = canvas.toDataURL();
}

假设您的标记看起来像这样:

<img id='myimage' src='image.jpg'/>

您可以通过使用以下参数调用它来使用它:

tintImage(
    document.getElementById('myImage'),
    "#550000" // for a redish tint
);

这里的工作示例:http://jsfiddle.net/pHwmL/1/

Answer 2

当然，您可以获取像素数据，并对其进行 HSV 调整。你想要的方法是 getImageData （它返回一个 UInt8Array，而不是普通的 js 数组）。

这里有一篇很好的文章，应该可以帮助您入门。您可以将透明画布元素叠加在一起，这应该有助于避免调整基础组件（在您的汽车示例中，轮胎、窗户等）出现问题。