0

我尝试缩小图片（代表渲染文本）。

我注意到不同的浏览器在处理缩放和抗锯齿的方式上会给出非常不同的结果（似乎它们几乎都默认应用）。

这是一个 jsfiddle（我只能依靠我的 Mac 上的结果来查看问题，它也必须在不同的浏览器上进行测试）： https ://jsfiddle.net/ottmobk9/7/

<div class="test"></div>

<script>

/* I added an animation and a loop in order for you to see how Safari and */
/* Opera handle the scaling (after the scaling, it's sharp for one second */
/* then it becomes blurry) but no animation or loop is needed. If the     */
/* picture is downscaled, it loses its sharpness.                         */ 

function testResize()
{
    setTimeout(function()
    {
        x=$('.test>img').height();
        if(x>55)
        {
            $('.test>img').css('height',(x-1)+'px');
            testResize();
        }   
    },5);   
}

setInterval(function()
{
    $(".test>img").remove();
    $(".test").append("\
        <img src='http://www.lexgotham.com/xx-prev-xx/b-generator8/test/T.png'>\
        <img src='http://www.lexgotham.com/xx-prev-xx/b-generator8/test/E.png'>\
        <img src='http://www.lexgotham.com/xx-prev-xx/b-generator8/test/S.png'>\
        <img src='http://www.lexgotham.com/xx-prev-xx/b-generator8/test/T.png'>\
    ");
    setTimeout(testResize,1000)
}, 3000);

</script>

  • Firefox（在 Mac 上）：原始尺寸有点模糊（这很奇怪），但缩放后的尺寸看起来非常清晰。

  • Chrome（在 Mac 上）：原始大小很清晰，但缩放会自动应用某种过滤器，这会使调整大小的文本立即变得模糊。

  • Safari 和 Opera（在 Mac 上）介于两者之间，因为原始图片很清晰，但在缩放后，它们会在应用某种抗锯齿“过滤器”之前使图片保持清晰约一秒钟。

这些在不同浏览器上的测试证明，模糊渲染不是原始图片和缩放图片之间的非整数比率问题。

Firefox 开始不好，但结果很好。

Safari/Opera：开始良好但一秒钟后结束

Chrome：开始很好，但很快就结束了。

但这并不是致命的，因为 Firefox 显示了一个不错的最终缩放图片，而 Safari/Opera 将缩放的图片渲染了大约一秒钟。Chrome 无法正确处理它。

所以，这些浏览器对图片应用了一些东西，我希望如果没有要求，就不要应用这个“东西”，这是一个公平的要求。

因此，我尝试使用“图像渲染”属性（在 JSfiddle 的 css 部分取消注释以查看它的实际效果）。

它有效。有点儿。这取决于图片......所以，它不是问题解决者。

为了证明这一点，这是另一个测试，我们可以看到它在所有情况下都不能很好地工作： https ://jsfiddle.net/9f36rtza/34/

<style>
    .non_scaled_non_filtered{
        background:white;
    }
    .non_scaled_non_filtered img{
        height:100%;
    }

    .scaled_nonfiltered{
        margin-top:20px;
        background:white;
    }
    .scaled_nonfiltered img{
        height:34px;
    }

    .scaled_filtered
    {
        background:white;
        margin-top:20px;
        image-rendering: -moz-crisp-edges;
        image-rendering: -moz-crisp-edges;
        image-rendering: -o-crisp-edges;
        image-rendering: -webkit-optimize-contrast;
        -ms-interpolation-mode: nearest-neighbor;
    }
    .scaled_filtered img
    {
        height:34px;
    }
</style>

<div class="non_scaled_non_filtered">
    <img src='http://www.lexgotham.com/xx-prev-xx/b-generator8/test/84.png'>
    <img src='http://www.lexgotham.com/xx-prev-xx/b-generator8/test/101.png'>
    <img src='http://www.lexgotham.com/xx-prev-xx/b-generator8/test/115.png'>
    <img src='http://www.lexgotham.com/xx-prev-xx/b-generator8/test/116.png'>
</div>

<div class="scaled_nonfiltered">
    <img src='http://www.lexgotham.com/xx-prev-xx/b-generator8/test/84.png'>
    <img src='http://www.lexgotham.com/xx-prev-xx/b-generator8/test/101.png'>
    <img src='http://www.lexgotham.com/xx-prev-xx/b-generator8/test/115.png'>
    <img src='http://www.lexgotham.com/xx-prev-xx/b-generator8/test/116.png'>
</div>

<div class="scaled_filtered">
    <img src='http://www.lexgotham.com/xx-prev-xx/b-generator8/test/84.png'>
    <img src='http://www.lexgotham.com/xx-prev-xx/b-generator8/test/101.png'>
    <img src='http://www.lexgotham.com/xx-prev-xx/b-generator8/test/115.png'>
    <img src='http://www.lexgotham.com/xx-prev-xx/b-generator8/test/116.png'>
</div>

  • Firefox（在 Mac 上）：无论出于何种原因，与原始图片（应该是相同大小）相比，未缩放/未过滤的图片再次有点模糊。但是“图像渲染”给出了非常接近原始的缩放结果。比未缩放的图片要多得多，这很奇怪。

  • Chrome 和 Opera（在 Mac 上）：未缩放的图片应有的清晰，而带有“图像渲染”的缩放图片有点模糊。不过，小于缩放/未渲染的图片。

  • Safari（在 Mac 上）：这绝对是最糟糕的。未缩放的图片是完美的。缩放但未过滤的版本有点模糊。缩放和“图像渲染”的图片完全被过度处理了。看起来图片已经连续锐化了好几次。仅此一项就使“图像渲染”属性无法用于生产。

仅供参考：在 JSFiddle 中，我还添加了“字体平滑”和“文本渲染”属性（如果您想查看它们的实际效果，请取消注释）。但是，由于我们不处理真实​​的文本，当然，它不会改变任何事情。

总而言之，“图像渲染”看起来并没有取消激活浏览器默认应用的“抗锯齿”过滤器。它似乎只是添加了一个新的图像渲染过程层，每个浏览器都或多或少地处理得很好。所以，它不是问题解决者。它只是或多或少地隐藏了问题，具体取决于图片。有时甚至更糟（Safari）。我想要的只是为任何大小的图片停用任何不需要的抗锯齿处理，并在所有浏览器中获得一致的结果。

所以，我有一个情况。我需要一个忠实的渲染，因为我正在做一个 web 应用程序，它渲染包含人们可以缩放的图片和文本的 div，最终目的是以高分辨率打印结果。应用的过滤器不仅允许我这样做，而且我没有找到在任何情况下都有效的解决方案或解决方法。根据浏览器的不同，人们会得到各种结果，但没有一个是完美的。

如果我不应用“图像渲染”，除了 Firefox 之外的所有上述浏览器都会给我一个模糊的渲染。如果图片没有缩放，Firefox 会给我一个模糊的渲染。

但是，如果我确实应用了“图像渲染”，则没有一个可以很好地处理清晰度。Firefox 是最差的，但也不是完美的。他们每个人似乎都应用了另一个过滤器，而不是仅仅停用他们刚刚应用的抗混叠过滤器。

那么，我能做些什么呢？ 理想的方法是首先知道如何不应用该抗混叠滤波器。

当然我可以使用其他方式来缩小图片（css scale/zoom），但它是一样的。我试过了。缩放方法似乎不是问题，它是浏览器在所有情况下呈现缩放图像的方式。

谢谢您的帮助。

4

0 回答 0