Resizing an image in an HTML5 canvas

So what do you do if all the browsers (actually, Chrome 5 gave me quite good one) won't give you good enough resampling quality? You implement them yourself then! Oh come on, we're entering the new age of Web 3.0, HTML5 compliant browsers, super optimized JIT javascript compilers, multi-core(†) machines, with tons of memory, what are you afraid of? Hey, there's the word java in javascript, so that should guarantee the performance, right? Behold, the thumbnail generating code:

// returns a function that calculates lanczos weightfunction lanczosCreate(lobes) {    return function(x) {        if (x > lobes)            return 0;        x *= Math.PI;        if (Math.abs(x) < 1e-16)            return 1;        var xx = x / lobes;        return Math.sin(x) * Math.sin(xx) / x / xx;    };}// elem: canvas element, img: image element, sx: scaled width, lobes: kernel radiusfunction thumbnailer(elem, img, sx, lobes) {    this.canvas = elem;    elem.width = img.width;    elem.height = img.height;    elem.style.display = "none";    this.ctx = elem.getContext("2d");    this.ctx.drawImage(img, 0, 0);    this.img = img;    this.src = this.ctx.getImageData(0, 0, img.width, img.height);    this.dest = {        width : sx,        height : Math.round(img.height * sx / img.width),    };    this.dest.data = new Array(this.dest.width * this.dest.height * 3);    this.lanczos = lanczosCreate(lobes);    this.ratio = img.width / sx;    this.rcp_ratio = 2 / this.ratio;    this.range2 = Math.ceil(this.ratio * lobes / 2);    this.cacheLanc = {};    this.center = {};    this.icenter = {};    setTimeout(this.process1, 0, this, 0);}thumbnailer.prototype.process1 = function(self, u) {    self.center.x = (u + 0.5) * self.ratio;    self.icenter.x = Math.floor(self.center.x);    for (var v = 0; v < self.dest.height; v++) {        self.center.y = (v + 0.5) * self.ratio;        self.icenter.y = Math.floor(self.center.y);        var a, r, g, b;        a = r = g = b = 0;        for (var i = self.icenter.x - self.range2; i <= self.icenter.x + self.range2; i++) {            if (i < 0 || i >= self.src.width)                continue;            var f_x = Math.floor(1000 * Math.abs(i - self.center.x));            if (!self.cacheLanc[f_x])                self.cacheLanc[f_x] = {};            for (var j = self.icenter.y - self.range2; j <= self.icenter.y + self.range2; j++) {                if (j < 0 || j >= self.src.height)                    continue;                var f_y = Math.floor(1000 * Math.abs(j - self.center.y));                if (self.cacheLanc[f_x][f_y] == undefined)                    self.cacheLanc[f_x][f_y] = self.lanczos(Math.sqrt(Math.pow(f_x * self.rcp_ratio, 2)                            + Math.pow(f_y * self.rcp_ratio, 2)) / 1000);                weight = self.cacheLanc[f_x][f_y];                if (weight > 0) {                    var idx = (j * self.src.width + i) * 4;                    a += weight;                    r += weight * self.src.data[idx];                    g += weight * self.src.data[idx + 1];                    b += weight * self.src.data[idx + 2];                }            }        }        var idx = (v * self.dest.width + u) * 3;        self.dest.data[idx] = r / a;        self.dest.data[idx + 1] = g / a;        self.dest.data[idx + 2] = b / a;    }    if (++u < self.dest.width)        setTimeout(self.process1, 0, self, u);    else        setTimeout(self.process2, 0, self);};thumbnailer.prototype.process2 = function(self) {    self.canvas.width = self.dest.width;    self.canvas.height = self.dest.height;    self.ctx.drawImage(self.img, 0, 0, self.dest.width, self.dest.height);    self.src = self.ctx.getImageData(0, 0, self.dest.width, self.dest.height);    var idx, idx2;    for (var i = 0; i < self.dest.width; i++) {        for (var j = 0; j < self.dest.height; j++) {            idx = (j * self.dest.width + i) * 3;            idx2 = (j * self.dest.width + i) * 4;            self.src.data[idx2] = self.dest.data[idx];            self.src.data[idx2 + 1] = self.dest.data[idx + 1];            self.src.data[idx2 + 2] = self.dest.data[idx + 2];        }    }    self.ctx.putImageData(self.src, 0, 0);    self.canvas.style.display = "block";};

...with which you can produce results like these!

so anyway, here is a 'fixed' version of your example:

img.onload = function() {    var canvas = document.createElement("canvas");    new thumbnailer(canvas, img, 188, 3); //this produces lanczos3    // but feel free to raise it up to 8. Your client will appreciate    // that the program makes full use of his machine.    document.body.appendChild(canvas);};

Now it's time to pit your best browsers out there and see which one will least likely increase your client's blood pressure!

Umm, where's my sarcasm tag?

(since many parts of the code is based on Anrieff Gallery Generator is it also covered under GPL2? I don't know)

† actually due to limitation of javascript, multi-core is not supported.

Fast image resize/resample algorithm using Hermite filter with JavaScript. Support transparency, gives good quality. Preview:

Update: version 2.0 added on GitHub (faster, web workers + transferable objects). Finally i got it working!

Git: https://github.com/viliusle/Hermite-resize
Demo: http://viliusle.github.io/miniPaint/

/** * Hermite resize - fast image resize/resample using Hermite filter. 1 cpu version! *  * @param {HtmlElement} canvas * @param {int} width * @param {int} height * @param {boolean} resize_canvas if true, canvas will be resized. Optional. */function resample_single(canvas, width, height, resize_canvas) {    var width_source = canvas.width;    var height_source = canvas.height;    width = Math.round(width);    height = Math.round(height);    var ratio_w = width_source / width;    var ratio_h = height_source / height;    var ratio_w_half = Math.ceil(ratio_w / 2);    var ratio_h_half = Math.ceil(ratio_h / 2);    var ctx = canvas.getContext("2d");    var img = ctx.getImageData(0, 0, width_source, height_source);    var img2 = ctx.createImageData(width, height);    var data = img.data;    var data2 = img2.data;    for (var j = 0; j < height; j++) {        for (var i = 0; i < width; i++) {            var x2 = (i + j * width) * 4;            var weight = 0;            var weights = 0;            var weights_alpha = 0;            var gx_r = 0;            var gx_g = 0;            var gx_b = 0;            var gx_a = 0;            var center_y = (j + 0.5) * ratio_h;            var yy_start = Math.floor(j * ratio_h);            var yy_stop = Math.ceil((j + 1) * ratio_h);            for (var yy = yy_start; yy < yy_stop; yy++) {                var dy = Math.abs(center_y - (yy + 0.5)) / ratio_h_half;                var center_x = (i + 0.5) * ratio_w;                var w0 = dy * dy; //pre-calc part of w                var xx_start = Math.floor(i * ratio_w);                var xx_stop = Math.ceil((i + 1) * ratio_w);                for (var xx = xx_start; xx < xx_stop; xx++) {                    var dx = Math.abs(center_x - (xx + 0.5)) / ratio_w_half;                    var w = Math.sqrt(w0 + dx * dx);                    if (w >= 1) {                        //pixel too far                        continue;                    }                    //hermite filter                    weight = 2 * w * w * w - 3 * w * w + 1;                    var pos_x = 4 * (xx + yy * width_source);                    //alpha                    gx_a += weight * data[pos_x + 3];                    weights_alpha += weight;                    //colors                    if (data[pos_x + 3] < 255)                        weight = weight * data[pos_x + 3] / 250;                    gx_r += weight * data[pos_x];                    gx_g += weight * data[pos_x + 1];                    gx_b += weight * data[pos_x + 2];                    weights += weight;                }            }            data2[x2] = gx_r / weights;            data2[x2 + 1] = gx_g / weights;            data2[x2 + 2] = gx_b / weights;            data2[x2 + 3] = gx_a / weights_alpha;        }    }    //clear and resize canvas    if (resize_canvas === true) {        canvas.width = width;        canvas.height = height;    } else {        ctx.clearRect(0, 0, width_source, height_source);    }    //draw    ctx.putImageData(img2, 0, 0);}

Try pica - that's a highly optimized resizer with selectable algorythms. See demo.

For example, original image from first post is resized in 120ms with Lanczos filter and 3px window or 60ms with Box filter and 0.5px window. For huge 17mb image 5000x3000px resize takes ~1s on desktop and 3s on mobile.

All resize principles were described very well in this thread, and pica does not add rocket science. But it's optimized very well for modern JIT-s, and is ready to use out of box (via npm or bower). Also, it use webworkers when available to avoid interface freezes.

I also plan to add unsharp mask support soon, because it's very useful after downscale.