|
|
|
@ -1,32 +1,32 @@
|
|
|
|
|
$(function(){ |
|
|
|
|
var $target = $('#drop-zone'); |
|
|
|
|
$(function() { |
|
|
|
|
var $target = $("#drop-zone"); |
|
|
|
|
|
|
|
|
|
function dropZone($target, onDrop){ |
|
|
|
|
$target. |
|
|
|
|
bind('dragover', function(){ |
|
|
|
|
$target.addClass( 'drag-over' ); |
|
|
|
|
function dropZone($target, onDrop) { |
|
|
|
|
$target |
|
|
|
|
.bind("dragover", function() { |
|
|
|
|
$target.addClass("drag-over"); |
|
|
|
|
return false; |
|
|
|
|
}). |
|
|
|
|
bind("dragend", function () { |
|
|
|
|
$target.removeClass( 'drag-over' ); |
|
|
|
|
}) |
|
|
|
|
.bind("dragend", function() { |
|
|
|
|
$target.removeClass("drag-over"); |
|
|
|
|
return false; |
|
|
|
|
}). |
|
|
|
|
bind("dragleave", function () { |
|
|
|
|
$target.removeClass( 'drag-over' ); |
|
|
|
|
}) |
|
|
|
|
.bind("dragleave", function() { |
|
|
|
|
$target.removeClass("drag-over"); |
|
|
|
|
return false; |
|
|
|
|
}). |
|
|
|
|
bind("drop", function(event) { |
|
|
|
|
}) |
|
|
|
|
.bind("drop", function(event) { |
|
|
|
|
var file = event.originalEvent.dataTransfer.files[0]; |
|
|
|
|
|
|
|
|
|
event.stopPropagation(); |
|
|
|
|
event.preventDefault(); |
|
|
|
|
|
|
|
|
|
$target.removeClass( 'drag-over' ); |
|
|
|
|
$target.removeClass("drag-over"); |
|
|
|
|
|
|
|
|
|
var droppedImage = new Image(); |
|
|
|
|
var fileReader = new FileReader(); |
|
|
|
|
|
|
|
|
|
fileReader.onload = function (event) { |
|
|
|
|
fileReader.onload = function(event) { |
|
|
|
|
droppedImage.src = event.target.result; |
|
|
|
|
$target.html(droppedImage); |
|
|
|
|
}; |
|
|
|
@ -37,29 +37,27 @@ $(function(){
|
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
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+'%'); |
|
|
|
|
$('#alpha').css('width',data.alpha+'%'); |
|
|
|
|
$('#brightness').css('width',data.brightness+'%'); |
|
|
|
|
$('#white').css('width',data.white+'%'); |
|
|
|
|
$('#black').css('width',data.black+'%'); |
|
|
|
|
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 + "%"); |
|
|
|
|
$("#alpha").css("width", data.alpha + "%"); |
|
|
|
|
$("#brightness").css("width", data.brightness + "%"); |
|
|
|
|
$("#white").css("width", data.white + "%"); |
|
|
|
|
$("#black").css("width", data.black + "%"); |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
function onComplete(data){ |
|
|
|
|
function onComplete(data) { |
|
|
|
|
var time = Date.now(); |
|
|
|
|
var diffImage = new Image(); |
|
|
|
|
diffImage.src = data.getImageDataUrl(); |
|
|
|
|
|
|
|
|
|
$('#image-diff').html(diffImage); |
|
|
|
|
$("#image-diff").html(diffImage); |
|
|
|
|
|
|
|
|
|
$(diffImage).click(function(){ |
|
|
|
|
$(diffImage).click(function() { |
|
|
|
|
var w = window.open("about:blank", "_blank"); |
|
|
|
|
var html = w.document.documentElement; |
|
|
|
|
var body = w.document.body; |
|
|
|
@ -74,25 +72,26 @@ $(function(){
|
|
|
|
|
img.alt = "image diff"; |
|
|
|
|
img.style.maxWidth = "100%"; |
|
|
|
|
img.addEventListener("click", function() { |
|
|
|
|
this.style.maxWidth = this.style.maxWidth === "100%" ? "" : "100%"; |
|
|
|
|
this.style.maxWidth = |
|
|
|
|
this.style.maxWidth === "100%" ? "" : "100%"; |
|
|
|
|
}); |
|
|
|
|
body.appendChild(img); |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
$('.buttons').show(); |
|
|
|
|
$(".buttons").show(); |
|
|
|
|
|
|
|
|
|
if(data.misMatchPercentage == 0){ |
|
|
|
|
$('#thesame').show(); |
|
|
|
|
$('#diff-results').hide(); |
|
|
|
|
if (data.misMatchPercentage == 0) { |
|
|
|
|
$("#thesame").show(); |
|
|
|
|
$("#diff-results").hide(); |
|
|
|
|
} else { |
|
|
|
|
$('#mismatch').text(data.misMatchPercentage); |
|
|
|
|
if(!data.isSameDimensions){ |
|
|
|
|
$('#differentdimensions').show(); |
|
|
|
|
$("#mismatch").text(data.misMatchPercentage); |
|
|
|
|
if (!data.isSameDimensions) { |
|
|
|
|
$("#differentdimensions").show(); |
|
|
|
|
} else { |
|
|
|
|
$('#differentdimensions').hide(); |
|
|
|
|
$("#differentdimensions").hide(); |
|
|
|
|
} |
|
|
|
|
$('#diff-results').show(); |
|
|
|
|
$('#thesame').hide(); |
|
|
|
|
$("#diff-results").show(); |
|
|
|
|
$("#thesame").hide(); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
@ -100,142 +99,141 @@ $(function(){
|
|
|
|
|
var file2; |
|
|
|
|
var resembleControl; |
|
|
|
|
|
|
|
|
|
dropZone($('#dropzone1'), function(file){ |
|
|
|
|
dropZone($("#dropzone1"), function(file) { |
|
|
|
|
file1 = file; |
|
|
|
|
if(file2){ |
|
|
|
|
resembleControl = resemble(file).compareTo(file2).onComplete(onComplete); |
|
|
|
|
if (file2) { |
|
|
|
|
resembleControl = resemble(file) |
|
|
|
|
.compareTo(file2) |
|
|
|
|
.onComplete(onComplete); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
dropZone($('#dropzone2'), function(file){ |
|
|
|
|
dropZone($("#dropzone2"), function(file) { |
|
|
|
|
file2 = file; |
|
|
|
|
if(file1){ |
|
|
|
|
resembleControl = resemble(file).compareTo(file1).onComplete(onComplete); |
|
|
|
|
if (file1) { |
|
|
|
|
resembleControl = resemble(file) |
|
|
|
|
.compareTo(file1) |
|
|
|
|
.onComplete(onComplete); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
var buttons = $('.buttons button'); |
|
|
|
|
var buttons = $(".buttons button"); |
|
|
|
|
|
|
|
|
|
buttons.click(function(){ |
|
|
|
|
buttons.click(function() { |
|
|
|
|
var $this = $(this); |
|
|
|
|
|
|
|
|
|
$this.parent('.buttons').find('button').removeClass('active'); |
|
|
|
|
$this.addClass('active'); |
|
|
|
|
$this |
|
|
|
|
.parent(".buttons") |
|
|
|
|
.find("button") |
|
|
|
|
.removeClass("active"); |
|
|
|
|
$this.addClass("active"); |
|
|
|
|
|
|
|
|
|
if($this.is('#raw')){ |
|
|
|
|
if ($this.is("#raw")) { |
|
|
|
|
resembleControl.ignoreNothing(); |
|
|
|
|
} |
|
|
|
|
else |
|
|
|
|
if($this.is('#less')){ |
|
|
|
|
} else if ($this.is("#less")) { |
|
|
|
|
resembleControl.ignoreLess(); |
|
|
|
|
} |
|
|
|
|
if($this.is('#colors')){ |
|
|
|
|
if ($this.is("#colors")) { |
|
|
|
|
resembleControl.ignoreColors(); |
|
|
|
|
} |
|
|
|
|
else |
|
|
|
|
if($this.is('#antialising')){ |
|
|
|
|
} else if ($this.is("#antialising")) { |
|
|
|
|
resembleControl.ignoreAntialiasing(); |
|
|
|
|
} |
|
|
|
|
else |
|
|
|
|
if($this.is('#alpha')){ |
|
|
|
|
} else if ($this.is("#alpha")) { |
|
|
|
|
resembleControl.ignoreAlpha(); |
|
|
|
|
} |
|
|
|
|
else |
|
|
|
|
if($this.is('#same-size')){ |
|
|
|
|
} else if ($this.is("#same-size")) { |
|
|
|
|
resembleControl.scaleToSameSize(); |
|
|
|
|
} |
|
|
|
|
else |
|
|
|
|
if($this.is('#original-size')){ |
|
|
|
|
} else if ($this.is("#original-size")) { |
|
|
|
|
resembleControl.useOriginalSize(); |
|
|
|
|
} |
|
|
|
|
else |
|
|
|
|
if($this.is('#pink')){ |
|
|
|
|
resembleControl.outputSettings({ |
|
|
|
|
} else if ($this.is("#pink")) { |
|
|
|
|
resembleControl |
|
|
|
|
.outputSettings({ |
|
|
|
|
errorColor: { |
|
|
|
|
red: 255, |
|
|
|
|
green: 0, |
|
|
|
|
blue: 255 |
|
|
|
|
} |
|
|
|
|
}).repaint(); |
|
|
|
|
} |
|
|
|
|
else |
|
|
|
|
if($this.is('#yellow')){ |
|
|
|
|
resembleControl.outputSettings({ |
|
|
|
|
}) |
|
|
|
|
.repaint(); |
|
|
|
|
} else if ($this.is("#yellow")) { |
|
|
|
|
resembleControl |
|
|
|
|
.outputSettings({ |
|
|
|
|
errorColor: { |
|
|
|
|
red: 255, |
|
|
|
|
green: 255, |
|
|
|
|
blue: 0 |
|
|
|
|
} |
|
|
|
|
}).repaint(); |
|
|
|
|
} |
|
|
|
|
else |
|
|
|
|
if($this.is('#flat')){ |
|
|
|
|
resembleControl.outputSettings({ |
|
|
|
|
errorType: 'flat' |
|
|
|
|
}).repaint(); |
|
|
|
|
} |
|
|
|
|
else |
|
|
|
|
if($this.is('#movement')){ |
|
|
|
|
resembleControl.outputSettings({ |
|
|
|
|
errorType: 'movement' |
|
|
|
|
}).repaint(); |
|
|
|
|
} |
|
|
|
|
else |
|
|
|
|
if($this.is('#flatDifferenceIntensity')){ |
|
|
|
|
resembleControl.outputSettings({ |
|
|
|
|
errorType: 'flatDifferenceIntensity' |
|
|
|
|
}).repaint(); |
|
|
|
|
} |
|
|
|
|
else |
|
|
|
|
if($this.is('#movementDifferenceIntensity')){ |
|
|
|
|
resembleControl.outputSettings({ |
|
|
|
|
errorType: 'movementDifferenceIntensity' |
|
|
|
|
}).repaint(); |
|
|
|
|
} |
|
|
|
|
else |
|
|
|
|
if($this.is('#diffOnly')){ |
|
|
|
|
resembleControl.outputSettings({ |
|
|
|
|
errorType: 'diffOnly' |
|
|
|
|
}).repaint(); |
|
|
|
|
} |
|
|
|
|
else |
|
|
|
|
if($this.is('#opaque')){ |
|
|
|
|
resembleControl.outputSettings({ |
|
|
|
|
}) |
|
|
|
|
.repaint(); |
|
|
|
|
} else if ($this.is("#flat")) { |
|
|
|
|
resembleControl |
|
|
|
|
.outputSettings({ |
|
|
|
|
errorType: "flat" |
|
|
|
|
}) |
|
|
|
|
.repaint(); |
|
|
|
|
} else if ($this.is("#movement")) { |
|
|
|
|
resembleControl |
|
|
|
|
.outputSettings({ |
|
|
|
|
errorType: "movement" |
|
|
|
|
}) |
|
|
|
|
.repaint(); |
|
|
|
|
} else if ($this.is("#flatDifferenceIntensity")) { |
|
|
|
|
resembleControl |
|
|
|
|
.outputSettings({ |
|
|
|
|
errorType: "flatDifferenceIntensity" |
|
|
|
|
}) |
|
|
|
|
.repaint(); |
|
|
|
|
} else if ($this.is("#movementDifferenceIntensity")) { |
|
|
|
|
resembleControl |
|
|
|
|
.outputSettings({ |
|
|
|
|
errorType: "movementDifferenceIntensity" |
|
|
|
|
}) |
|
|
|
|
.repaint(); |
|
|
|
|
} else if ($this.is("#diffOnly")) { |
|
|
|
|
resembleControl |
|
|
|
|
.outputSettings({ |
|
|
|
|
errorType: "diffOnly" |
|
|
|
|
}) |
|
|
|
|
.repaint(); |
|
|
|
|
} else if ($this.is("#opaque")) { |
|
|
|
|
resembleControl |
|
|
|
|
.outputSettings({ |
|
|
|
|
transparency: 1 |
|
|
|
|
}).repaint(); |
|
|
|
|
} |
|
|
|
|
else |
|
|
|
|
if($this.is('#transparent')){ |
|
|
|
|
resembleControl.outputSettings({ |
|
|
|
|
}) |
|
|
|
|
.repaint(); |
|
|
|
|
} else if ($this.is("#transparent")) { |
|
|
|
|
resembleControl |
|
|
|
|
.outputSettings({ |
|
|
|
|
transparency: 0.3 |
|
|
|
|
}).repaint(); |
|
|
|
|
} |
|
|
|
|
else |
|
|
|
|
if($this.is('#boundingBox')){ |
|
|
|
|
resembleControl.outputSettings({ |
|
|
|
|
}) |
|
|
|
|
.repaint(); |
|
|
|
|
} else if ($this.is("#boundingBox")) { |
|
|
|
|
resembleControl |
|
|
|
|
.outputSettings({ |
|
|
|
|
boundingBox: { |
|
|
|
|
left: $("#bounding-box-x1").val(), |
|
|
|
|
top: $("#bounding-box-y1").val(), |
|
|
|
|
right: $("#bounding-box-x2").val(), |
|
|
|
|
bottom: $("#bounding-box-y2").val() |
|
|
|
|
} |
|
|
|
|
}).repaint(); |
|
|
|
|
$this.removeClass('active'); |
|
|
|
|
}) |
|
|
|
|
.repaint(); |
|
|
|
|
$this.removeClass("active"); |
|
|
|
|
} |
|
|
|
|
if($this.is('#ignoredBox')){ |
|
|
|
|
resembleControl.outputSettings({ |
|
|
|
|
if ($this.is("#ignoredBox")) { |
|
|
|
|
resembleControl |
|
|
|
|
.outputSettings({ |
|
|
|
|
ignoredBox: { |
|
|
|
|
left: $("#ignored-box-x1").val(), |
|
|
|
|
top: $("#ignored-box-y1").val(), |
|
|
|
|
right: $("#ignored-box-x2").val(), |
|
|
|
|
bottom: $("#ignored-box-y2").val() |
|
|
|
|
} |
|
|
|
|
}).repaint(); |
|
|
|
|
$this.removeClass('active'); |
|
|
|
|
}) |
|
|
|
|
.repaint(); |
|
|
|
|
$this.removeClass("active"); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
(function(){ |
|
|
|
|
(function() { |
|
|
|
|
var xhr = new XMLHttpRequest(); |
|
|
|
|
var xhr2 = new XMLHttpRequest(); |
|
|
|
|
var xhr3 = new XMLHttpRequest(); |
|
|
|
@ -243,59 +241,63 @@ $(function(){
|
|
|
|
|
var dtwo = $.Deferred(); |
|
|
|
|
var dthree = $.Deferred(); |
|
|
|
|
|
|
|
|
|
xhr.open('GET', 'demoassets/People.jpg', true); |
|
|
|
|
xhr.responseType = 'blob'; |
|
|
|
|
xhr.open("GET", "demoassets/People.jpg", true); |
|
|
|
|
xhr.responseType = "blob"; |
|
|
|
|
xhr.onload = function(e) { |
|
|
|
|
done.resolve(this.response); |
|
|
|
|
}; |
|
|
|
|
xhr.send(); |
|
|
|
|
|
|
|
|
|
xhr2.open('GET', 'demoassets/People2.jpg', true); |
|
|
|
|
xhr2.responseType = 'blob'; |
|
|
|
|
xhr2.open("GET", "demoassets/People2.jpg", true); |
|
|
|
|
xhr2.responseType = "blob"; |
|
|
|
|
xhr2.onload = function(e) { |
|
|
|
|
dtwo.resolve(this.response); |
|
|
|
|
}; |
|
|
|
|
xhr2.send(); |
|
|
|
|
|
|
|
|
|
xhr3.open('GET', 'demoassets/PeopleAlpha.png', true); |
|
|
|
|
xhr3.responseType = 'blob'; |
|
|
|
|
xhr3.open("GET", "demoassets/PeopleAlpha.png", true); |
|
|
|
|
xhr3.responseType = "blob"; |
|
|
|
|
xhr3.onload = function(e) { |
|
|
|
|
dthree.resolve(this.response); |
|
|
|
|
}; |
|
|
|
|
xhr3.send(); |
|
|
|
|
|
|
|
|
|
$('#example-images').click(function(){ |
|
|
|
|
|
|
|
|
|
$('#dropzone1').html('<img src="demoassets/People.jpg"/>'); |
|
|
|
|
$('#dropzone2').html('<img src="demoassets/People2.jpg"/>'); |
|
|
|
|
$("#example-images").click(function() { |
|
|
|
|
$("#dropzone1").html('<img src="demoassets/People.jpg"/>'); |
|
|
|
|
$("#dropzone2").html('<img src="demoassets/People2.jpg"/>'); |
|
|
|
|
|
|
|
|
|
$.when(done, dtwo).done(function(file, file1){ |
|
|
|
|
if (typeof FileReader === 'undefined') { |
|
|
|
|
resembleControl = resemble('demoassets/People.jpg').compareTo('demoassets/People2.jpg').onComplete(onComplete); |
|
|
|
|
$.when(done, dtwo).done(function(file, file1) { |
|
|
|
|
if (typeof FileReader === "undefined") { |
|
|
|
|
resembleControl = resemble("demoassets/People.jpg") |
|
|
|
|
.compareTo("demoassets/People2.jpg") |
|
|
|
|
.onComplete(onComplete); |
|
|
|
|
} else { |
|
|
|
|
resembleControl = resemble(file).compareTo(file1).onComplete(onComplete); |
|
|
|
|
resembleControl = resemble(file) |
|
|
|
|
.compareTo(file1) |
|
|
|
|
.onComplete(onComplete); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
return false; |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
$('#example-images-alpha').click(function(){ |
|
|
|
|
|
|
|
|
|
$('#dropzone1').html('<img src="demoassets/People.jpg"/>'); |
|
|
|
|
$('#dropzone2').html('<img src="demoassets/PeopleAlpha.png"/>'); |
|
|
|
|
$("#example-images-alpha").click(function() { |
|
|
|
|
$("#dropzone1").html('<img src="demoassets/People.jpg"/>'); |
|
|
|
|
$("#dropzone2").html('<img src="demoassets/PeopleAlpha.png"/>'); |
|
|
|
|
|
|
|
|
|
$.when(done, dthree).done(function(file, file1){ |
|
|
|
|
if (typeof FileReader === 'undefined') { |
|
|
|
|
resembleControl = resemble('demoassets/People.jpg').compareTo('demoassets/PeopleAlpha.png').onComplete(onComplete); |
|
|
|
|
$.when(done, dthree).done(function(file, file1) { |
|
|
|
|
if (typeof FileReader === "undefined") { |
|
|
|
|
resembleControl = resemble("demoassets/People.jpg") |
|
|
|
|
.compareTo("demoassets/PeopleAlpha.png") |
|
|
|
|
.onComplete(onComplete); |
|
|
|
|
} else { |
|
|
|
|
resembleControl = resemble(file).compareTo(file1).onComplete(onComplete); |
|
|
|
|
resembleControl = resemble(file) |
|
|
|
|
.compareTo(file1) |
|
|
|
|
.onComplete(onComplete); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
return false; |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
}()); |
|
|
|
|
|
|
|
|
|
})(); |
|
|
|
|
}); |
|
|
|
|