diff --git a/LICENSE b/LICENSE index 877624b..b265c8a 100644 --- a/LICENSE +++ b/LICENSE @@ -1,4 +1,4 @@ -The MIT License (MIT) Copyright © 2013 Richard Owen +The MIT License (MIT) Copyright © 2013 Huddle Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in diff --git a/demoassets/People.jpg b/demoassets/People.jpg new file mode 100644 index 0000000..a891a9e Binary files /dev/null and b/demoassets/People.jpg differ diff --git a/demoassets/People2.jpg b/demoassets/People2.jpg new file mode 100644 index 0000000..d55e303 Binary files /dev/null and b/demoassets/People2.jpg differ diff --git a/demoassets/main.js b/demoassets/main.js index 48e0876..dcb7a2f 100644 --- a/demoassets/main.js +++ b/demoassets/main.js @@ -81,6 +81,7 @@ $(function(){ var file2; var resembleControl; dropZone($('#dropzone1'), function(file){ + console.log(file); file1 = file; if(file2){ resembleControl = resemble(file).compareTo(file2).onComplete(onComplete); @@ -115,4 +116,39 @@ $(function(){ } }); + + (function(){ + var xhr = new XMLHttpRequest(); + var xhr2 = new XMLHttpRequest(); + var done = $.Deferred(); + var dtwo = $.Deferred(); + + 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.onload = function(e) { + dtwo.resolve(this.response); + }; + xhr2.send(); + + $('#example-images').click(function(){ + + $('#dropzone1').html(''); + $('#dropzone2').html(''); + + $.when(done, dtwo).done(function(file, file1){ + resembleControl = resemble(file).compareTo(file1).onComplete(onComplete); + }); + + return false; + }); + + }()); + }); \ No newline at end of file diff --git a/demoassets/resemble.css b/demoassets/resemble.css index dbe9cf6..dc7ed23 100644 --- a/demoassets/resemble.css +++ b/demoassets/resemble.css @@ -59,6 +59,6 @@ footer { } #image-diff { margin-left: 0px; - margin-top: 90px; + margin-top: 50px; border-style: solid; } diff --git a/index.html b/index.html index c1033e1..39563c3 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,7 @@ - +
@@ -77,6 +77,9 @@

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!

+

+ Don't have any images to compare? +

Diff will appear here.
@@ -154,7 +157,10 @@ resemble(file).compareTo(file2).onComplete(function(){
diff --git a/resemble.css b/resemble.css deleted file mode 100644 index d24250a..0000000 --- a/resemble.css +++ /dev/null @@ -1,67 +0,0 @@ - - -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; - }