I'm trying to create a thumbnail image on the client side using javascript and a canvas element, but when I shrink the image down, it looks terrible. It looks as if it was downsized in photoshop with the resampling set to 'Nearest Neighbor' instead of Bicubic. I know its possible to get this to look right, because this site can do it just fine using a canvas as well. I've tried using the same code they do as shown in the "[Source]" link, but it still looks terrible. Is there something I'm missing, some setting that needs to be set or something?

编辑:

我正在调整一张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;
}

EDIT2:

看来我错了,链接网站并没有做任何更好的工作缩小图像。我尝试了其他建议的方法,没有一个看起来更好。这就是不同方法的结果:

ps:

帆布:

使用图像渲染:optimizeQuality设置并按宽度/高度缩放:

使用-moz-transform设置和缩放:

Canvas在pixastic上调整大小:

我猜这意味着firefox没有像它应该的那样使用双三次抽样。我只能等他们真的加进去了。

EDIT3:

原始图像


当前回答

我刚刚运行了一个并排比较的页面,除非最近发生了一些变化,否则我看不到更好的缩小(缩放)使用canvas vs.简单的css。我在FF6 Mac OSX 10.7中进行了测试。和原版相比还是有点软。

然而,我确实偶然发现了一些确实产生巨大差异的东西,那就是在支持画布的浏览器中使用图像过滤器。实际上,你可以像在Photoshop中一样对图像进行模糊、锐化、饱和度、纹波、灰度等操作。

然后我发现了一个很棒的jQuery插件,使这些过滤器的应用程序一个快照: http://codecanyon.net/item/jsmanipulate-jquery-image-manipulation-plugin/428234

我只是在调整图像大小后应用锐化滤镜,这应该会给你想要的效果。我甚至不需要使用canvas元素。

其他回答

我想从答案中得到一些定义良好的函数,所以最后得到了这些,我希望对其他人也有用,

function getImageFromLink(link) {
    return new Promise(function (resolve) {
        var image = new Image();
        image.onload = function () { resolve(image); };
        image.src = link;
    });
}

function resizeImageToBlob(image, width, height, mime) {
    return new Promise(function (resolve) {
        var canvas = document.createElement('canvas');
        canvas.width = width;
        canvas.height = height;
        canvas.getContext('2d').drawImage(image, 0, 0, width, height);
        return canvas.toBlob(resolve, mime);
    });
}

getImageFromLink(location.href).then(function (image) {
    // calculate these based on the original size
    var width = image.width / 4;
    var height = image.height / 4;
    return resizeImageToBlob(image, width, height, 'image/jpeg');
}).then(function (blob) {
    // Do something with the result Blob object
    document.querySelector('img').src = URL.createObjectURL(blob);
});

为了测试这个,在一个标签中打开的图像上运行它。

为了调整图像的宽度小于原始,我使用:

    function resize2(i) {
      var cc = document.createElement("canvas");
      cc.width = i.width / 2;
      cc.height = i.height / 2;
      var ctx = cc.getContext("2d");
      ctx.drawImage(i, 0, 0, cc.width, cc.height);
      return cc;
    }
    var cc = img;
    while (cc.width > 64 * 2) {
      cc = resize2(cc);
    }
    // .. than drawImage(cc, .... )

它工作=)。

我刚刚运行了一个并排比较的页面,除非最近发生了一些变化,否则我看不到更好的缩小(缩放)使用canvas vs.简单的css。我在FF6 Mac OSX 10.7中进行了测试。和原版相比还是有点软。

然而,我确实偶然发现了一些确实产生巨大差异的东西,那就是在支持画布的浏览器中使用图像过滤器。实际上,你可以像在Photoshop中一样对图像进行模糊、锐化、饱和度、纹波、灰度等操作。

然后我发现了一个很棒的jQuery插件,使这些过滤器的应用程序一个快照: http://codecanyon.net/item/jsmanipulate-jquery-image-manipulation-plugin/428234

我只是在调整图像大小后应用锐化滤镜,这应该会给你想要的效果。我甚至不需要使用canvas元素。

尝试异食癖-这是一个高度优化的大小调整器与可选择的算法。看到演示。

例如,第一个帖子的原始图像用Lanczos过滤器和3px窗口在120ms内调整大小,或者用Box过滤器和0.5px窗口在60ms内调整大小。对于17mb的巨大图像,5000x3000px的大小调整在台式机上需要1秒,在手机上需要3秒。

所有调整大小的原则都在这篇文章中描述得很好,异食癖并没有增加火箭科学。但是它针对现代jit进行了很好的优化,并且可以开箱即用(通过npm或bower)。此外,它使用网络工作者,以避免接口冻结。

我还计划很快添加不锐利的掩模支持,因为它在降级后非常有用。

所以我发现了一些有趣的东西,在使用画布时可能会有所帮助:

要单独调整画布控件的大小,您需要使用height=""和width=""属性(或canvas.width/canvas. properties)。高度元素)。如果你使用CSS来调整画布的大小,它实际上会拉伸(即:调整大小)画布的内容以适应整个画布(而不是简单地增加或减少画布的面积)。

尝试将图像绘制到画布控件中,并将height和width属性设置为图像的大小,然后使用CSS将画布调整为您想要的大小,这是值得一试的。也许这将使用不同的调整大小算法。

还应该注意的是,canvas在不同浏览器(甚至不同浏览器的不同版本)中具有不同的效果。在浏览器中使用的算法和技术可能会随着时间的推移而改变(特别是Firefox 4和Chrome 6很快就会出来,这将非常强调画布渲染性能)。

此外,您可能也想尝试一下SVG,因为它可能也使用了不同的算法。

祝你好运!