Poor Resampling Quality

[JohnCLo]

Hi,

It seems on resize the image quality becomes very poor, this is not a plugin specific issue but more of a canvas issue. Perhaps the following could somehow be included as a custom resampling quality similar to (http://stackoverflow.com/questions/2303690/resizing-an-image-in-an-html5-canvas) in order to improve image quality when resized. I think it would be a great addition to an already great plugin!

//returns a function that calculates lanczos weight 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; } }

//elem: canvas element, img: image element, sx: scaled width, lobes: kernel radius function 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.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"; }

/==============================================================/ 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); }

Best Regards

[goker-dev]

thanks, I'll work on it at next week.

[rothanachoun]

@gokercebeci did you implement this yet? I'm looking this functionality.

[goker-dev]

I'm so busy with school. I can try to implement next week.

On Wednesday, April 23, 2014, Rothana Choun notifications@github.com wrote:

@gokercebeci https://github.com/gokercebeci did you implement this yet? I'm looking this functionality.

— Reply to this email directly or view it on GitHubhttps://github.com/gokercebeci/canvasResize/issues/2#issuecomment-41130979 .

goker.cebeci http://gokercebeci.com - http://goker.in

[rothanachoun]

@gokercebeci I'm waiting, Thanks you !

[alexcroox]

+1, there is some good discussion here

http://stackoverflow.com/questions/2303690/resizing-an-image-in-an-html5-canvas