调整HTML 5画布中的图像大小

Question

调整HTML 5画布中的图像大小我试图使用javascript和Canvas元素在客户端创建缩略图，但是当我缩小图像时，它看起来很糟糕。看起来就像它在Photoshop中被缩小了，重新采样设置为“最近的邻居”，而不是Bicubic。我知道有可能让这个看起来正确，因为本站用画布也能做得很好。我试过使用“[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;}

Answer 1

试一试皮卡-这是一个高度优化的大小与可选择的算法。看见演示.

例如，使用Lanczos过滤器和3 px窗口，或者使用Box过滤器和0.5px窗口，将原始图像调整为120 ms。对于巨大的17 Mb图像，5000x3000px调整大小在桌面上需要1s，在移动上需要3s。

所有调整大小的原则在这条线中都描述得很好，而且Pica没有增加火箭科学。但是它非常适合现代JIT-s，并且已经做好了开箱即用(通过NPM或Bower)的准备。此外，它使用网络工人在可用时，以避免界面冻结。

我也计划增加不锐利的面具支持很快，因为它是非常有用的后规模。