gpt4 book ai didi

javascript - 调整 HTML5 Canvas 中图像的大小

转载 作者:行者123 更新时间:2023-11-28 05:13:46 25 4
gpt4 key购买 nike

我正在尝试使用 javascript 和 canvas 元素在客户端创建缩略图,但是当我缩小图像时,它看起来很糟糕。看起来好像是在 Photoshop 中缩小了尺寸,并将重采样设置为“最近邻”而不是双三次。我知道有可能让它看起来正确,因为 this site使用 Canvas 也可以做得很好。我尝试使用与“[Source]”链接中所示相同的代码,但它看起来仍然很糟糕。我是否缺少某些东西,需要设置某些设置或其他什么?

编辑:

我正在尝试调整 jpg 的大小。我尝试在链接网站和 Photoshop 中调整相同 jpg 的大小,缩小后看起来不错。

相关代码如下:

reader.onloadend = function(e)
{
var img = new Image();
var ctx = canvas.getContext("2d");
var canvasCopy = document.createElement("canvas");
var copyContext = canvasCopy.getContext("2d");

img.onload = function()
{
var ratio = 1;

if(img.width > maxWidth)
ratio = maxWidth / img.width;
else if(img.height > maxHeight)
ratio = maxHeight / img.height;

canvasCopy.width = img.width;
canvasCopy.height = img.height;
copyContext.drawImage(img, 0, 0);

canvas.width = img.width * ratio;
canvas.height = img.height * ratio;
ctx.drawImage(canvasCopy, 0, 0, canvasCopy.width, canvasCopy.height, 0, 0, canvas.width, canvas.height);
};

img.src = reader.result;
}

编辑2:

看来我错了,链接的网站在缩小图像尺寸方面并没有做得更好。我尝试了建议的其他方法,但没有一个看起来更好。这是不同方法的结果:

Photoshop:

alt text

Canvas :

alt text

带有图像渲染的图像:optimizeQuality 设置并按宽度/高度缩放:

alt text

具有图像渲染的图像:使用 -moz-transform 设置和缩放优化质量:

alt text

在 pixastic 上调整 Canvas 大小:

alt text

我想这意味着 Firefox 没有像它应该的那样使用双三次采样。我只需要等到他们真正添加它即可。

编辑3:

Original Image

最佳答案

如果所有浏览器(实际上,Chrome 5 给了我一个相当不错的浏览器)都无法提供足够好的重采样质量,您该怎么办?然后你自己实现它们!噢,来吧,我们正在进入 Web 3.0 的新时代,兼容 HTML5 的浏览器, super 优化的 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";
};

...用它你可以产生这样的结果!

img717.imageshack.us/img717/8910/lanczos358.png

无论如何,这是示例的“固定”版本:

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 Gallery Generator,它是否也受GPL2保护?我不知道)

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

关于javascript - 调整 HTML5 Canvas 中图像的大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41156762/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com