html5 canvas 修改像素颜色,javascript – Canvas – 使用HTML5 / CSS / JS更改图像的颜色？...

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

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

}

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

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

tintImage(

document.getElementById('myImage'),

"#550000" // for a redish tint

);