像素风图案缩放后变模糊(被消除锯齿)的解决办法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test Page</title>

    <style>
        img
        {
            image-rendering: optimizeSpeed;
            image-rendering: -moz-crisp-edges; /* Firefox */
            image-rendering: -o-crisp-edges; /* Opera */
            image-rendering: -webkit-optimize-contrast; /* Webkit (non-standard naming) */
            image-rendering: pixelated;
            -ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
        }
    </style>
</head>
<body>
<img src="assets/images/test.png" width="264" height="232" />
</body>
</html>


像素风图案缩放后变模糊(被消除锯齿)的解决办法_第1张图片

美术的基友告诉我,他是用的photoshop设置里面的图像插值:临近(保留硬边缘)】来保证缩放后仍然保持像素风格。

在html中,我找到了类似的玩意:


image-rendering

这个属性是用来告诉浏览器用什么算法来处理图片的缩放

赋值可以是auto、pixelated以及crisp-edges

auto就不说了,

pixelated(像素化)顾名思义就是设计提供给像素化图片缩放使用的。其实只能放,并不能缩,使用pixelated的时候缩小时仍然是用的auto模式,因为它的原理只是简单的把1个像素扩大到4个像素,并没有计算的过程。它可以保证像素图片在放大后仍然保持原样的像素。这就是我们需要的属性了,IE下则需要使用使用nearest-neighbor(近邻取样)

crisp-edges(硬边缘)可以防止图片在缩放的过程中模糊化,区别于pixelated,他可以使用很多不同的算法来保证图片缩放的质量,如2xSaI,HQnX,EPX等。由于不是所有浏览器都支持pixlated,所以这条属性也要用上。因为我用到的图片都是非常简单的像素画,有大量的纯色块,所以也能够做到完全不失真,而复杂的图案,我借用一张NDS吧的图

这些算法是在保证不模糊的前提下,重新“脑补”一张图出来,、

每种算法具体可以去WIKI上查看。


------------------------------------------createjs的分割线--------------------------------------------------------------------

虽然上面写了那么多,然而我发现在createjs中使用的时候给canvas设置这些css并没有卵用。

而是要像下面这样

    canvas = document.getElementById('gameCanvas');

    var context = canvas.getContext("2d");
    context.mozImageSmoothingEnabled = false;
    context.webkitImageSmoothingEnabled = false;
    context.msImageSmoothingEnabled = false;
    context.imageSmoothingEnabled = false;
    context.oImageSmoothingEnabled = false;

把所有的平滑处理都设为false,就好了。

*这些属性在缩放过后会失效,不要忘记resize函数里重新做一次处理

你可能感兴趣的:(像素风图案缩放后变模糊(被消除锯齿)的解决办法)