Image processing JS boilerplate for Xavier

imageprocessing-boilerplate.html

<p>Code to help you with <a href="http://www.html5rocks.com/en/tutorials/canvas/imagefilters/">this tutorial</a>.</p>

<p>To manipulate image pixels, run Chrome with "web security" disabled. On a mac, terminate your existing Chrome, then type in a terminal: <code>$ open -a Google\ Chrome --args --disable-web-security</code></p>

    <figure>
      <img id="orig" src="http://www.html5rocks.com/en/tutorials/canvas/imagefilters/demo_small.png" width="600" height="337">
      <figcaption>The original test image</figcaption>
    </figure>

    <h2>Processing pixels</h2>

    <figure>
      <canvas id="grayscale" width="600" height="337" style="display: none; "></canvas>
      <button onclick="grayscale()">Grayscale the image</button>
    </figure>
      
<script>
// Not so important:
Filters = {};
Filters.getPixels = function(img) {
  var c,ctx;
  if (img.getContext) {
    c = img;
    try { ctx = c.getContext('2d'); } catch(e) {}
  }
  if (!ctx) {
    c = this.getCanvas(img.width, img.height);
    ctx = c.getContext('2d');
    ctx.drawImage(img, 0, 0);
  }
  return ctx.getImageData(0,0,c.width,c.height);
};
Filters.getCanvas = function(w,h) {
  var c = document.createElement('canvas');
  c.width = w;
  c.height = h;
  return c;
};
Filters.filterImage = function(filter, image, var_args) {
  var args = [this.getPixels(image)];
  for (var i=2; i<arguments.length; i++) {
    args.push(arguments[i]);
  }
  return filter.apply(null, args);
}; 

// Important:
Filters.grayscale = function(pixels, args) {
  var d = pixels.data;
  for (var i=0; i<d.length; i+=4) {
    var r = d[i];
    var g = d[i+1];
    var b = d[i+2];
    // CIE luminance for the RGB
    var v = 0.2126*r + 0.7152*g + 0.0722*b;
    d[i] = d[i+1] = d[i+2] = v
  }
  return pixels;
};

// Not important:
// These lines are here to get the HTML elements and transform them.
var img = document.getElementById('orig');
    img.addEventListener('load', function() {

      var canvases = document.getElementsByTagName('canvas');
      for (var i=0; i<canvases.length; i++) {
        var c = canvases[i];
        c.parentNode.insertBefore(img.cloneNode(true), c);
        c.style.display = 'none';
      }

      function runFilter(id, filter, arg1, arg2, arg3) {
        var c = document.getElementById(id);
        var s = c.previousSibling.style;
        var b = c.parentNode.getElementsByTagName('button')[0];
        if (b.originalText == null) {
          b.originalText = b.textContent;
        }
        if (s.display == 'none') {
          s.display = 'inline';
          c.style.display = 'none';
          b.textContent = b.originalText;
        } else {
          var idata = Filters.filterImage(filter, img, arg1, arg2, arg3);
          c.width = idata.width;
          c.height = idata.height;
          var ctx = c.getContext('2d');
          ctx.putImageData(idata, 0, 0);
          s.display = 'none';
          c.style.display = 'inline';
          b.textContent = 'Restore original image';
        }
      }

  // define a global grayscale() function that is called by the "onclick" of the <button> HTML  
      grayscale = function() {
        runFilter('grayscale', Filters.grayscale);
      }

    }, false);
</script>