Question

Lanczos3 in JavaScript for resizing an image?
I saw a thread back on stackoverflow, where there where people talking about using Lanczos3 to resize an image in JavaScript currently, I am trying to do this and I am using webworkers and canvas from HTML5 but the image takes around 7 to 15 seconds to load. Is there a better way to do this?

Answer 1

```
var data, srcdata, width, height, srcheight, srcwidth;
onmessage = function(event)
{
this.src = event.data.imageData;
this.dest = event.data.imageDataNew
this.lanczos = lanczosCreate(event.data.lobes);
this.ratio = event.data.imageData.width / event.data.width;
this.rcp_ratio = 2 / this.ratio;
this.range2 = Math.ceil(this.ratio * event.data.lobes / 2);
this.cacheLanc = {};
this.center = {};
this.icenter = {};
data = self.dest.data;
width = self.dest.width;
height = Math.round(event.data.imageData.height * self.dest.width / event.data.imageData.width);
srcdata = self.src.data;
srcheight = event.data.imageData.height;
srcwidth = event.data.imageData.width;
srcdata = self.src.data;
processOne(this, 0);
}

function 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;
}
}

function processOne(self, u)
{
self.center.x = (u + 0.5) * self.ratio;
self.icenter.x = Math.floor(self.center.x);
for (var v = 0; v < 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 >= srcwidth) 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 >= srcheight) 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 * srcwidth + i) * 4;
a += weight;
r += weight * srcdata[idx];
g += weight * srcdata[idx + 1];
b += weight * srcdata[idx + 2];
}
}
}
var idx = (v * width + u) * 4;
data[idx] = r / a;
data[idx + 1] = g / a;
data[idx + 2] = b / a;
data[idx + 4] = a;
}
if (++u < width) processOne(self, u);
else
{
self.dest.data = data;
postMessage(
{
'imageData': self.dest
});
}
}
```

Answer 2

@dumbsearch2
@wio

Answer 3

Is there any reason for not using a server language and loading the changes dynamically with AJAX?

Answer 4

Of course not, I just wanted to mess around with HTML5 Web Workers and canvas. From my experiments, I haven't found Web Workers all that useful, I was wonder if someone had anything else to add, before I closed my book and move on.

Also, I'm trying to quit using AJAX unless there is a definite benefit of using it. I've started to get hooked on Node.js (In fact, I have a project somewhat like this using npm and Node to prerender images, it's quite neat).

Answer 5

alright, so you prefer sockets?

Answer 6

Mhm.

Answer 7

It is not that I, "prefer" it is that I just want to experiment a little into unsoiled lands.

Answer 8

How do you expect to improve it?

Answer 9

I don't see much that I can improve, partly because I am using JavaScript. I was just wondering if anyone else would have done it differently?