StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POCanvas - Change colors of an image using HTML5/CSS/JS?
text
Body
copied!<p>Is there a way to change colors of an image much like in Flash/ActionScript with using only HTML5/CSS/JavaScript?</p> <p>Here's an example in Flash: <a href="http://www.kirupa.com/developer/actionscript/color.htm" rel="noreferrer">http://www.kirupa.com/developer/actionscript/color.htm</a> <strong>EDIT: This is the process I wish to duplicate.</strong></p> <p>I'm trying to accomplish something like this (color changing aspect, preserving lighting and shadows): <a href="http://www.acura.com/ExteriorColor.aspx?model=TL" rel="noreferrer">http://www.acura.com/ExteriorColor.aspx?model=TL</a> 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). <strong>EDIT: This is the result I wish to achieve, not the process.</strong></p> <p>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):</p> <pre><code><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> </code></pre> <p>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.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload