From 77bbb377b6068e81a19a9f46a9de718fa7d6a0d8 Mon Sep 17 00:00:00 2001
From: MintyStark <mintystark@gmail.com>
Date: Wed, 27 Aug 2014 22:43:54 -0700
Subject: [PATCH 1/3] Added CSS Background Image Support, Added CSS incase
 Canvas doesn't work.

Added CSS Background Image Support, Added CSS incase Canvas doesn't work.
Fixed issues with IE.  The original code was not working with IE 9 and 10.
It has been tested with IE 9,10,11  FF 31, Chrome 36, Safari 7
---
 js/grayscale.js | 88 +++++++++++++++++++++++++++++++------------------
 1 file changed, 56 insertions(+), 32 deletions(-)

diff --git a/js/grayscale.js b/js/grayscale.js
index 576ba6c..77af61d 100644
--- a/js/grayscale.js
+++ b/js/grayscale.js
@@ -4,57 +4,81 @@
    https://github.com/josefrichter/jquery-grayscale
    licensed under MIT license
    (see http://www.opensource.org/licenses/mit-license)
+   Updated by MintyStark
 */
 
 (function( $ ){
 
-$.fn.grayscale = function() {
+	$.fn.grayscale = function() {
 
-return this.each(function(){
+		return this.each(function(){
 
-	var $this = $(this);
+			var $this = $(this);
+	
+			/* Set Css incase canvas doesn't work */
+			$this.css('filter', 'grayscale(100%)');
+			$this.css('-webkit-filter', 'grayscale(100%)');
+			$this.css('-moz-filter', 'grayscale(100%)');
+			$this.css('-ms-filter', 'grayscale(100%)');
+			$this.css('-o-filter', 'grayscale(100%)');
+			$this.css('filter', 'url(resources.svg#desaturate)');
+			$this.css('filter', 'gray');
+			$this.css('-webkit-filter', 'grayscale(1)');
 
-	$this.one('load', function(){
+			var type = $this.prop("tagName").toUpperCase();
 
-	if($.browser.msie){
+			var canvas = document.createElement('canvas');
+			var ctx = canvas.getContext('2d');
 
-		$this.css({
-			filter:'progid:DXImageTransform.Microsoft.BasicImage(grayScale=1)',
-			MsFilter:'progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)'
-			});
+			var imgObj = new Image();
+			var image_src;
 
-	}
-
-	else{
+			if(type == 'IMG')
+			{
+				image_src = $this.attr('src');
+			}
+			else
+			{
+				/* This could be done cleaner works for now */
+				image_src = $this.css('background-image').split('(');
+				image_src = image_src[1];
+				image_src = image_src.replace('"', '').replace(')', '').replace('"', '').replace("'", '');
+			}
 
-		var canvas = document.createElement('canvas');
-		var ctx = canvas.getContext('2d');
+			imgObj.src = image_src;
 
-		var imgObj = new Image();
-		imgObj.src = $this.attr('src');
-		canvas.width = imgObj.width;
-		canvas.height = imgObj.height;
-		ctx.drawImage(this, 0, 0);
+			imgObj.onload = function(){
+				canvas.width = imgObj.width;
+				canvas.height = imgObj.height;
+				ctx.drawImage(imgObj, 0, 0);
 
-		var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
+				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 + 0] +  imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
+				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 + 0] +  imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
 
-					imgPixels.data[i + 0] = avg;
-					imgPixels.data[i + 1] = avg;
-					imgPixels.data[i + 2] = avg;
+						imgPixels.data[i + 0] = avg;
+						imgPixels.data[i + 1] = avg;
+						imgPixels.data[i + 2] = avg;
+					}
 				}
-			}
 
 				ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
+
+				if(type == 'IMG')
+				{
 					$this.attr('src',canvas.toDataURL());
-		}
-				});
+				}
+				else
+				{
+					$this.css('background-image','url('+canvas.toDataURL()+')');
+				}
 
+			}
 		});
-
-  };
+	};
 })( jQuery );

From 1cb09bd2e6564852eb9357061625741eabb55124 Mon Sep 17 00:00:00 2001
From: MintyStark <mintystark@gmail.com>
Date: Wed, 27 Aug 2014 22:45:43 -0700
Subject: [PATCH 2/3] Update README.txt

---
 README.txt | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/README.txt b/README.txt
index 8167efd..05d5caf 100644
--- a/README.txt
+++ b/README.txt
@@ -1,6 +1,7 @@
 jQuery grayscale
 
 converts image(s) to grayscale using html5 canvas
+Now also works with css background images
 
 requires jQuery, HTML5 canvas
 
@@ -10,4 +11,4 @@ usage:
 		
 (c) Josef Richter 2011
 licensed under MIT license
-(see http://www.opensource.org/licenses/mit-license)		
\ No newline at end of file
+(see http://www.opensource.org/licenses/mit-license)		

From d398bdcc8dc490bd93c1a14f9539e80269adf653 Mon Sep 17 00:00:00 2001
From: MintyStark <mintystark@gmail.com>
Date: Wed, 27 Aug 2014 22:59:24 -0700
Subject: [PATCH 3/3] Update README.txt

---
 README.txt | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/README.txt b/README.txt
index 05d5caf..438ddb6 100644
--- a/README.txt
+++ b/README.txt
@@ -8,6 +8,8 @@ requires jQuery, HTML5 canvas
 usage:                   
 
 		$('img').grayscale();
+		OR
+		$('div.bg-image').grayscale();
 		
 (c) Josef Richter 2011
 licensed under MIT license