Skip to content
Browse files

Merge pull request #43 from benkaiser/gh-pages

add test box to drop user images into
  • Loading branch information...
2 parents 90f4c2d + 44aa177 commit 880a1aa059af5742efecf62ab079f0515d78059f @cesutherland cesutherland committed Jan 28, 2015
Showing with 150 additions and 46 deletions.
  1. +24 −1 css/styles.css
  2. +1 −2 index.html
  3. +125 −43 js/demo.js
View
25 css/styles.css
@@ -30,7 +30,6 @@ div.footer {
div.example {
margin-top: 24px;
margin-bottom: 32px;
- overflow: hidden
}
div.label {
width: 300px;
@@ -62,3 +61,27 @@ div.example.size div.image-b {
height: 200px;
margin: 54px;
}
+div.dropbox {
+ float: left;
+ border: 1px solid #999;
+ width: 300px;
+ height: 300px;
+ text-align: center;
+ line-height: 300px;
+ font-weight: 600;
+ font-size: 20px;
+}
+img.dropped_img {
+ display: none;
+}
+.big_canvas {
+}
+.text_left {
+ text-align: left;
+}
+.clearfix {
+ clear: both;
+}
+.result_title {
+ padding-top: 40px;
+}
View
3 index.html
@@ -16,12 +16,11 @@
<h1>JS-ImageDiff Demo:</h1>
<p>JavaScript / HTML5 Canvas based image diff utility. Sample images from the <a href="https://github.com/cameronmcefee/Image-Diff-View-Modes/commit/8e95f70c9c47168305970e91021072673d7cdad8">github imagediff demo</a>.</p>
<div id="demo"></div>
- <div class="footer">by <a href="http://www.humblesoftware.com">humble software development</a></div>
+ <div class="footer clearfix">by <a href="http://www.humblesoftware.com">humble software development</a></div>
</div>
<div id="github-ribbon">
<a href="http://github.com/HumbleSoftware/js-imagediff"><img style="position: absolute; top: 0; right: 0; border: 0;" src="http://humblesoftware.com/static/images/github-ribbon.png" alt="Fork me on GitHub"/></a>
</div>
<script type="text/javascript" src="js/demo.js"></script>
</body>
</html>
-
View
168 js/demo.js
@@ -2,73 +2,155 @@
var
CONTAINER = $('#demo'),
TYPES = [
- {
+ {
title : 'Normal',
key : 'normal',
a : 'images/1_normal_a.jpg',
b : 'images/1_normal_b.jpg'
- },
- {
+ },
+ {
title : 'Transparency',
key : 'transparency',
a : 'images/2_transparentPixels_a.png',
b : 'images/2_transparentPixels_b.png'
- },
- {
+ },
+ {
title : 'Size',
key : 'size',
a : 'images/4_differentSize_a.jpg',
b : 'images/4_differentSize_b.jpg'
+ },
+ {
+ title: 'Test',
+ key: 'test',
+ a: 'upload',
+ b: 'upload'
}
];
jQuery.each(TYPES, function (index, type) {
- var
- a = new Image(),
- b = new Image(),
- node = $(
- '<div class="example '+type.key+'">' +
- '<div class="title">'+type.title+':</div>' +
- '</div>'),
- count = 0,
- html = '',
- canvas, context, c;
-
- CONTAINER.append(node);
-
- a.onload = b.onload = function () {
- count++;
+ function dragover(e){
+ e.preventDefault();
+ }
+ function drop(e){
+ e.preventDefault();
+ e.dataTransfer = e.originalEvent.dataTransfer;
+ loadImage(e.dataTransfer.files[0]);
+ }
+ function loadImage(src){
+ // Prevent any non-image file type from being read.
+ if(!src.type.match(/image.*/)){
+ console.log("The dropped file is not an image: ", src.type);
+ return;
+ }
- // Both images have loaded.
- if (count >= 2) {
- canvas = imagediff.createCanvas();
- canvas.width = 300;
- canvas.height = 300;
+ // Create our FileReader and run the results through the render function.
+ var reader = new FileReader();
+ reader.onload = function(e){
+ render(e.target.result);
+ };
+ reader.readAsDataURL(src);
+ }
+ var count_rendered = 0;
+ function render(result){
+ // add it to the DOM
+ node.append("<img class='dropped_img' src='" + result + "' />");
+ count_rendered++;
+ // increment the count
+ drop_count.html(count_rendered + " dropped image(s)");
+ if(count_rendered >= 2){
+ var first_dropped_img = $(".dropped_img").get(0);
+ var second_dropped_img = $(".dropped_img").get(1);
+ // compare them
+ var canvas = imagediff.createCanvas();
+ // set the dimensions
+ canvas.width = first_dropped_img.naturalWidth;
+ canvas.height = first_dropped_img.naturalHeight;
+ // add the css class
+ canvas.className += " big_canvas";
+ // center the canvas
+ canvas.style.marginLeft = "-" + (canvas.width / 2 - 465) + "px";
context = canvas.getContext('2d');
- c = imagediff.diff(a, b);
+ c = imagediff.diff(first_dropped_img, second_dropped_img);
context.putImageData(c, 0, 0);
+ // give some info
+ node.append("<p class='text_left clearfix result_title'>Result:</p>");
+ // show the result
node.append(canvas);
- $(canvas).wrap('<div class="image image-c"></div>');
- node.append(
- '<div class="labels">' +
- '<div class="label label-a">A</div>' +
- '<div class="separator">-</div>' +
- '<div class="label label-b">B</div>' +
- '<div class="separator">=</div>' +
- '<div class="label label-c">C</div>' +
- '</div>'
- );
+ // remove the dropbox
+ dropbox.remove();
}
- };
+ }
+ if(type.key == "test"){
+
+ var node = $(
+ '<div class="example '+type.key+'">' +
+ '<div class="title">'+type.title+':</div>' +
+ '</div>'
+ );
+
+ CONTAINER.append(node);
+
+ var dropbox = $('<div class="dropbox">Drop Images Here</div>');
+ node.append(dropbox);
+ var drop_count = $("<p id='drop_count'>0 dropped image(s)</p>");
+ node.append(drop_count);
+
+ // handle drop event
+ console.log(dropbox);
+ dropbox.bind('dragover', dragover);
+ dropbox.bind('drop', drop);
+
+ } else {
+ var
+ a = new Image(),
+ b = new Image(),
+ node = $(
+ '<div class="example '+type.key+'">' +
+ '<div class="title">'+type.title+':</div>' +
+ '</div>'),
+ count = 0,
+ html = '',
+ canvas, context, c;
+
+ CONTAINER.append(node);
+
+ a.onload = b.onload = function () {
+ count++;
+
+ // Both images have loaded.
+ if (count >= 2) {
+ canvas = imagediff.createCanvas();
+ canvas.width = 300;
+ canvas.height = 300;
+ context = canvas.getContext('2d');
+ c = imagediff.diff(a, b);
+ context.putImageData(c, 0, 0);
+ node.append(canvas);
+ $(canvas).wrap('<div class="image image-c"></div>');
+ node.append(
+ '<div class="labels">' +
+ '<div class="label label-a">A</div>' +
+ '<div class="separator">-</div>' +
+ '<div class="label label-b">B</div>' +
+ '<div class="separator">=</div>' +
+ '<div class="label label-c">C</div>' +
+ '</div>'
+ );
+ }
+ };
+
+ // only load the hrefs if they aren't to be uploaded
+ a.src = type.a;
+ b.src = type.b;
- a.src = type.a;
- b.src = type.b;
- node.append(a);
- $(a).wrap('<div class="image image-a"></div>');
- node.append(b);
- $(b).wrap('<div class="image image-b"></div>');
+ node.append(a);
+ $(a).wrap('<div class="image image-a"></div>');
+ node.append(b);
+ $(b).wrap('<div class="image image-b"></div>');
+ }
});
})(jQuery);

0 comments on commit 880a1aa

Please sign in to comment.
Something went wrong with that request. Please try again.