You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
155 lines
4.4 KiB
155 lines
4.4 KiB
<!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 right. 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/> |
|
<p id="diff-results" style="display:none;"> |
|
<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 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>How does it work?</h2> |
|
<p> |
|
Dark magic. |
|
</p> |
|
<p> |
|
<br/> |
|
<a class="btn btn-large btn-primary" href="#"><strong>View project on Github</strong></a> |
|
</p> |
|
</div> |
|
<div class="span6"> |
|
<h2>How can I use it?</h2> |
|
<p>Invoke Resemble on an image or canvas image to extract data</p> |
|
<pre> |
|
var data = resemble('img').onComplete(function(data){ |
|
return data; |
|
}); |
|
/* |
|
{ |
|
red: 255, |
|
green: 255, |
|
blue: 255, |
|
brightness: 255 |
|
} |
|
*/</pre> |
|
<p>Use resemble to compare two image</p> |
|
<pre> |
|
resemble(file).compareTo(file2).onComplete(function(){ |
|
return data; |
|
}); |
|
/* |
|
{ |
|
misMatchPercentage : 100, // % |
|
isSameDimensions: true, // or false |
|
imageDiffFileData: {} // dataUrl of image as png |
|
} |
|
*/</pre> |
|
</div> |
|
</div> |
|
</section> |
|
|
|
<footer class="footer"> |
|
<p> |
|
Footer message |
|
</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> |