Ближайшие Соседние рендеринга в холсте

Ответ 1

Если кто-то снова наткнется на это (как и я), Webkit поддерживает значение -webkit-optimize-contrast для image-rendering, которое (в настоящее время) является реализацией масштабирования ближайшего соседа. Он может применяться как к изображениям, так и к холстам.

Вот пример того, как это происходит.

.nn128 {
    width: 128px;
    height: 128px;
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
}

<canvas class="nn128" width="16" height="16"></canvas>
<img src="path/to/small/image.png" alt="Small image" class="nn128">

С помощью этой установки обе страницы Webkit Safari и Gecko/Firefox увеличат пространство для холста 16x16 и небольшое изображение до 128x128 с помощью алгоритма ближайшего соседа.

ОБНОВЛЕНИЕ. В ответ изначально было сказано, что браузеры Webkit поддерживают это; Фактически, с 2011-12-24 он работает с Safari в Mac OS и Chrome на Mac OS, но не с Chrome одним Windows (Safari в Windows не проверяется), как указано на Проблема 106662 трекера Chromium bug. Лексически Chrome в Windows будет принимать значение -webkit-optimize-contrast в таблице стилей CSS, но это не будет иметь никакого эффекта. Я ожидаю, что он будет работать когда-нибудь, и этот метод будет правильным способом для масштабирования ближайшего соседа, но пока этот метод означает, что пользователям Windows Chrome придется жить с размытием.

Ответ 2

В Firefox вы можете использовать это:

canvas {
  image-rendering: -moz-crisp-edges;
}

Но насколько я знаю для каждого другого браузера, вам в значительной степени не повезло. Один из способов, возможно, состоит в том, чтобы увеличить свой спрайт до 64x64 в Photoshop (или что-то еще), а затем использовать его в холсте. Таким образом, по крайней мере, изображение не будет размыто при "увеличении". Это все равно не даст вам чистый режим7, как доброта ближайшего соседа, хотя.

Вы можете написать свой собственный код масштабирования с помощью объекта imageData. При этом у вас будет значительное снижение производительности, но для изображения 16x16 это может быть не так уж важно.