diff --git a/canvasthumber.js b/canvasthumber.js
new file mode 100644
index 0000000..0d9934f
--- /dev/null
+++ b/canvasthumber.js
@@ -0,0 +1,110 @@
+/*
+ canvasthumber by Christian Heilmann
+ Version: 1.0
+ Homepage: http://thewebrocks/demos/canvasthumber
+ Copyright (c) 2012, Christian Heilmann
+ Code licensed under the BSD License:
+ http://wait-till-i.com/license.txt
+*/
+(function(){
+ var s = document.querySelector( '#dropzone' ),
+ o = document.querySelector( 'output' ),
+ c = document.createElement( 'canvas' ),
+ cr = document.querySelector( '#crop' ),
+ j = document.querySelector( '#jpeg' ),
+ cx = c.getContext( '2d' ),
+ thumbwidth = thumbheight = 100;
+ function init() {
+ if (typeof FileReader !== 'undefined' ) {
+ document.body.classList.add( 'dragdrop' );
+ s.innerHTML = 'Drop images here';
+ cr.addEventListener( 'click', function ( evt ) {
+ document.body.classList.toggle( 'cropon' );
+ }, false );
+ j.addEventListener( 'click', function ( evt ) {
+ document.body.classList.toggle( 'jpegon' );
+ }, false );
+ o.addEventListener( 'click', function ( evt ) {
+ var t = evt.target;
+ if ( t.tagName === 'IMG' ) {
+ t.parentNode.removeChild( t );
+ }
+ }, false );
+ s.addEventListener( 'dragover', function ( evt ) {
+ evt.preventDefault();
+ }, false );
+ s.addEventListener( 'drop', getfiles, false );
+ }
+ };
+ function getfiles( ev ) {
+ var files = ev.dataTransfer.files;
+ if ( files.length > 0 ) {
+ var i = files.length;
+ while ( i-- ) {
+ var file = files[ i ];
+ if ( file.type.indexOf( 'image' ) === -1 ) { continue; }
+ var reader = new FileReader();
+ reader.readAsDataURL( file );
+ reader.onload = function ( ev ) {
+ var img = new Image();
+ img.src = ev.target.result;
+ img.onload = function() {
+ imagetocanvas(this);
+ addtothumbslist();
+ };
+ };
+ }
+ }
+ ev.preventDefault();
+ };
+ function addtothumbslist() {
+ var thumb = new Image(),
+ url = '',
+ jpeg = document.querySelector( '#jpeg' ).checked,
+ qu = document.querySelector( '#quality ').value / 100;
+ if ( jpeg ) {
+ url = c.toDataURL( 'image/jpeg' , qu );
+ } else {
+ url = c.toDataURL();
+ }
+ thumb.src = url;
+ thumb.title = Math.round( url.length / 1000 * 100 ) / 100 + ' KB';
+ o.appendChild( thumb );
+ };
+ function imagetocanvas(img) {
+ thumbwidth = document.querySelector('#width').value || 100;
+ thumbheight = document.querySelector('#height').value || 100;
+ c.width = thumbwidth;
+ c.height = thumbheight;
+ var dims = resize( img.width, img.height, thumbwidth, thumbheight );
+ if ( document.querySelector( '#crop' ).checked ) {
+ c.width = dims.w;
+ c.height = dims.h;
+ dims.x = 0;
+ dims.y = 0;
+ }
+ var bg = document.querySelector( '#bg' ).value;
+ if ( bg !== 'transparent' ) {
+ cx.fillStyle = bg;
+ cx.fillRect ( 0, 0, thumbwidth, thumbheight );
+ }
+ cx.drawImage( img, dims.x, dims.y, dims.w, dims.h );
+ };
+ function resize( imagewidth, imageheight, thumbwidth, thumbheight ) {
+ var w = 0, h = 0, x = 0, y = 0,
+ widthratio = imagewidth / thumbwidth,
+ heightratio = imageheight / thumbheight,
+ maxratio = Math.max( widthratio, heightratio );
+ if ( maxratio > 1 ) {
+ w = imagewidth / maxratio;
+ h = imageheight / maxratio;
+ } else {
+ w = imagewidth;
+ h = imageheight;
+ }
+ x = ( thumbwidth - w ) / 2;
+ y = ( thumbheight - h ) / 2;
+ return { w:w, h:h, x:x, y:y };
+ };
+ init();
+})();
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..4c533d4
--- /dev/null
+++ b/index.html
@@ -0,0 +1,40 @@
+
+
+
+
+ Thumbnail generator using HTML5 Canvas and FileReader
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..4e8a241
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,107 @@
+* {
+ margin: 0;
+ padding: 0;
+}
+body {
+ font-size: 15px;
+ font-family: helvetica, arial, sans-serif;
+ padding: 2em;
+}
+footer, section, output, header, aside, figure {
+ display: block;
+}
+h1 {
+ font-size: 24px;
+ padding-bottom: 10px;
+}
+.dragdrop #dropzone {
+ width: 250px;
+ height: 250px;
+ border-radius: 10px;
+ border: 2px dotted #393;
+ background: #cfc;
+ color: #393;
+ text-align: center;
+ line-height: 200px;
+ float: left;
+ margin-right: 10px;
+}
+.dragdrop output {
+ width: 520px;
+ display: block;
+ float: left
+}
+output img {
+ margin: 5px;
+ display: block;
+ float: left;
+}
+footer {
+ clear:both;
+}
+section, header, footer {
+ width: 800px;
+}
+input[type=number] { width: 3em; }
+input[type=checkbox] { margin-right: 10px }
+label {
+ padding-right: 10px;
+ font-weight: bold;
+}
+#bg {
+ width: 5em;
+}
+.jpeg {
+ opacity: 0.2;
+ -webkit-transition: 1s;
+ -moz-transition: 1s;
+ -ms-transition: 1s;
+ -o-transition: 1s;
+ transition: 1s;
+}
+.crop {
+ opacity: 1;
+ -webkit-transition: 1s;
+ -moz-transition: 1s;
+ -ms-transition: 1s;
+ -o-transition: 1s;
+ transition: 1s;
+}
+.cropon .crop {
+ opacity: 0.2;
+}
+.jpegon .jpeg {
+ opacity: 1;
+}
+.options {
+ background: #060;
+ color: #fff;
+ border-radius: 5px;
+ margin: 1em 0;
+ padding: 5px 10px;
+ box-shadow: 4px 4px 10px rgba(0,0,0,0.8);
+}
+h1 {
+ text-transform: uppercase;
+ color: #333;
+ letter-spacing: -1px;
+}
+output img {
+ display:block;
+}
+output img:hover {
+ box-shadow: 0 0 5px 5px #ccc;
+ border: 1px solid #999;
+}
+h2 {
+ font-size: 12px;
+}
+footer {
+ clear: both;
+ text-align: right;
+ padding: 50px 0 20px 0;
+ font-size: 12px;
+}
+footer a {
+ color: #000;
+}