HTML5 Toile: Coloriser l'image

Question

Je voudrais changer la couleur de l'image/toile. Mon code existant:

var loader = new PxLoader() 
var image = loader.addImage('images/balloon.png') 
loader.addCompletionListener(functio() { 
    var canvas = $("<canvas>").attr("width", "200").attr("height", "200"); 
    var context = canvas[0].getContext('2d'); 
    context.clearRect(0, 0, 200, 200); 
    context.drawImage(image, 0, 0); 
    // colorize?????? 
}); 

Comment puis-je coloriser - une manipulation supplémentaire du contexte (je voudrais utiliser Pixastic.process si possible)?

Answer 1

Si par coloriser vous dire changer la couleur d'arrière-plan, puis utilisez ....

context.fillColor = '#f0f'; 

context.fillRect(0, 0, canvas.attr('width'), canvas.attr('height')); 

Si vous voulez dire à teinte la couleur, essayez ...

var data = ctx.getImageData(0, 0, canvas.attr('width'), canvas.attr('height')); 

for (var i = 0, length = data.data.length; i < length; i += 4) { 
    data.data[i] = Math.max(255, data.data[i]); 
} 

context.putImageData(data, 0, 0); 

jsFiddle.

Cela va au maximum la valeur rouge pour chaque pixel. Expérimentez avec pour obtenir l'effet que vous désirez.

Answer 2

expliqué dans cette question:

How do i tint an image with HTML5 Canvas?

et ici: http://www.playmycode.com/blog/2011/06/realtime-image-tinting-on-html5-canvas/