Last active
October 5, 2015 00:28
-
-
Save victorjonsson/2723583 to your computer and use it in GitHub Desktop.
jQuery plugin for turning image into grayscale
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(function($){ | |
/** | |
* Renders an image in gray scale using canvas | |
* @param {Boolean} toggle - Optional, whether or not to add or remove the grayscale effect | |
* @return {jQuery} | |
*/ | |
$.fn.grayScale = function(toggle) { | |
function _grayscale(src){ | |
var canvas = document.createElement('canvas'); | |
var ctx = canvas.getContext('2d'); | |
var imgObj = new Image(); | |
imgObj.src = src; | |
canvas.width = imgObj.width; | |
canvas.height = imgObj.height; | |
ctx.drawImage(imgObj, 0, 0); | |
var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height); | |
for(var y = 0; y < imgPixels.height; y++){ | |
for(var x = 0; x < imgPixels.width; x++){ | |
var i = (y * 4) * imgPixels.width + x * 4; | |
var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3; | |
imgPixels.data[i] = avg; | |
imgPixels.data[i + 1] = avg; | |
imgPixels.data[i + 2] = avg; | |
} | |
} | |
ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height); | |
return canvas.toDataURL(); | |
} | |
return this.each(function() { | |
var $img = $(this); | |
if(this.nodeName == 'IMG') { | |
if(toggle === false) { | |
var origSrc = $img.attr('data-src'); | |
if(origSrc) { | |
this.src = $img.attr('data-src'); | |
$img.removeAttr('data-src'); | |
} | |
} | |
else if( !$img.attr('data-src') ) { | |
$img.attr('data-src', this.src); | |
this.src = _grayscale(this.src); | |
} | |
} | |
}); | |
}; | |
})(jQuery); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment