This plugin is dead simple. It takes your large image and gives you back a proportionally downscaled one as a dataURL object. Works fine in both Chrome and Firefox, not so fine in Opera (‘onload’ event doesn’t fire as it should and I have no idea why, seems to be a “known bug”), and doesn’t work in IE (it may work in IE10 though, but I couldn’t …

gistfile1.js

var Resizer = function() {
 
        var maxWidth = 0, maxHeight = 0;
        var canvas = document.createElement('canvas');
        var img = new Image();
        var callback;

        var isFileOk = function(file) {
            if (!file || !file.type.match(/image.*/)) {
                return false;
            };
            return true;
        }
 
        img.onload = function() {
            var dimensions = getResizedDimensions(img.width, img.height);
            canvas.width = dimensions.width;
            canvas.height = dimensions.height;
            var ctx = canvas.getContext('2d');
            ctx.drawImage(img, 0, 0, dimensions.width, dimensions.height);
            if (callback) {
                callback(canvas.toDataURL());
                img.src = '';
                ctx.clearRect(0, 0, canvas.width, canvas.height);
            }                  
        }
        if (window.opera) {             // so it works in Opera...
            img.onerror = img.onload; // ლ(ಠ益ಠლ) BUT AT WHAT COST?!
        }          
        
        var createObjectURL = function (file) {
                if (window.webkitURL) {
                    return window.webkitURL.createObjectURL(file);
                } else if (window.URL && window.URL.createObjectURL) {
                            return window.URL.createObjectURL(file);
                        } else {
                            return null;
                }
        }
 
        var getResizedDimensions = function(initW, initH) {
                var resizedWidth = maxWidth,
                    resizedHeight = maxHeight,
                    initialWidth = initW,
                    initialHeight = initH;
                if (initialWidth <= maxWidth && initialHeight <= maxHeight) {
                    resizedWidth = initialWidth;
                    resizedHeight = initialHeight;
                } else {
                    if (initialWidth < initialHeight) {
                        var calcWidth = initialWidth * resizedHeight / initialHeight;
                        if (calcWidth <= maxWidth) {
                            resizedWidth = calcWidth;
                        } else {
                            resizedHeight = resizedHeight * resizedWidth / calcWidth;
                        }
                    } else {
                        if (initialWidth > initialHeight) {
                            var calcHeight = initialHeight * resizedWidth / initialWidth;
                            if (calcHeight <= maxHeight) {
                                resizedHeight = calcHeight;
                            } else {
                                resizedWidth = resizedWidth * resizedHeight / calcHeight;
                            }
                        } else {
                            resizedWidth = Math.Min(maxHeight, maxWidth);
                            resizedHeight = resizedWidth;
                        }
                    }
                }
                return {
                    width: resizedWidth,
                    height: resizedHeight
                }
            }
 
        return {
            scale: function(file, width, height, action) {
                if (!isFileOk(file)) {
                    return;
                }
                maxWidth = width;
                maxHeight = height;
                callback = action;
                img.src = createObjectURL(file);
            },
        }
    }

Usage:

var resizer = new Resizer();
var img = document.getElementById('thumbnail');
var file = document.getElementById('inputElementWithImage').files[0];
var callback = function(scaledImg) {
    img.src = scaledImg;
}

resizer.scale(file, 320, 240, callback)