POC: Drag onto page, thumbnail generation

Using jQuery to handle files being dropped on to a destination. Images are then resized using a canvas element.

by Adam Patridge

HTML

<div class="drag-destination">
    <p>Drag file(s) here</p>
</div>
<ul id="results">
</ul>
<script id="result-template" type="text/x-jquery-tmpl">
    <li>
        <p>Filename: {{:name}}</p>
        <p>Type: {{:type}}</p>
        <p>Size: {{:size}}</p>
        <p><a href="#" class="show-original">[view original (browser-scaled)]</a></p>
        <div class="original-container"><img src="{{:fullSizeDataUrl}}" alt="{{:name}}"/></div>
        <p><a href="#" class="show-thumbnail">[view thumbnail (resized with canvas)]</a></p>
        <div class="thumbnail-container"><img src="{{:thumbnailDataUrl}}" alt="{{:name}}"/></div>
    </li>
</script>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://dl.dropbox.com/u/6593594/cdn/jsrender.20120516.v10pre.min.js"></script>

CSS

.drag-destination { border: 1px solid #000; }
.dragover { border: 1px solid #f00; }
#results li { border-bottom: 1px solid #000; }
.thumbnail-container, .original-container { display: none; max-width: 100px; }
.thumbnail-container img, .original-container img { width: 100%; }

JavaScript

/*global window, document, Image, alert, FileReader, jQuery, $*/
(function ($) {
    "use strict";
    $.localImageFun = {};
    $.localImageFun.getResizedDataUrl = function (dataUrl, maxWidth) {
        return $.Deferred(function (dfd) {
            var canvas, ctx, img, imgLoadHandler;
            img = new Image();
            imgLoadHandler = function () {
                var newRatio;
                newRatio = 1;
                if (img.width > maxWidth/* || img.height > maxWidth*/) {
                    //if (img.width > img.height) {
                        newRatio = maxWidth / img.width;
                    //} else {
                    //    newRatio = maxWidth / img.height;
                    //}
                }
                canvas = document.createElement("canvas");
                canvas.width = img.width * newRatio;
                canvas.height = img.height * newRatio;
                ctx = canvas.getContext("2d");
                ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, canvas.width, canvas.height);
                try {
                    dfd.resolve(canvas.toDataURL());
                } catch (e) {
                    dfd.reject(e);
                }
            };
            img.onload = imgLoadHandler;
            try {
                img.src = dataUrl;
                if (img.complete) {
                    // Triggers when loaded from browser cache.
                    imgLoadHandler();
                }
            } catch (e) {
                dfd.reject(e);
            }
        }).promise();
    };
    $.localImageFun.getFullSizeDataUrl = function (dataTransferFile) {
        return $.Deferred(function (dfd) {
            var fileReader;
            if (!window.FileReader) {
                dfd.reject();
            }
            fileReader = new FileReader();
            if (fileReader.readAsDataURL) {
                fileReader.onload = function (e) {
                    dfd.resolve(e.target.result);
          ...