<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<meta name="viewport" content="user-scalable=no, width=400, initial-scale=1, maximum-scale=1" />

<meta name="apple-mobile-web-app-capable" content="yes" />

<meta name="apple-mobile-web-app-status-bar-style" content="yes" />

<meta name="format-detection" content="email=no" />

<meta name="HandheldFriendly" content="true" />

<title>FileAPI :: Thumbnails :: example</title>

<script>

// Settings

var FileAPI = {

debug: true // debug mode

, staticPath: '../dist/'

};

</script>

<script src="../dist/FileAPI.js"></script>

<script src="../plugins/FileAPI.exif.js"></script>

<link rel="stylesheet" href="toolkit.css"/>

<style>

body {

font-size: 15px;

font-family: "Helvetica Neue";

}

.thumb {

float: left;

border: 2px solid #ccc;

margin: 10px;

padding: 2px;

position: relative;

line-height: 0;

z-index: -1;

}

.thumb label {

color: #fff;

text-align: center;

text-shadow: 0 1px 1px #000;

font-weight: bold;

top: 45%;

left: 0;

right: 0;

position: absolute;

}

/* IE9/IE8 required */

.js-fileapi-wrapper { position: relative; }

.js-fileapi-wrapper input {

top: -10px;

right: -40px;

z-index: 2;

position: absolute;

cursor: pointer;

opacity: 0;

width: auto;

height: auto;

filter: alpha(opacity=0);

font-size: 50px;

}

</style>

<div style="left: 0; right: 0; bottom: 0; position: fixed; box-shadow: 0 0 5px rgba(0,0,0,.65); background-color: #f3f3f3;">

<div style="padding: 5px 10px 10px">

<a href="../">&larr; index</a> |

<a href="./demo.html">demo</a> -

<a href="./userpic.html">userpic</a> -

<b>thumbnails</b> -

<a href="./watermark.html">watermark</a> -

<a href="./webcam.html">webcam</a> -

<a href="./caman.html">caman.js</a>

</div>

</div>

<div class="body">

<h2>Thumbnails</h2>

<div style="text-align: center">

<div class="js-fileapi-wrapper">

<label for="browse" class="btn">Select photo (min 480x320)</label>

<input id="browse" type="file" accept="image/*"/>

</div>

<div id="loading" class="loader" style="display: none; position: absolute; left: 45%; top: 30%"></div>

<div id="thumbnails" style="margin-top: 30px;"></div>

<div style="clear: both">&nbsp;<br/><br/><br/></div>

</div>

</div>

<script>

(function (){

var processing = false;

if( !(FileAPI.support.html5 || FileAPI.support.flash) ){

alert('Ooops, your browser does not support Flash and HTML5 :[');

}

function thumb(file, width, height, type){

var image = FileAPI.Image(file), label = width+'x'+height, callback;

if( type ){

label += ' ('+type+')';

image.resize(width, height, type);

} else if( width ){

image.preview(width, height);

} else {

label = 'original';

}

image.get(function (err, img){

var el = document.createElement('div');

el.innerHTML = '<label>'+label+'</label>';

el.className = 'thumb';

el.appendChild(img);

thumbnails.appendChild(el);

callback && callback();

});

return function (then){ callback = then; };

}

FileAPI.event.on(browse, 'change', function (evt){

var file = FileAPI.getFiles(evt)[0];

!processing && FileAPI.getInfo(file, function (err, info){

if( info.width >= 480 && info.height >= 320 ){

processing = true;

thumbnails.innerHTML = ''; // clear

loading.style.display = '';

// 100x100

thumb(file, 100, 100)(function (){

// 320x240

thumb(file, 320, 240)(function (){

// 480x320 by min side

thumb(file, 480, 320, 'min')(function (){

// 480x320 by max side

thumb(file, 480, 320, 'max')(function (){

// Original

thumb(file);

processing = false;

loading.style.display = 'none';

});

});

});

});

}

else {

alert('Does not fit, you need more than: '+info.width+'x'+info.height);

}

});

});

})();

</script>