Merge branch 'master' into gh-pages

README.md

@@ -63,11 +63,16 @@ resemble.outputSettings({
     blue: 255
   },
   errorType: 'movement',
-  transparency: 0.3
+  transparency: 0.3,
+  largeImageThreshold: 1200
 });
 // resembleControl.repaint();
 ```
 
+By default, the comparison algorithm skips pixels when the image width or height is larger than 1200 pixels. This is there to mitigate performance issues.
+
+You can switch this modify this behaviour by setting the `largeImageThreshold` option to a different value. Set it to **0** to switch it off completely.
+
 --------------------------------------
 
 Created by [James Cryer](http://github.com/jamescryer) and the Huddle development team.

bower.json

@@ -1,7 +1,7 @@
 {
   "name": "resemblejs",
-  "main": "Resemble.js",
+  "main": "resemble.js",
-  "version": "1.0.1",
+  "version": "1.2.1",
   "homepage": "https://github.com/Huddle/Resemble.js",
   "authors": [
     "James Cryer <james.cryer@huddle.com>"

demoassets/main.js

@@ -151,6 +151,20 @@ $(function(){
 			resembleControl.repaint();
 		}
 		else
+		if($this.is('#flatDifferenceIntensity')){
+			resemble.outputSettings({
+				errorType: 'flatDifferenceIntensity'
+			});
+			resembleControl.repaint();
+		}
+		else
+		if($this.is('#movementDifferenceIntensity')){
+			resemble.outputSettings({
+				errorType: 'movementDifferenceIntensity'
+			});
+			resembleControl.repaint();
+		}
+		else
 		if($this.is('#opaque')){
 			resemble.outputSettings({
 				transparency: 1

demoassets/resemble.css

@@ -58,7 +58,7 @@ footer {
         left: 0;
     }
     #image-diff {
-        margin-left: 0px;
+        margin-left: 0;
         margin-top: 50px;
         border-style: solid;
     }

index.html

@@ -98,11 +98,17 @@
 									<button class="btn active" id="pink">Pink</button>
 									<button class="btn" id="yellow">Yellow</button>
 								</div>
+								<br/>
+								<br/>
 
 								<div class="btn-group buttons" style="display:none">
 									<button class="btn active" id="flat">Flat</button>
 									<button class="btn" id="movement">Movement</button>
+									<button class="btn" id="flatDifferenceIntensity">Flat with diff intensity</button>
+									<button class="btn" id="movementDifferenceIntensity">Movement with diff intensity</button>
 								</div>
+								<br/>
+								<br/>
 
 								<div class="btn-group buttons" style="display:none">
 									<button class="btn active" id="opaque">Opaque</button>
@@ -140,7 +146,7 @@
 						</p>
 						<p>
 							<br/>
-							<a class="btn btn-large btn-primary" href="https://github.com/Huddle/Resemble.js"><strong>View project on Github</strong></a>
+							<a class="btn btn-large btn-primary" href="https://github.com/Huddle/Resemble.js"><strong>View project on GitHub</strong></a>
 						</p>
 					</div>
 					<div class="span6">

package.json

@@ -1,6 +1,6 @@
 {
   "name": "resemblejs",
-  "version": "1.1.0",
+  "version": "1.2.1",
   "description": "Image analysis and comparison with HTML5",
   "main": "resemble.js",
   "repository": {

resemble.js

@@ -15,6 +15,10 @@ URL: https://github.com/Huddle/Resemble.js
 		alpha: 255
 	};
 
+	function colorsDistance(c1, c2){
+		return (Math.abs(c1.r - c2.r) + Math.abs(c1.g - c2.g) + Math.abs(c1.b - c2.b))/3;
+	}
+
 	var errorPixelTransform = {
 		flat : function (d1, d2){
 			return {
@@ -31,11 +35,34 @@ URL: https://github.com/Huddle/Resemble.js
 				b: ((d2.b*(errorPixelColor.blue/255)) + errorPixelColor.blue)/2,
 				a: d2.a
 			}
+		},
+		flatDifferenceIntensity: function (d1, d2){
+			return {
+				r: errorPixelColor.red,
+				g: errorPixelColor.green,
+				b: errorPixelColor.blue,
+				a: colorsDistance(d1, d2)
+			}
+		},
+		movementDifferenceIntensity: function (d1, d2){
+			var ratio = colorsDistance(d1, d2)/255 * 0.8;
+			return {
+				r: ((1-ratio)*(d2.r*(errorPixelColor.red/255)) + ratio*errorPixelColor.red),
+				g: ((1-ratio)*(d2.g*(errorPixelColor.green/255)) + ratio*errorPixelColor.green),
+				b: ((1-ratio)*(d2.b*(errorPixelColor.blue/255)) + ratio*errorPixelColor.blue),
+				a: d2.a
+			}
 		}
 	};
 
 	var errorPixelTransformer = errorPixelTransform.flat;
 
+	var largeImageThreshold = 1200;
+	
+	var httpRegex = /^https?:\/\//;
+	var document = typeof window != "undefined" ? window.document : {};
+	var documentDomainRegex = new RegExp('^https?://' + document.domain);
+
 	_this['resemble'] = function( fileData ){
 
 		var data = {};
@@ -76,7 +103,7 @@ URL: https://github.com/Huddle/Resemble.js
 
 		function parseImage(sourceImageData, width, height){
 
-			var pixleCount = 0;
+			var pixelCount = 0;
 			var redTotal = 0;
 			var greenTotal = 0;
 			var blueTotal = 0;
@@ -89,7 +116,7 @@ URL: https://github.com/Huddle/Resemble.js
 				var blue = sourceImageData[offset + 2];
 				var brightness = getBrightness(red,green,blue);
 
-				pixleCount++;
+				pixelCount++;
 
 				redTotal += red / 255 * 100;
 				greenTotal += green / 255 * 100;
@@ -97,10 +124,10 @@ URL: https://github.com/Huddle/Resemble.js
 				brightnessTotal += brightness / 255 * 100;
 			});
 
-			data.red = Math.floor(redTotal / pixleCount);
+			data.red = Math.floor(redTotal / pixelCount);
-			data.green = Math.floor(greenTotal / pixleCount);
+			data.green = Math.floor(greenTotal / pixelCount);
-			data.blue = Math.floor(blueTotal / pixleCount);
+			data.blue = Math.floor(blueTotal / pixelCount);
-			data.brightness = Math.floor(brightnessTotal / pixleCount);
+			data.brightness = Math.floor(brightnessTotal / pixelCount);
 
 			triggerDataUpdate();
 		}
@@ -109,6 +136,10 @@ URL: https://github.com/Huddle/Resemble.js
 			var fileReader;
 			var hiddenImage = new Image();
 			
+			if (httpRegex.test(fileData) && !documentDomainRegex.test(fileData)) {
+				hiddenImage.setAttribute('crossorigin', 'anonymous');
+			}
+
 			hiddenImage.onload = function() {
 
 				var hiddenCanvas =  document.createElement('canvas');
@@ -128,6 +159,14 @@ URL: https://github.com/Huddle/Resemble.js
 
 			if (typeof fileData === 'string') {
 				hiddenImage.src = fileData;
+				if (hiddenImage.complete) {
+					hiddenImage.onload();
+				}
+			} else if (typeof fileData.data !== 'undefined'
+					&& typeof fileData.width === 'number'
+					&& typeof fileData.height === 'number') {
+				images.push(fileData);
+				callback(fileData, fileData.width, fileData.height);
 			} else {
 				fileReader = new FileReader();
 				fileReader.onload = function (event) {
@@ -223,7 +262,7 @@ URL: https://github.com/Huddle/Resemble.js
 			var j;
 			var hasHighContrastSibling = 0;
 			var hasSiblingWithDifferentHue = 0;
-			var hasEquivilantSibling = 0;
+			var hasEquivalentSibling = 0;
 
 			addHueInfo(sourcePix);
 
@@ -249,7 +288,7 @@ URL: https://github.com/Huddle/Resemble.js
 						}
 
 						if( isRGBSame(sourcePix,targetPix) ){
-							hasEquivilantSibling++;
+							hasEquivalentSibling++;
 						}
 
 						if( Math.abs(targetPix.h - sourcePix.h) > 0.3 ){
@@ -263,7 +302,7 @@ URL: https://github.com/Huddle/Resemble.js
 				}
 			}
 
-			if(hasEquivilantSibling < 2){
+			if(hasEquivalentSibling < 2){
 				return true;
 			}
 
@@ -341,12 +380,24 @@ URL: https://github.com/Huddle/Resemble.js
 			var targetPix = imgd.data;
 
 			var mismatchCount = 0;
+			var diffBounds = {
+				top: height,
+				left: width,
+				bottom: 0,
+				right: 0
+			};
+			var updateBounds = function(x, y) {
+				diffBounds.left = Math.min(x, diffBounds.left);
+				diffBounds.right = Math.max(x, diffBounds.right);
+				diffBounds.top = Math.min(y, diffBounds.top);
+				diffBounds.bottom = Math.max(y, diffBounds.bottom);
+			}
 
 			var time = Date.now();
 
 			var skip;
 
-			if( (width > 1200 || height > 1200) && ignoreAntialiasing){
+			if(!!largeImageThreshold && ignoreAntialiasing && (width > largeImageThreshold || height > largeImageThreshold)){
 				skip = 6;
 			}
 
@@ -376,6 +427,7 @@ URL: https://github.com/Huddle/Resemble.js
 					} else {
 						errorPixel(targetPix, offset, pixel1, pixel2);
 						mismatchCount++;
+						updateBounds(horizontalPos, verticalPos);
 					}
 					return;
 				}
@@ -395,15 +447,18 @@ URL: https://github.com/Huddle/Resemble.js
 					} else {
 						errorPixel(targetPix, offset, pixel1, pixel2);
 						mismatchCount++;
+						updateBounds(horizontalPos, verticalPos);
 					}
 				} else {
 					errorPixel(targetPix, offset, pixel1, pixel2);
 					mismatchCount++;
+					updateBounds(horizontalPos, verticalPos);
 				}
 
 			});
 
 			data.misMatchPercentage = (mismatchCount / (height*width) * 100).toFixed(2);
+			data.diffBounds = diffBounds;
 			data.analysisTime = Date.now() - time;
 
 			data.getImageDataUrl = function(text){
@@ -592,7 +647,11 @@ URL: https://github.com/Huddle/Resemble.js
 			errorPixelTransformer = errorPixelTransform[options.errorType];
 		}
 
-		pixelTransparency = options.transparency || pixelTransparency;
+		pixelTransparency = isNaN(Number(options.transparency)) ? pixelTransparency : options.transparency;
+
+		if (options.largeImageThreshold !== undefined) {
+			largeImageThreshold = options.largeImageThreshold;
+		}
 
 		return this;
 	};