Convert an image to grayscale using canvas, takes around 25 ms for an image of 500px x 400px

convertImageToGrayscale.js

define(function () {

  'use strict';

  var canvas = document.createElement('canvas');
  var ctx = canvas.getContext('2d');

  return function ($srcImg) {
    var deferred = $.Deferred();
    var srcImg = $srcImg[0];
    var src = srcImg.src;
    var image = new Image();
    image.crossOrigin = 'Anonymous';

    image.onload = function () {
      console.time('convert');
      var srcWidth = srcImg.naturalWidth;
      var srcHeight = srcImg.naturalHeight;
      canvas.width = srcWidth;
      canvas.height = srcHeight;

      ctx.drawImage(image, 0, 0);

      var imageData = ctx.getImageData(0, 0, srcWidth, srcHeight);
      var data = imageData.data;

      for (var i = 0; i < data.length; i += 4) {
        var brightness = 0.34 * data[i] + 0.5 * data[i + 1] + 0.16 * data[i + 2];
        // red
        data[i] = brightness;
        // green
        data[i + 1] = brightness;
        // blue
        data[i + 2] = brightness;
      }

      // overwrite original image
      ctx.putImageData(imageData, 0, 0);
      var url = canvas.toDataURL('image/jpeg');
      console.timeEnd('convert');
      deferred.resolve(url);
    };

    image.src = src;
    return deferred.promise();
  };
});

Example usage:

convertImageToGrayscale($img).done(function (url) {
  $img.attr('src', url);
});