Is it possible to change the colors of an image similar to Flash/ActionScript using only HTML5, CSS, and JavaScript?
For example, in Flash: EDIT: I want to replicate this process.
I am trying to achieve something like this (changing color while keeping lighting and shadows intact): without loading a new image each time; I aim to just adjust the color tone using HTML5/CSS/JS. EDIT: This is the desired outcome, not the method.
Essentially, I want to alter the palette/tone of an image while retaining other aspects such as gradients and lighting. I have come close but not quite there; currently, I use an image mask and overlay it on the original image (similar to a transparent layer). Below is some sample code (please note that this is just a snippet for demonstration purposes):
<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 issue with this approach is that the images appear flat. It seems something is missing, or the white irregular shaped image mask I'm using may not be the best solution.