Режим интерполяции изображений в Chrome/Safari?

Question

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

ms-interpolation-mode: nearest-neighbor;
image-rendering: -moz-crisp-edges;

Это работает в IE и Firefox, но не в Chrome и Safari. Есть ли альтернативы webkit или любой другой способ достижения этого эффекта?

Answer 1

Изменить: теперь это возможно с image-rendering: -webkit-optimize-contrast; ,

https://developer.mozilla.org/en-US/docs/CSS/image-rendering

Это не работает в текущих версиях Chrome, вот несколько полезных ссылок:

• http://vaughnroyko.com/state-of-nearest-neighbor-interpolation-in-canvas/
• Масштабирование изображений с помощью CSS: есть ли альтернатива webkit для -moz-crisp-edge?

---

Я не думал, что есть выход.

И какой-то быстрый поиск в Google почти подтверждает это; лучший результат Google для интерполяции изображений webkit:

http://code.google.com/p/chromium/issues/detail?id=1502

Отмечено в сентябре 2008 года и до сих пор не решено.

Также: https://bugs.webkit.org/show_bug.cgi?id=40881

---

Если бы мне это было нужно, я бы, вероятно, написал скрипт PHP для динамического масштабирования изображений с использованием ближайшего соседа.

Это будет работать в любом браузере, но тогда у вас есть все эти дополнительные затраты на обработку и передачу.

Answer 2

Я только что попробовал это:

img {image-rendering: pixelated;}

И это прекрасно работает на Chrome 39.0.2145.4 dev-m

Answer 3

Теперь вы можете установить алгоритм, используемый при выполнении drawImage

         ctx.imageSmoothingQuality = "high"

источник: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/imageSmoothingQuality