adding to github

softwareengineer99 · Feb 1, 2012 · a13bc46 · a13bc46
1 parent 862d45c
commit a13bc46
Show file tree

Hide file tree

Showing 3 changed files with 257 additions and 0 deletions.
diff --git a/canvasthumber.js 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
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Thumbnail generator using HTML5 Canvas and FileReader</title>
+  <meta type="description" content="Batch generate thumbnails by dropping them into the page.">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <link rel="stylesheet" href="styles.css" type="text/css">
+</head>
+<body>
+  <header>
+    <h1>Thumbnail generator</h1>
+    <p>Generate thumbnails in your browser. Simply choose your thumbnail properties and drag and drop images onto the field below.</p>
+  </header>
+  <section>
+  <form>
+  <div class="options">
+   <label for="width">Width:</label><input id="width" type="number" name="width" value="100">
+  <label for="height">Height:</label><input id="height"  type="number"  name="height" value="100">
+  <input type="checkbox" id="crop"><label for="crop">crop thumbnail</label>
+    <span class="crop"><label for="bg">background:</label><input type="text" value="white" id="bg"></span>
+    <input type="checkbox" id="jpeg">
+    <label for="jpeg">JPG</label>
+    <span class="jpeg"><label for="quality">Quality</label>
+    <input type="number" max="100" min="0" value="50" id="quality"> %</span>
+  </div>
+  <div id="dropzone">This demo needs a canvas and FileReader capable browser
+</div>
+  </form>
+  <output><h2>Thumbnails (click to remove, hover to see filesize)</h2></output>
+  </section>
+  <footer>
+    <p>Written by 
+    <a href="http://christianheilmann.com/">Chris Heilmann</a> 
+    (<a href="http://twitter.com/codepo8">@codepo8</a>)
+  </p>
+</footer>
+<script src="canvasthumber.js"></script>
+</body>
+</html>
diff --git a/styles.css 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;
+}