Live Demo
Une façon de le faire est de boucle à travers chaque pixel et changer les valeurs r/g/b à la valeur Remercions vous voulez. En ignorant la valeur alpha, les pixels opaques ne changeront que pour la couleur souhaitée.
var canvas = document.getElementById("canvas"),
ctx = canvas.getContext("2d"),
image = document.getElementById("testImage");
ctx.drawImage(image,0,0);
var imgd = ctx.getImageData(0, 0, 128, 128),
pix = imgd.data,
uniqueColor = [0,0,255]; // Blue for an example, can change this value to be anything.
// Loops through all of the pixels and modifies the components.
for (var i = 0, n = pix.length; i <n; i += 4) {
pix[i] = uniqueColor[0]; // Red component
pix[i+1] = uniqueColor[1]; // Green component
pix[i+2] = uniqueColor[2]; // Blue component
//pix[i+3] is the transparency.
}
ctx.putImageData(imgd, 0, 0);
// Just extra if you wanted to display within an img tag.
var savedImageData = document.getElementById("imageData");
savedImageData.src = canvas.toDataURL("image/png");
Je ne l'ai pas fait avant, mais je pense que l'opération XOR fera (fait avec XOR et applets Java il y a 10 ans) .. http://www.whatwg.org/specs/web-apps /current-work/multipage/the-canvas-element.html Recherche de XOR –