How to re-tint a grayscale image on canvas

Is there any quick way to colorize greyscale icon (png image with transparent background) when drawing it on canvas? By colorize I mean turning greyscale icon into lets say greenscale (shades of given color instead of grey to match given color theme)

I know I could manipulate each pixel manually but maybe there's some more automated way?

Asked By: Lapsio
||

Answer #1:

Use compositing to re-tint a grayscale image into "greenscale".

Using compositing is faster than pixel manipulation and as a bonus you won't run afoul of cross-domain security restrictions (which you do if you instead used getImageData).

  1. Create a fully green version of your image.
  2. Draw your grayscale image on the canvas.
  3. Set globalCompositeOperation='color' which causes existing grayscale pixels to be re-tinted ("re-hued") with pixels drawn on top.
  4. Draw your fully green image on the canvas.

"Color" Compositing will turn the grayscale into greenscale.

+ =

Note: requires a modern browser with blending capabilities (Edge not IE)

Example code and a Demo:

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

var img=new Image();
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/multple/koolBW.png";
function start(){

    // create a fully green version of img
    var c=document.createElement('canvas');
    var cctx=c.getContext('2d');
    c.width=img.width;
    c.height=img.height;
    cctx.drawImage(img,0,0);
    cctx.globalCompositeOperation='source-atop';
    cctx.fillStyle='green';
    cctx.fillRect(0,0,img.width,img.height);  
    cctx.globalCompositeOperation='source-over';

    // draw the grayscale image onto the canvas
    ctx.drawImage(img,0,0);

    // set compositing to color (changes hue with new overwriting colors) 
    ctx.globalCompositeOperation='color';

    // draw the fully green img on top of the grayscale image
    // ---- the img is now greenscale ----
    ctx.drawImage(c,0,0);
    
    // Always clean up -- change compositing back to default
    ctx.globalCompositeOperation='source-over';
}
body{ background-color:white; }
#canvas{border:1px solid red; }
<canvas id="canvas" width=256 height=256></canvas>

Answered By: markE

Answer #2:

You can achieve it using css classes. Check the below example P.S: Source: w3Schools

img {
  width: 33%;
  height: auto;
  float: left;
  max-width: 235px;
}
.blur {
  -webkit-filter: blur(4px);
  filter: blur(4px);
}
.brightness {
  -webkit-filter: brightness(250%);
  filter: brightness(250%);
}
.contrast {
  -webkit-filter: contrast(180%);
  filter: contrast(180%);
}
.grayscale {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}
.huerotate {
  -webkit-filter: hue-rotate(180deg);
  filter: hue-rotate(180deg);
}
.invert {
  -webkit-filter: invert(100%);
  filter: invert(100%);
}
.opacity {
  -webkit-filter: opacity(50%);
  filter: opacity(50%);
}
.saturate {
  -webkit-filter: saturate(7);
  filter: saturate(7);
}
.sepia {
  -webkit-filter: sepia(100%);
  filter: sepia(100%);
}
.shadow {
  -webkit-filter: drop-shadow(8px 8px 10px green);
  filter: drop-shadow(8px 8px 10px green);
}
<body>

  <p><strong>Note:</strong> The filter property is not supported in Internet Explorer, Edge 12, or Safari 5.1 and earlier.</p>

  <img src="http://www.supercoloring.com/sites/default/files/styles/how_to_draw_medium/public/htd/2015/07/pineapple-0-how-to-draw.png" alt="Pineapple" width="300" height="300">
  <img class="blur" src="http://www.supercoloring.com/sites/default/files/styles/how_to_draw_medium/public/htd/2015/07/pineapple-0-how-to-draw.png" alt="Pineapple" width="300" height="300">
  <img class="brightness" src="http://www.supercoloring.com/sites/default/files/styles/how_to_draw_medium/public/htd/2015/07/pineapple-0-how-to-draw.png" alt="Pineapple" width="300" height="300">
  <img class="contrast" src="http://www.supercoloring.com/sites/default/files/styles/how_to_draw_medium/public/htd/2015/07/pineapple-0-how-to-draw.png" alt="Pineapple" width="300" height="300">
  <img class="grayscale" src="http://www.supercoloring.com/sites/default/files/styles/how_to_draw_medium/public/htd/2015/07/pineapple-0-how-to-draw.png" alt="Pineapple" width="300" height="300">
  <img class="huerotate" src="http://www.supercoloring.com/sites/default/files/styles/how_to_draw_medium/public/htd/2015/07/pineapple-0-how-to-draw.png" alt="Pineapple" width="300" height="300">
  <img class="invert" src="http://www.supercoloring.com/sites/default/files/styles/how_to_draw_medium/public/htd/2015/07/pineapple-0-how-to-draw.png" alt="Pineapple" width="300" height="300">
  <img class="opacity" src="http://www.supercoloring.com/sites/default/files/styles/how_to_draw_medium/public/htd/2015/07/pineapple-0-how-to-draw.png" alt="Pineapple" width="300" height="300">
  <img class="saturate" src="http://www.supercoloring.com/sites/default/files/styles/how_to_draw_medium/public/htd/2015/07/pineapple-0-how-to-draw.png" alt="Pineapple" width="300" height="300">
  <img class="sepia" src="http://www.supercoloring.com/sites/default/files/styles/how_to_draw_medium/public/htd/2015/07/pineapple-0-how-to-draw.png" alt="Pineapple" width="300" height="300">
  <img class="shadow" src="http://www.supercoloring.com/sites/default/files/styles/how_to_draw_medium/public/htd/2015/07/pineapple-0-how-to-draw.png" alt="Pineapple" width="300" height="300">

</body>

Refer this link for learning what filter style can do.

ClickMe

Answered By: Nikhilesh Shivarathri

Answer #3:

Hey try this alternative!

First create a canvas element and use canvas context to draw image. You can use the canvas filters to apply effects. then use toDataURL method to get the png of the image. All the detailed procedure is explained in the below websites.

http://www.html5canvastutorials.com/advanced/html5-canvas-grayscale-image-colors-tutorial/

Finally use .toDataURL() method to export/save it.

Hope it works for you!

Answered By: Nikhilesh Shivarathri
The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .



# More Articles