帆布 - 使用HTML5 / CSS / JS的图像改变颜色？(Canvas - Change co

有没有办法在Flash / ActionScript来改变图像的颜色很像只使用HTML5 / CSS / JavaScript的？

下面是在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数组）。

有一个很好的书面记录在这里应该让你开始它。可以在彼此，这应该有助于避免与调节基体部件（在你的车例如，轮胎，窗等）的问题的顶层透明画布元素。

Answer 3:

通常做类似的变化由像素的图像像素是东西，你会在服务器端做的，因为它是为浏览器非常沉重。在讴歌网站的情况下，没有什么棘手的事情 - 他们只是有一堆不同的JPG格式的。您也可以尝试寻找到Processing.js。

文章来源: Canvas - Change colors of an image using HTML5/CSS/JS?