View image by HSV Saturation

Shows a greyscale representation of the HSV saturation of an image.

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/1.2.1/chroma.min.js"></script>
<canvas id="myCanvas" width="400" height="400" />

JavaScript

var canvas, ctx;

// Warning: this whole demo is slow with large images.

// Image link must be from Dropbox or Imgur to work with javascript.

// Alternatively, encode the image with Base64 with these:
// - http://www.motobit.com/util/base64/image-to-base64/
// - http://base64.wutils.com/encoding-online/image-to-base64/
// ...and paste the base64 data after "src=" within the url quotes below.

var imageSource = "http://i.imgur.com/9Csjme2.png";

function grayScale() {
  var pixelData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  var data = pixelData.data;
  for (var i = 0; i < data.length; i += 4) {

    var red = data[i + 0],
      green = data[i + 1],
      blue = data[i + 2];

    //var c = chroma(red,green,blue).lch()[1] / 120.0 * 255.0; // LCh Chroma.
    var c = chroma(red, green, blue).hsv()[1] * 255.0; // HSV Saturation.

    data[i + 0] = c;
    data[i + 1] = c;
    data[i + 2] = c;
  }
  ctx.putImageData(pixelData, 0, 0);
}

$(document).ready(function() {
  canvas = document.getElementById("myCanvas");
  ctx = canvas.getContext("2d");

  var img = new Image();
  img.onload = function() {
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.drawImage(img, 0, 0);
    grayScale();
  };
  img.crossOrigin = "Anonymous";
  img.src = imageSource;
});