playground
/
Resemble.js
mirror of https://github.com/Huddle/Resemble.js.git
1
0
Fork 0
Code Issues Releases Activity
Browse Source

Added images for compare example

pull/6/merge
James Cryer 12 years ago
parent
50c1cdab67
commit
6d499c4a7c
7 changed files with 46 additions and 71 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      LICENSE
  2. BIN
      demoassets/People.jpg
  3. BIN
      demoassets/People2.jpg
  4. 36
      demoassets/main.js
  5. 2
      demoassets/resemble.css
  6. 10
      index.html
  7. 67
      resemble.css

2
LICENSE
Unescape View File

@ -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 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 this software and associated documentation files (the “Software”), to deal in

BIN
demoassets/People.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 35 KiB

BIN
demoassets/People2.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 29 KiB

36
demoassets/main.js
Unescape View File

@ -81,6 +81,7 @@ $(function(){
var file2; var file2;
var resembleControl; var resembleControl;
dropZone($('#dropzone1'), function(file){ dropZone($('#dropzone1'), function(file){
console.log(file);
file1 = file; file1 = file;
if(file2){ if(file2){
resembleControl = resemble(file).compareTo(file2).onComplete(onComplete); 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('<img src="demoassets/people.jpg"/>');
$('#dropzone2').html('<img src="demoassets/people2.jpg"/>');
$.when(done, dtwo).done(function(file, file1){
resembleControl = resemble(file).compareTo(file1).onComplete(onComplete);
});
return false;
});
}());
}); });

2
demoassets/resemble.css
Unescape View File

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

10
index.html
Unescape View File

@ -7,7 +7,7 @@
<meta name="description" content=""> <meta name="description" content="">
<meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="libs/twitter-bootstrap/bootstrap.min.css"> <link rel="stylesheet" href="libs/twitter-bootstrap/bootstrap.min.css">
<link rel="stylesheet" href="demoassets/resemble.css"> <link rel="stylesheet" href="demoassets/resemble.css?v1">
</head> </head>
<body> <body>
<div class="container"> <div class="container">
@ -77,6 +77,9 @@
<p> <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! 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> </p>
<p>
Don't have any images to compare? <button class="btn" id="example-images">Use example images</button>
</p>
<div id="image-diff" class="small-drop-zone"> <div id="image-diff" class="small-drop-zone">
Diff will appear here. Diff will appear here.
</div> </div>
@ -154,7 +157,10 @@ resemble(file).compareTo(file2).onComplete(function(){
<footer class="footer"> <footer class="footer">
<p> <p>
Created by <a href="https://github.com/jamescryer" target="_blank">James Cryer</a> and the Huddle development team. Created by <a href="https://github.com/jamescryer" target="_blank">James Cryer</a> and the Huddle development team.
</p>
<p>
The image used in the comparison example was created by <a href="https://twitter.com/Shadowise" target="_blank">Daniel Rajendran</a>
</p> </p>
</footer> </footer>
</div> </div>

67
resemble.css
Unescape View File

@ -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;
}
Write Preview
Loading…
Cancel
Save