Canvas - 使用HTML5 / CSS / JS更改图像的颜色？ [英] Canvas - Change colors of an image using HTML5/CSS/JS?

问题描述

有一种方法可以使用HTML5 / CSS / JavaScript来更改图片的颜色，就像在Flash / ActionScript中一样？

Is there a way to change colors of an image much like in Flash/ActionScript with using only HTML5/CSS/JavaScript?

下面是Flash中的一个示例： a href =http://www.kirupa.com/developer/actionscript/color.htm> http://www.kirupa.com/developer/actionscript/color.htm 编辑：此

Here's an example in Flash: http://www.kirupa.com/developer/actionscript/color.htm This is the process I wish to duplicate.

我想要完成这样的操作（颜色变化，保存光照和阴影）： http://www.acura.com/ExteriorColor.aspx?model=TL 无需加载&每次替换新图像;我想要能够简单地改变色调（即做一个纯HTML5 / CSS / JS方法）。 编辑：这是我希望实现的结果，而不是过程。

I'm trying to accomplish something like this (color changing aspect, preserving lighting and shadows): http://www.acura.com/ExteriorColor.aspx?model=TL WITHOUT loading & replacing a new image each time; I want to be able to simply change the color tone (i.e. do a pure HTML5/CSS/JS method). This is the result I wish to achieve, not the process.

基本上我想更改图像的调色板/同时保留图像的其他方面（例如渐变，照明等）。我已经接近，但不够近;我已经到了一个点，我使用图像蒙版和复合材料在原始图像（类似于透明图像叠加）。下面是一些示例代码（请注意，这只是一个代码段，因此它可能会或可能不工作;我只显示示例代码，所以你想知道我想做什么）：

Basically I want to change the palette/tone of an image, while preserving the other aspects of the image (such as gradient, lighting, etc.). I have gotten close, but not close enough; I've gotten to the point where I use an image mask and composite that over the original image (sort of like a transparent image overlay). Below is some sample code (please note this is just a snippet, so it may or may not work; I am only displaying sample code so you get an idea of what I'm trying to do):

<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>

使用这种方法的主要问题是图像看起来很平。还有一些缺失，或者我使用的面具（这是一个实心白色不规则形状的图像），是错误的方法。

The major problem with using this approach is that the images look really flat. There's something else missing, or the mask I'm using (which is a solid white irregular shaped image), is the wrong approach.

推荐答案

此函数需要加载图片，并且必须来自同一个域（由于跨网域政策）

This function requires the image to be loaded and it has to be from the same domain (due to cross domain policy)

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

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

Assuming your markup looks like this:

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

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

You could use it by calling it with the following parameters:

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

工作范例： http://jsfiddle.net/pHwmL/1/

这篇关于Canvas - 使用HTML5 / CSS / JS更改图像的颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！