相关疑难解决方法(0)

我正在尝试使用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); …

在Chrome中查看http://jsfiddle.net/aJ333/1/,然后在Firefox或Internet Explorer中查看.图像最初是120像素,我缩小到28像素,但无论你将它缩小到什么程度,它看起来都很糟糕.

图像是PNG,它有一个alpha通道(透明度).

这是相关的代码:

HTML:

<a href="http://tinypic.com?ref=2z5jbtg" target="_blank">
    <img src="http://i44.tinypic.com/2z5jbtg.png" border="0" alt="Image and video hosting by TinyPic">
</a>?

CSS:

a {
    width: 28px;
    height: 28px;
    display: block;
}

img {
    max-width: 100%;
    max-height: 100%;
    image-rendering: -moz-crisp-edges;
    -ms-interpolation-mode: bicubic;
}

在image-rendering和-ms-interpolation-modeCSS的线条似乎并没有做任何事情,但我发现他们在网上,而做对这个问题的一些研究.

尝试在IE7和IE9中打开此页面.

如页面所述,它使用-ms-interpolation-mode:bicubic.

我已经读过IE8/9中已禁用此设置,因为它现在是默认样式(在IE7中,最近邻居是默认插值模式).

但是,IE8/9中的图像质量比IE7差很多,如下所示:

是什么赋予了？有没有办法在IE8/9中获得更好的缩小图像？