HTML5 Client-Side Image Resize

published on March 13, 2012 in technical

Not such a long time ago I started reading the Smashing Book #3 and an idea crossed my mind while enjoying Christian Heilmann's chapter on Javascript. So, I put the idea into code, and here it is.

1. Example

First, let us create an HTML5 document:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>Choose an image and see the magic!</p>
<br/>
<input id="choose" type="file">
<br/>
<canvas id="manipulate" width="730" height="300"></canvas>
</body>
</html>

Now, let us add the Javascript code to the page:

<script>
"use strict"

var image = function() {
    this.file_name = 'somepic.jpg';
    this.handle_images = function(element) {
        var list = element.files;
        var self = this;
        for(var i=0;i<list.length;i++) {
            var img = new Image;
            var reader = new FileReader();
            var canvas = document.getElementById("manipulate");
            var context = canvas.getContext("2d");

            context.clearRect(0, 0, canvas.width, canvas.height);
            var w = canvas.width;
            canvas.width = 1;
            canvas.width = w;

            reader.onload = function(e) {
                img.src = e.target.result;
                img.onload = function() {
                    self.original_width = img.width;
                    self.original_height = img.height;

                    self.max_width = 730;
                    self.max_height = 300;

                    var new_width = img.width /
                        (self.original_height / self.max_height);
                    self.dx = (self.max_width - new_width) / 2;
                    self.dy = 0;

                    img.height = self.max_height;
                    img.width = new_width;

                    self.width = img.width;
                    self.height = img.height;

                    context.drawImage(img, self.dx, self.dy,
                        img.width, img.height);
                };
            }
            reader.readAsDataURL(list[i]);
        }
    }
}

if (!f) {
    var f = {};
}

window.onload = function() {
    f.image = new image;

    var file = document.getElementById("choose");
    file.addEventListener("change", function () {
        f.image.handle_images(file);
    }, false);

}
</script>

This code lets you chose an image, resizes it to a fixed size (you may find that in the code), then displays it in a canvas element. The most important thing here is that there is no server-side code implied in this process.

2. Possible Usages

There might be many ways of using this HTML5 greatness, but the most important I can think of is webapps, where the user might need to be able to several things client-side, without sending anything to the server. Images could even be cached in some kind of local storage.

3. Try It

I put together an example here, check it out if you wish. It works in the latest stable Google Chrome and Firefox. iOS has no support for upploading in webpages, so this does not work on Apple gadgets.