Улучшение качества изображения элементов с уменьшенным CSS

Я уменьшаю содержимое моего удивительного редактора графов, используя transform: scale(x). При масштабировании масштаб уменьшается до 0 (эксклюзивный), когда масштабирование увеличивается, до максимального значения 1 (включительно), что означает полный масштаб или начальный масштаб.

Однако при значительном увеличении масштаба качество изображения становится действительно шумным - рассмотрите следующий пример и обратите внимание на то, как масштабирование сделает шум изображения шумным:

var graphContainer = document.getElementById("graph-container");
var zoomInButton = document.getElementById("zoom-in-button");
var zoomOutButton = document.getElementById("zoom-out-button");
var zoomLevel = 1;

zoomInButton.addEventListener("click", function () {
    zoomLevel = Math.max(1, zoomLevel - 0.25);
    graphContainer.style.transform = "scale(" + (1 / zoomLevel) + ")";
});

zoomOutButton.addEventListener("click", function () {
    zoomLevel = zoomLevel + 0.25;
    graphContainer.style.transform = "scale(" + (1 / zoomLevel) + ")";
});
#editor-container {
    background-color: #001723;
}

#graph-container { transform-origin: top center; }
<div id="editor-container">
    <button id="zoom-in-button">Zoom in</button>
    <button id="zoom-out-button">Zoom out</button>
    <div id="graph-container">
        <img class="shape" src="http://i.imgur.com/zsWkcGz.png" />
    </div>
</div>

Ответы

Ответ 1

Вы можете получить гораздо лучшие результаты, используя SVG-изображения вместо PNG, и их также очень легко создать и внедрить в ваш код, вам даже не нужно размещать их.

Как вы можете видеть в этом demo, SVG не будет пикселизовать или размыться, и вы получите еще лучшие результаты в экранах с высоким разрешением, например Retina.

Код SVG:

<svg class="shape" width="440px" height="319px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <path d="M1,316.040132 C1,316.040132 241.5837,339.680482 241.5837,163.497447 C241.5837,-12.6855883 439,2.31775322 439,2.31775322" id="Path" stroke="#50E3C2" stroke-width="2"></path>
    </g>
</svg>

Очевидно, что это не идеально.

Ответ 2

Интерполяция изображения с острым краем неизбежно создаст артефакты. Даже если он антиализован, даже если он размыт. Вы можете проверить это в самом Photoshop, вы получите тот же результат.

Даже подход mipmap не будет работать.

Врожденная проблема заключается в том, что пиксели не могут сохранить всю информацию о ваших сложных векторных фигурах; и когда вы сжимаете пиксели, формы теряются. Существует два решения для улучшения качества:

  • либо сделать снимок с более высоким разрешением, прежде чем масштабировать его, чтобы там больше пикселей, чтобы сохранить намерение вашей фигуры.
  • или непосредственно визуализировать ваши векторные фигуры в масштабе, на который вы нацеливаетесь