James Cryer
12 years ago
commit
fe90ebb111
7 changed files with 940 additions and 0 deletions
@ -0,0 +1,4 @@ |
|||||||
|
Resemble.js |
||||||
|
========== |
||||||
|
|
||||||
|
Analyse and compare images with Javascript and HTML5. [Resemble.js Demo](http://huddle.github.com/resemble.js/) |
||||||
@ -0,0 +1,118 @@ |
|||||||
|
$(function(){ |
||||||
|
var $target = $('#drop-zone'); |
||||||
|
|
||||||
|
function dropZone($target, onDrop){ |
||||||
|
$target. |
||||||
|
bind('dragover', function(){ |
||||||
|
$target.addClass( 'drag-over' ); |
||||||
|
return false; |
||||||
|
}). |
||||||
|
bind("dragend", function () { |
||||||
|
$target.removeClass( 'drag-over' ); |
||||||
|
return false; |
||||||
|
}). |
||||||
|
bind("mouseout", function () { |
||||||
|
$target.removeClass( 'drag-over' ); |
||||||
|
return false; |
||||||
|
}). |
||||||
|
bind("drop", function(event) { |
||||||
|
var file = event.originalEvent.dataTransfer.files[0]; |
||||||
|
|
||||||
|
event.stopPropagation(); |
||||||
|
event.preventDefault(); |
||||||
|
|
||||||
|
$target.removeClass( 'drag-over' ); |
||||||
|
|
||||||
|
var droppedImage = new Image(); |
||||||
|
var fileReader = new FileReader(); |
||||||
|
|
||||||
|
fileReader.onload = function (event) { |
||||||
|
droppedImage.src = event.target.result; |
||||||
|
$target.html(droppedImage); |
||||||
|
}; |
||||||
|
|
||||||
|
fileReader.readAsDataURL(file); |
||||||
|
|
||||||
|
onDrop(file); |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
dropZone($target, function(file){ |
||||||
|
|
||||||
|
resemble(file).onComplete(function(data){ |
||||||
|
$('#image-data').show(); |
||||||
|
$('#red').css('width',data.red+'%'); |
||||||
|
$('#green').css('width',data.green+'%'); |
||||||
|
$('#blue').css('width',data.blue+'%'); |
||||||
|
$('#brightness').css('width',data.brightness+'%'); |
||||||
|
}); |
||||||
|
|
||||||
|
}); |
||||||
|
|
||||||
|
function onComplete(data){ |
||||||
|
var time = Date.now(); |
||||||
|
var diffImage = new Image(); |
||||||
|
diffImage.src = data.getImageDataUrl(); |
||||||
|
|
||||||
|
$('#image-diff').html(diffImage); |
||||||
|
|
||||||
|
$(diffImage).click(function(){ |
||||||
|
window.open(diffImage.src, '_blank'); |
||||||
|
}); |
||||||
|
|
||||||
|
$('#buttons').show(); |
||||||
|
|
||||||
|
if(data.misMatchPercentage == 0){ |
||||||
|
$('#thesame').show(); |
||||||
|
$('#diff-results').hide(); |
||||||
|
} else { |
||||||
|
$('#mismatch').text(data.misMatchPercentage); |
||||||
|
if(!data.isSameDimensions){ |
||||||
|
$('#differentdimensions').show(); |
||||||
|
} else { |
||||||
|
$('#differentdimensions').hide(); |
||||||
|
} |
||||||
|
$('#diff-results').show(); |
||||||
|
$('#thesame').hide(); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
var file1; |
||||||
|
var file2; |
||||||
|
var resembleControl; |
||||||
|
dropZone($('#dropzone1'), function(file){ |
||||||
|
file1 = file; |
||||||
|
if(file2){ |
||||||
|
resembleControl = resemble(file).compareTo(file2).onComplete(onComplete); |
||||||
|
} |
||||||
|
}); |
||||||
|
dropZone($('#dropzone2'), function(file){ |
||||||
|
file2 = file; |
||||||
|
if(file1){ |
||||||
|
resembleControl = resemble(file).compareTo(file1).onComplete(onComplete); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
|
||||||
|
var buttons = $('#raw, #colors, #antialising'); |
||||||
|
|
||||||
|
buttons.click(function(){ |
||||||
|
var $this = $(this); |
||||||
|
|
||||||
|
buttons.removeClass('active'); |
||||||
|
$this.addClass('active'); |
||||||
|
|
||||||
|
if($this.is('#raw')){ |
||||||
|
resembleControl.ignoreNothing(); |
||||||
|
} |
||||||
|
else |
||||||
|
if($this.is('#colors')){ |
||||||
|
resembleControl.ignoreColors(); |
||||||
|
} |
||||||
|
else |
||||||
|
if($this.is('#antialising')){ |
||||||
|
resembleControl.ignoreAntialiasing(); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
}); |
||||||
@ -0,0 +1,64 @@ |
|||||||
|
|
||||||
|
|
||||||
|
h1 { |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
|
||||||
|
body { |
||||||
|
padding-top: 60px; |
||||||
|
} |
||||||
|
|
||||||
|
footer { |
||||||
|
margin-top: 45px; |
||||||
|
padding: 35px 0 36px; |
||||||
|
border-top: 1px solid #e5e5e5; |
||||||
|
} |
||||||
|
|
||||||
|
.drop-zone{ |
||||||
|
border: 10px dashed #ccc; |
||||||
|
color: #ccc; |
||||||
|
font-size: 32px; |
||||||
|
height: 400px; |
||||||
|
line-height: 400px; |
||||||
|
text-align: center; |
||||||
|
width: 400px; |
||||||
|
overflow: hidden; |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
.drop-zone.drag-over{ |
||||||
|
border: 10px dashed #0088CC; |
||||||
|
} |
||||||
|
.drop-zone img { |
||||||
|
width: 400px; |
||||||
|
position: absolute; |
||||||
|
top: 0; |
||||||
|
left: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.small-drop-zone{ |
||||||
|
margin-top: 20px; |
||||||
|
margin-left: 90px; |
||||||
|
border: 10px dashed #ccc; |
||||||
|
color: #ccc; |
||||||
|
font-size: 32px; |
||||||
|
height: 330px; |
||||||
|
line-height: 330px; |
||||||
|
text-align: center; |
||||||
|
width: 330px; |
||||||
|
overflow: hidden; |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
.small-drop-zone.drag-over{ |
||||||
|
border: 10px dashed #0088CC; |
||||||
|
} |
||||||
|
.small-drop-zone img { |
||||||
|
width: 330px; |
||||||
|
position: absolute; |
||||||
|
top: 0; |
||||||
|
left: 0; |
||||||
|
} |
||||||
|
#image-diff { |
||||||
|
margin-left: 0px; |
||||||
|
margin-top: 90px; |
||||||
|
border-style: solid; |
||||||
|
} |
||||||
@ -0,0 +1,165 @@ |
|||||||
|
<!DOCTYPE html> |
||||||
|
<html> |
||||||
|
<head> |
||||||
|
<meta charset="utf-8"> |
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
||||||
|
<title>Resemble.js : Image analysis</title> |
||||||
|
<meta name="description" content=""> |
||||||
|
<meta name="viewport" content="width=device-width"> |
||||||
|
<link rel="stylesheet" href="libs/twitter-bootstrap/bootstrap.min.css"> |
||||||
|
<link rel="stylesheet" href="demoassets/resemble.css"> |
||||||
|
</head> |
||||||
|
<body> |
||||||
|
<div class="container"> |
||||||
|
<header> |
||||||
|
<div class="page-header"> |
||||||
|
<h1>Resemble.js : Image analysis and comparison</h1> |
||||||
|
</div> |
||||||
|
</header> |
||||||
|
|
||||||
|
<section role="main"> |
||||||
|
<div class="row"> |
||||||
|
<div class="span12"> |
||||||
|
<div class="hero-unit"> |
||||||
|
<div class="row"> |
||||||
|
<div class="span6"> |
||||||
|
<p> |
||||||
|
<div id="drop-zone" class="drop-zone"> |
||||||
|
Drop image here. |
||||||
|
</div> |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
<div class="span4"> |
||||||
|
<h2>What is this?</h2> |
||||||
|
<p> |
||||||
|
Resemble.js analyses and compares images with HTML5 canvas and JavaScript. |
||||||
|
</p> |
||||||
|
<p> |
||||||
|
<strong>Try it for yourself.</strong> |
||||||
|
</p> |
||||||
|
<div id="image-data" style="display:none"> |
||||||
|
|
||||||
|
RGB |
||||||
|
<div class="progress progress-danger"> |
||||||
|
<div id="red" class="bar" style="width: 0%;"></div> |
||||||
|
</div> |
||||||
|
<div class="progress progress-success"> |
||||||
|
<div id="green" class="bar" style="width: 0%;"></div> |
||||||
|
</div> |
||||||
|
<div class="progress"> |
||||||
|
<div id="blue" class="bar" style="width: 0%;"></div> |
||||||
|
</div> |
||||||
|
|
||||||
|
Brightness |
||||||
|
<div class="progress progress-warning"> |
||||||
|
<div id="brightness" class="bar" style="width: 0%;"></div> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="row"> |
||||||
|
<div class="span12"> |
||||||
|
<div class="row"> |
||||||
|
<div class="span6"> |
||||||
|
<div id="dropzone1" class="small-drop-zone"> |
||||||
|
Drop first image |
||||||
|
</div> |
||||||
|
<div id="dropzone2" class="small-drop-zone"> |
||||||
|
Drop second image |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="span6"> |
||||||
|
<h2>Compare two images?</h2> |
||||||
|
<p> |
||||||
|
Drop two images on the boxes to the left. The box below will show a generated 'diff' image, pink areas show mismatch. This example best works with two very similar but slightly different images. Try for yourself! |
||||||
|
</p> |
||||||
|
<div id="image-diff" class="small-drop-zone"> |
||||||
|
Diff will appear here. |
||||||
|
</div> |
||||||
|
<br/> |
||||||
|
<div class="btn-group" id="buttons" style="display:none"> |
||||||
|
<button class="btn active" id="raw">Ignore nothing</button> |
||||||
|
<button class="btn" id="colors">Ignore colors</button> |
||||||
|
<button class="btn" id="antialising">Ignore antialiasing</button> |
||||||
|
</div> |
||||||
|
<br/> |
||||||
|
<br/> |
||||||
|
<div id="diff-results" style="display:none;"> |
||||||
|
<p> |
||||||
|
<strong>The second image is <span id="mismatch"></span>% different compared to the first. |
||||||
|
<span id="differentdimensions" style="display:none;">And they have different dimensions.</span></strong> |
||||||
|
</p> |
||||||
|
<p> |
||||||
|
Use the buttons above to change the comparison algorithm. Perhaps you don't care about color? Annoying antialiasing causing too much noise? Resemble.js offers multiple comparison options. |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
|
||||||
|
<p id="thesame" style="display:none;"> |
||||||
|
<strong>These images are the same!</strong> |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<br/><br/> |
||||||
|
<div class="row"> |
||||||
|
<div class="span6"> |
||||||
|
<h2>Why?</h2> |
||||||
|
<p> |
||||||
|
Resemble.js can be used for any image analysis and comparison requirement you might have in the browser. However, it has been designed and built for use by the PhantomJS powered visual regression library <a href="https://github.com/Huddle/PhantomCSS" target="_blank">PhantomCSS</a>. PhantomCSS needs to be able to ignore antialiasing as this would cause differences between screenshots derived from different machines. |
||||||
|
</p> |
||||||
|
<p> |
||||||
|
Resemble.js uses the <a href="https://github.com/Huddle/PhantomCSS" target="_blank">HTML5 File API</a> to parse image data, and canvas for rendering image diffs. |
||||||
|
</p> |
||||||
|
<p> |
||||||
|
<br/> |
||||||
|
<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"> |
||||||
|
<h2>How can I use it?</h2> |
||||||
|
<p>Retrieve basic analysis on image.</p> |
||||||
|
<pre> |
||||||
|
var api = resemble(fileData).onComplete(function(data){ |
||||||
|
return data; |
||||||
|
/* |
||||||
|
{ |
||||||
|
red: 255, |
||||||
|
green: 255, |
||||||
|
blue: 255, |
||||||
|
brightness: 255 |
||||||
|
} |
||||||
|
*/ |
||||||
|
});</pre> |
||||||
|
<p>Use resemble to compare two images.</p> |
||||||
|
<pre> |
||||||
|
resemble(file).compareTo(file2).onComplete(function(){ |
||||||
|
return data; |
||||||
|
/* |
||||||
|
{ |
||||||
|
misMatchPercentage : 100, // % |
||||||
|
isSameDimensions: true, // or false |
||||||
|
getImageDataUrl: function(){} |
||||||
|
} |
||||||
|
*/ |
||||||
|
});</pre> |
||||||
|
<p>Take a look at the <a href="demoassets/main.js" target="_blank">JavaScript for this demo page</a> from a better example</p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</section> |
||||||
|
|
||||||
|
<footer class="footer"> |
||||||
|
<p> |
||||||
|
Created by <a href="https://github.com/jamescryer">James Cryer</a> and the Huddle development team. |
||||||
|
</p> |
||||||
|
</footer> |
||||||
|
</div> |
||||||
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> |
||||||
|
<script src="resemble.js"></script> |
||||||
|
<script src="demoassets/main.js"></script> |
||||||
|
</body> |
||||||
|
</html> |
||||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,67 @@ |
|||||||
|
|
||||||
|
|
||||||
|
h1 { |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
|
||||||
|
body { |
||||||
|
padding-top: 60px; |
||||||
|
} |
||||||
|
|
||||||
|
footer { |
||||||
|
margin-top: 45px; |
||||||
|
padding: 35px 0 36px; |
||||||
|
border-top: 1px solid #e5e5e5; |
||||||
|
} |
||||||
|
|
||||||
|
.drop-zone{ |
||||||
|
border: 10px dashed #ccc; |
||||||
|
color: #ccc; |
||||||
|
font-size: 32px; |
||||||
|
height: 400px; |
||||||
|
line-height: 400px; |
||||||
|
text-align: center; |
||||||
|
width: 400px; |
||||||
|
overflow: hidden; |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
.drop-zone.drag-over{ |
||||||
|
border: 10px dashed #0088CC; |
||||||
|
} |
||||||
|
.drop-zone img { |
||||||
|
width: 400px; |
||||||
|
position: absolute; |
||||||
|
top: 0; |
||||||
|
left: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.small-drop-zone{ |
||||||
|
margin-top: 20px; |
||||||
|
margin-left: 90px; |
||||||
|
border: 10px dashed #ccc; |
||||||
|
color: #ccc; |
||||||
|
font-size: 32px; |
||||||
|
height: 330px; |
||||||
|
line-height: 330px; |
||||||
|
text-align: center; |
||||||
|
width: 330px; |
||||||
|
overflow: hidden; |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
.small-drop-zone.drag-over{ |
||||||
|
border: 10px dashed #0088CC; |
||||||
|
} |
||||||
|
.small-drop-zone img { |
||||||
|
width: 330px; |
||||||
|
position: absolute; |
||||||
|
top: 0; |
||||||
|
left: 0; |
||||||
|
} |
||||||
|
#image-diff { |
||||||
|
margin-left: 0px; |
||||||
|
margin-top: 90px; |
||||||
|
border-style: solid; |
||||||
|
} |
||||||
|
#image-diff img { |
||||||
|
cursor: pointer !important; |
||||||
|
} |
||||||
@ -0,0 +1,513 @@ |
|||||||
|
/* |
||||||
|
Author: James Cryer |
||||||
|
Company: Huddle |
||||||
|
Last updated date: 19 Feb 2013 |
||||||
|
URL: ... |
||||||
|
*/ |
||||||
|
|
||||||
|
(function(_this){ |
||||||
|
|
||||||
|
_this['resemble'] = function( fileData ){ |
||||||
|
|
||||||
|
var data = {}; |
||||||
|
var images = []; |
||||||
|
var updateCallbackArray = []; |
||||||
|
|
||||||
|
var tolerance = { // between 0 and 255
|
||||||
|
red: 16, |
||||||
|
green: 16, |
||||||
|
blue: 16, |
||||||
|
minBrightness: 16, |
||||||
|
maxBrightness: 240 |
||||||
|
}; |
||||||
|
|
||||||
|
var ignoreAntialiasing = false; |
||||||
|
var ignoreColors = false; |
||||||
|
|
||||||
|
function triggerDataUpdate(){ |
||||||
|
var len = updateCallbackArray.length; |
||||||
|
var i; |
||||||
|
for(i=0;i<len;i++){ |
||||||
|
if (typeof updateCallbackArray[i] === 'function'){ |
||||||
|
updateCallbackArray[i](data); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
function loop(x, y, callback){ |
||||||
|
var i,j; |
||||||
|
|
||||||
|
for (i=0;i<x;i++){ |
||||||
|
for (j=0;j<y;j++){ |
||||||
|
callback(i, j); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
function parseImage(sourceImageData, width, height){ |
||||||
|
|
||||||
|
var pixleCount = 0; |
||||||
|
var redTotal = 0; |
||||||
|
var greenTotal = 0; |
||||||
|
var blueTotal = 0; |
||||||
|
var brightnessTotal = 0; |
||||||
|
|
||||||
|
loop(height, width, function(verticalPos, horizontalPos){ |
||||||
|
var offset = (verticalPos*width + horizontalPos) * 4; |
||||||
|
var red = sourceImageData[offset]; |
||||||
|
var green = sourceImageData[offset + 1]; |
||||||
|
var blue = sourceImageData[offset + 2]; |
||||||
|
var brightness = getBrightness(red,green,blue); |
||||||
|
|
||||||
|
pixleCount++; |
||||||
|
|
||||||
|
redTotal += red / 255 * 100; |
||||||
|
greenTotal += green / 255 * 100; |
||||||
|
blueTotal += blue / 255 * 100; |
||||||
|
brightnessTotal += brightness / 255 * 100; |
||||||
|
}); |
||||||
|
|
||||||
|
data.red = Math.floor(redTotal / pixleCount); |
||||||
|
data.green = Math.floor(greenTotal / pixleCount); |
||||||
|
data.blue = Math.floor(blueTotal / pixleCount); |
||||||
|
data.brightness = Math.floor(brightnessTotal / pixleCount); |
||||||
|
|
||||||
|
triggerDataUpdate(); |
||||||
|
} |
||||||
|
|
||||||
|
function loadImageData( fileData, callback ){ |
||||||
|
var hiddenImage = new Image(); |
||||||
|
var fileReader = new FileReader(); |
||||||
|
|
||||||
|
fileReader.onload = function (event) { |
||||||
|
hiddenImage.src = event.target.result; |
||||||
|
}; |
||||||
|
|
||||||
|
hiddenImage.onload = function() { |
||||||
|
|
||||||
|
var hiddenCanvas = document.createElement('canvas'); |
||||||
|
var imageData; |
||||||
|
var width = hiddenImage.width; |
||||||
|
var height = hiddenImage.height; |
||||||
|
|
||||||
|
hiddenCanvas.width = width; |
||||||
|
hiddenCanvas.height = height; |
||||||
|
hiddenCanvas.getContext('2d').drawImage(hiddenImage, 0, 0, width, height); |
||||||
|
imageData = hiddenCanvas.getContext('2d').getImageData(0, 0, width, height); |
||||||
|
|
||||||
|
images.push(imageData); |
||||||
|
|
||||||
|
callback(imageData, width, height); |
||||||
|
}; |
||||||
|
|
||||||
|
fileReader.readAsDataURL(fileData); |
||||||
|
} |
||||||
|
|
||||||
|
function isColorSimilar(a, b, color){ |
||||||
|
|
||||||
|
var absDiff = Math.abs(a - b); |
||||||
|
|
||||||
|
if(typeof a === 'undefined'){ |
||||||
|
return false; |
||||||
|
} |
||||||
|
if(typeof b === 'undefined'){ |
||||||
|
return false; |
||||||
|
} |
||||||
|
|
||||||
|
if(a === b){ |
||||||
|
return true; |
||||||
|
} else if ( absDiff < tolerance[color] ) { |
||||||
|
return true; |
||||||
|
} else { |
||||||
|
return false; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
function isNumber(n) { |
||||||
|
return !isNaN(parseFloat(n)); |
||||||
|
} |
||||||
|
|
||||||
|
function isPixelBrightnessSimilar(d1, d2){ |
||||||
|
return Math.abs(d1.brightness - d2.brightness) < tolerance.minBrightness; |
||||||
|
} |
||||||
|
|
||||||
|
function getBrightness(r,g,b){ |
||||||
|
return 0.3*r + 0.59*g + 0.11*b; |
||||||
|
} |
||||||
|
|
||||||
|
function isRGBSame(d1,d2){ |
||||||
|
var red = d1.r === d2.r; |
||||||
|
var green = d1.g === d2.g; |
||||||
|
var blue = d1.b === d2.b; |
||||||
|
return red && green && blue; |
||||||
|
} |
||||||
|
|
||||||
|
function isRGBSimilar(d1, d2){ |
||||||
|
var red = isColorSimilar(d1.r,d2.r,'red'); |
||||||
|
var green = isColorSimilar(d1.g,d2.g,'green'); |
||||||
|
var blue = isColorSimilar(d1.b,d2.b,'blue'); |
||||||
|
|
||||||
|
return red && green && blue; |
||||||
|
} |
||||||
|
|
||||||
|
function isContrasting(d1, d2){ |
||||||
|
return Math.abs(d1.brightness - d2.brightness) > tolerance.maxBrightness; |
||||||
|
} |
||||||
|
|
||||||
|
function getHue(r,g,b){ |
||||||
|
|
||||||
|
r = r / 255; |
||||||
|
g = g / 255; |
||||||
|
b = b / 255; |
||||||
|
var max = Math.max(r, g, b), min = Math.min(r, g, b); |
||||||
|
var h; |
||||||
|
var d; |
||||||
|
|
||||||
|
if (max == min){ |
||||||
|
h = 0; // achromatic
|
||||||
|
} else{ |
||||||
|
d = max - min; |
||||||
|
switch(max){ |
||||||
|
case r: h = (g - b) / d + (g < b ? 6 : 0); break; |
||||||
|
case g: h = (b - r) / d + 2; break; |
||||||
|
case b: h = (r - g) / d + 4; break; |
||||||
|
} |
||||||
|
h /= 6; |
||||||
|
} |
||||||
|
|
||||||
|
return h; |
||||||
|
} |
||||||
|
|
||||||
|
function isAntialiased(sourcePix, data, cacheSet, verticalPos, horizontalPos, width){ |
||||||
|
var offset; |
||||||
|
var targetPix; |
||||||
|
var distance = 1; |
||||||
|
var i; |
||||||
|
var j; |
||||||
|
var hasHighContrastSibling = 0; |
||||||
|
var hasSiblingWithDifferentHue = 0; |
||||||
|
var hasEquivilantSibling = 0; |
||||||
|
|
||||||
|
addHueInfo(sourcePix); |
||||||
|
|
||||||
|
for (i = distance*-1; i <= distance; i++){ |
||||||
|
for (j = distance*-1; j <= distance; j++){ |
||||||
|
|
||||||
|
if(i===0 && j===0){ |
||||||
|
// ignore source pixel
|
||||||
|
} else { |
||||||
|
|
||||||
|
offset = ((verticalPos+j)*width + (horizontalPos+i)) * 4; |
||||||
|
targetPix = getPixelInfo(data, offset, cacheSet); |
||||||
|
|
||||||
|
if(targetPix === null){ |
||||||
|
continue; |
||||||
|
} |
||||||
|
|
||||||
|
addBrightnessInfo(targetPix); |
||||||
|
addHueInfo(targetPix); |
||||||
|
|
||||||
|
if( isContrasting(sourcePix, targetPix) ){ |
||||||
|
hasHighContrastSibling++; |
||||||
|
} |
||||||
|
|
||||||
|
if( isRGBSame(sourcePix,targetPix) ){ |
||||||
|
hasEquivilantSibling++; |
||||||
|
} |
||||||
|
|
||||||
|
if( Math.abs(targetPix.h - sourcePix.h) > 0.3 ){ |
||||||
|
hasSiblingWithDifferentHue++; |
||||||
|
} |
||||||
|
|
||||||
|
if( hasSiblingWithDifferentHue > 1 || hasHighContrastSibling > 1){ |
||||||
|
return true; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
if(hasEquivilantSibling < 2){ |
||||||
|
return true; |
||||||
|
} |
||||||
|
|
||||||
|
return false; |
||||||
|
} |
||||||
|
|
||||||
|
function errorPixel(px, offset){ |
||||||
|
px[offset] = 255; //r
|
||||||
|
px[offset + 1] = 0; //g
|
||||||
|
px[offset + 2] = 255; //b
|
||||||
|
px[offset + 3] = 255; //a
|
||||||
|
} |
||||||
|
|
||||||
|
function copyPixel(px, offset, data){ |
||||||
|
px[offset] = data.r; //r
|
||||||
|
px[offset + 1] = data.g; //g
|
||||||
|
px[offset + 2] = data.b; //b
|
||||||
|
px[offset + 3] = 255; //a
|
||||||
|
} |
||||||
|
|
||||||
|
function copyGrayScalePixel(px, offset, data){ |
||||||
|
px[offset] = data.brightness; //r
|
||||||
|
px[offset + 1] = data.brightness; //g
|
||||||
|
px[offset + 2] = data.brightness; //b
|
||||||
|
px[offset + 3] = 255; //a
|
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
function getPixelInfo(data, offset, cacheSet){ |
||||||
|
var r; |
||||||
|
var g; |
||||||
|
var b; |
||||||
|
var d; |
||||||
|
|
||||||
|
if(typeof data[offset] !== 'undefined'){ |
||||||
|
r = data[offset]; |
||||||
|
g = data[offset+1]; |
||||||
|
b = data[offset+2]; |
||||||
|
d = { |
||||||
|
r: r, |
||||||
|
g: g, |
||||||
|
b: b |
||||||
|
}; |
||||||
|
|
||||||
|
return d; |
||||||
|
} else { |
||||||
|
return null; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
function addBrightnessInfo(data){ |
||||||
|
data.brightness = getBrightness(data.r,data.g,data.b); // 'corrected' lightness
|
||||||
|
} |
||||||
|
|
||||||
|
function addHueInfo(data){ |
||||||
|
data.h = getHue(data.r,data.g,data.b); |
||||||
|
} |
||||||
|
|
||||||
|
function analyseImages(img1, img2, width, height){ |
||||||
|
|
||||||
|
var hiddenCanvas = document.createElement('canvas'); |
||||||
|
|
||||||
|
var data1 = img1.data; |
||||||
|
var data2 = img2.data; |
||||||
|
|
||||||
|
hiddenCanvas.width = width; |
||||||
|
hiddenCanvas.height = height; |
||||||
|
|
||||||
|
var context = hiddenCanvas.getContext('2d'); |
||||||
|
var imgd = context.createImageData(width,height); |
||||||
|
var targetPix = imgd.data; |
||||||
|
|
||||||
|
var mismatchCount = 0; |
||||||
|
|
||||||
|
var time = Date.now(); |
||||||
|
|
||||||
|
var skip; |
||||||
|
|
||||||
|
if( (width > 1200 || height > 1200) && ignoreAntialiasing){ |
||||||
|
skip = 6; |
||||||
|
} |
||||||
|
|
||||||
|
loop(height, width, function(verticalPos, horizontalPos){ |
||||||
|
|
||||||
|
if(skip){ // only skip if the image isn't small
|
||||||
|
if(verticalPos % skip === 0 || horizontalPos % skip === 0){ |
||||||
|
return; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
var offset = (verticalPos*width + horizontalPos) * 4; |
||||||
|
var pixel1 = getPixelInfo(data1, offset, 1); |
||||||
|
var pixel2 = getPixelInfo(data2, offset, 2); |
||||||
|
|
||||||
|
if(pixel1 === null || pixel2 === null){ |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
if (ignoreColors){ |
||||||
|
|
||||||
|
addBrightnessInfo(pixel1); |
||||||
|
addBrightnessInfo(pixel2); |
||||||
|
|
||||||
|
if( isPixelBrightnessSimilar(pixel1, pixel2) ){ |
||||||
|
copyGrayScalePixel(targetPix, offset, pixel2); |
||||||
|
} else { |
||||||
|
errorPixel(targetPix, offset); |
||||||
|
mismatchCount++; |
||||||
|
} |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
if( isRGBSimilar(pixel1, pixel2) ){ |
||||||
|
copyPixel(targetPix, offset, pixel2); |
||||||
|
|
||||||
|
} else if( ignoreAntialiasing && ( |
||||||
|
addBrightnessInfo(pixel1), // jit pixel info augmentation looks a little weird, sorry.
|
||||||
|
addBrightnessInfo(pixel2), |
||||||
|
isAntialiased(pixel1, data1, 1, verticalPos, horizontalPos, width) || |
||||||
|
isAntialiased(pixel2, data2, 2, verticalPos, horizontalPos, width) |
||||||
|
)){ |
||||||
|
|
||||||
|
if( isPixelBrightnessSimilar(pixel1, pixel2) ){ |
||||||
|
copyGrayScalePixel(targetPix, offset, pixel2); |
||||||
|
} else { |
||||||
|
errorPixel(targetPix, offset); |
||||||
|
mismatchCount++; |
||||||
|
} |
||||||
|
} else { |
||||||
|
errorPixel(targetPix, offset); |
||||||
|
mismatchCount++; |
||||||
|
} |
||||||
|
|
||||||
|
}); |
||||||
|
|
||||||
|
data.misMatchPercentage = (mismatchCount / (height*width) * 100).toFixed(2); |
||||||
|
data.analysisTime = Date.now() - time; |
||||||
|
|
||||||
|
data.getImageDataUrl = function(text){ |
||||||
|
var barHeight = 0; |
||||||
|
|
||||||
|
if(text){ |
||||||
|
barHeight = addLabel(text,context,hiddenCanvas); |
||||||
|
} |
||||||
|
|
||||||
|
context.putImageData(imgd, 0, barHeight); |
||||||
|
|
||||||
|
return hiddenCanvas.toDataURL("image/png"); |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
|
function addLabel(text, context, hiddenCanvas){ |
||||||
|
var textPadding = 2; |
||||||
|
|
||||||
|
context.font = '12px sans-serif'; |
||||||
|
|
||||||
|
var textWidth = context.measureText(text).width + textPadding*2; |
||||||
|
var barHeight = 22; |
||||||
|
|
||||||
|
if(textWidth > hiddenCanvas.width){ |
||||||
|
hiddenCanvas.width = textWidth; |
||||||
|
} |
||||||
|
|
||||||
|
hiddenCanvas.height += barHeight; |
||||||
|
|
||||||
|
context.fillStyle = "#666"; |
||||||
|
context.fillRect(0,0,hiddenCanvas.width,barHeight -4); |
||||||
|
context.fillStyle = "#fff"; |
||||||
|
context.fillRect(0,barHeight -4,hiddenCanvas.width, 4); |
||||||
|
|
||||||
|
context.fillStyle = "#fff"; |
||||||
|
context.textBaseline = "top"; |
||||||
|
context.font = '12px sans-serif'; |
||||||
|
context.fillText(text, textPadding, 1); |
||||||
|
|
||||||
|
return barHeight; |
||||||
|
} |
||||||
|
|
||||||
|
function compare(one, two){ |
||||||
|
|
||||||
|
function onceWeHaveBoth(){ |
||||||
|
var width; |
||||||
|
var height; |
||||||
|
if(images.length === 2){ |
||||||
|
width = images[0].width > images[1].width ? images[0].width : images[1].width; |
||||||
|
height = images[0].height > images[1].height ? images[0].height : images[1].height; |
||||||
|
|
||||||
|
if( (images[0].width === images[1].width) && (images[0].height === images[1].height) ){ |
||||||
|
data.isSameDimensions = true; |
||||||
|
} else { |
||||||
|
data.isSameDimensions = false; |
||||||
|
} |
||||||
|
|
||||||
|
analyseImages(images[0], images[1], width, height); |
||||||
|
|
||||||
|
triggerDataUpdate(); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
images = []; |
||||||
|
loadImageData(one, onceWeHaveBoth); |
||||||
|
loadImageData(two, onceWeHaveBoth); |
||||||
|
} |
||||||
|
|
||||||
|
function getCompareApi(param){ |
||||||
|
|
||||||
|
var hasMethod = typeof param === 'function'; |
||||||
|
|
||||||
|
if( !hasMethod ){ |
||||||
|
// assume it's file data
|
||||||
|
secondFileData = param; |
||||||
|
} |
||||||
|
|
||||||
|
var self = { |
||||||
|
ignoreNothing: function(){ |
||||||
|
|
||||||
|
tolerance.red = 16; |
||||||
|
tolerance.green = 16; |
||||||
|
tolerance.blue = 16; |
||||||
|
tolerance.minBrightness = 16; |
||||||
|
tolerance.maxBrightness = 240; |
||||||
|
|
||||||
|
ignoreAntialiasing = false; |
||||||
|
ignoreColors = false; |
||||||
|
|
||||||
|
if(hasMethod) { param(); } |
||||||
|
return self; |
||||||
|
}, |
||||||
|
ignoreAntialiasing: function(){ |
||||||
|
|
||||||
|
tolerance.red = 32; |
||||||
|
tolerance.green = 32; |
||||||
|
tolerance.blue = 32; |
||||||
|
tolerance.minBrightness = 64; |
||||||
|
tolerance.maxBrightness = 96; |
||||||
|
|
||||||
|
ignoreAntialiasing = true; |
||||||
|
ignoreColors = false; |
||||||
|
|
||||||
|
if(hasMethod) { param(); } |
||||||
|
return self; |
||||||
|
}, |
||||||
|
ignoreColors: function(){ |
||||||
|
|
||||||
|
tolerance.minBrightness = 16; |
||||||
|
tolerance.maxBrightness = 240; |
||||||
|
|
||||||
|
ignoreAntialiasing = false; |
||||||
|
ignoreColors = true; |
||||||
|
|
||||||
|
if(hasMethod) { param(); } |
||||||
|
return self; |
||||||
|
}, |
||||||
|
onComplete: function( callback ){ |
||||||
|
|
||||||
|
updateCallbackArray.push(callback); |
||||||
|
|
||||||
|
var wrapper = function(){ |
||||||
|
compare(fileData, secondFileData); |
||||||
|
}; |
||||||
|
|
||||||
|
wrapper(); |
||||||
|
|
||||||
|
return getCompareApi(wrapper); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
return self; |
||||||
|
} |
||||||
|
|
||||||
|
return { |
||||||
|
onComplete: function( callback ){ |
||||||
|
updateCallbackArray.push(callback); |
||||||
|
loadImageData(fileData, function(imageData, width, height){ |
||||||
|
parseImage(imageData.data, width, height); |
||||||
|
}); |
||||||
|
}, |
||||||
|
compareTo: function(secondFileData){ |
||||||
|
return getCompareApi(secondFileData); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
}; |
||||||
|
}(this)); |
||||||
Loading…
Reference in new issue