调整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)的准备。此外，它使用网络工人在可用时，以避免界面冻结。我也计划增加不锐利的面具支持很快，因为它是非常有用的后规模。