Easily change the color of bootstrap icons

Using js and canvas

by vandigroup

HTML

<link rel="stylesheet" href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css">
<link rel="stylesheet" href="http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css">
<div id="wrap">
    <div class="well">
        <h4>Select RGB values</h4>
        <form class="form-inline">
          <input type="text" name="r" class="input-small" placeholder="0">
          <input type="text" name="g" class="input-small" placeholder="136">
          <input type="text" name="b" class="input-small" placeholder="204">
    
          <button type="submit" class="btn disabled">Update</button>
        </form>
    </div>
          

          <h2>Original image</h2>
	<img id="icons"...

CSS

#wrap {
    margin: 2em auto;
    width: 469px;
}
h2 {
    margin: 1.5em auto 0.5em;
    font: bold 17px/1.8 sans-serif;
}
#icons {

}
canvas {
    display: none;
}

JavaScript

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d"),
    image = document.getElementById("icons");

ctx.drawImage(image,0,0);
    
var imgd = ctx.getImageData(0, 0, 469, 159),
    pix = imgd.data,
    uniqueColor = [0,136,204]; 

// 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]; // Blue component
      pix[i+2] = uniqueColor[2]; // Green component
      //pix[i+3] is the transparency.
}

ctx.putImageData(imgd, 0, 0);


var savedImageData = document.getElementById("imageData");
savedImageData.src = canvas.toDataURL("image/png");