title: Color Image to black and white conversion using javascript
body: <p>This is the code I am using for color to grey scale image conversion.</p>
  
  <pre><code>        function grayScaleEffect() {
              var imageData = contextSrc.getImageData(0, 0, width, height);
              var data = imageData.data;
  
              var p1 = 0.99;
              var p2 = 0.99;
              var p3 = 0.99;
              var er = 0; // extra red
              var eg = 0; // extra green
              var eb = 0; // extra blue
              for (var i = 0, n = data.length; i &lt; n; i += 4) {
                  var grayscale = data[i] * p1 + data[i + 1] * p2 + data[i + 2] * p3;
                  data[i] = grayscale + er; // red
                  data[i + 1] = grayscale + eg; // green
                  data[i + 2] = grayscale + eb; // blue
              }
              context.putImageData(imageData, 0, 0);
              base64 = canvas.toDataURL("image/png");
          }
  </code></pre>
  
  <p>On changing the slider value, image must change from color to black and white and vice versa.</p>
  
  <p>It must be compatible for all browsers.</p>
  
  <p>Is there some other way I could achieve this?</p>
  
  <p>Thanks in advance.</p>