html5图像调整大小,JavaScript调整HTML5画布中图像的大小

因此，如果所有浏览器(实际上，Chrome 5给我提供了一个不错的浏览器)都无法为你提供足够好的重采样质量，你该怎么办？然后，你自己实现它们！哦，来吧，我们正在进入Web 3.0的新时代，符合HTML5的浏览器，超级优化的JIT javascript编译器，具有大量内存的多核(†)机器，你担心什么javascript中有java一词，因此应该保证性能，对吗？看一下，缩略图生成代码：

// 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.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";

};

…你可以用它产生这样的结果！

因此，无论如何，这是示例的“固定”版本：

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);

};

现在是时候让最好的浏览器进站了，看看哪种浏览器最有可能增加客户