html在画布中加载图片大小,调整HTML 5画布中的图像大小

那么，如果所有的浏览器(实际上，Chrome 5给了我相当好的浏览器)都不能给你足够好的重采样质量，你会怎么做？你自己动手吧！得了吧，我们正在进入Web3.0，符合HTML 5的浏览器，超级优化的JITjavascript编译器，多核(†)机器，拥有大量内存的新时代，你害怕什么？嘿，javascript中有java这个词，所以这能保证性能，对吧？请看，缩略图生成代码：// returns a function that calculates lanczos weightfunction lanczosCreate(lobes) {

return function(x) {

if (x > lobes)

return 0;

x *= Math.PI;

if (Math.abs(x) 

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.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 = 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 = 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 

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 

for (var j = 0; 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);};

现在是时候让你最好的浏览器，看看哪一个最不可能增加你的客户的血压！

我的讽刺标签呢？

(因为代码的许多部分是基于Anrieff阶梯发生器它是否也包括在GPL 2中？我不知道)

† 实际上，由于javascript的限制，不支持多核。