Как растягивать изображения без сглаживания

Я недавно наткнулся на это: http://www.nicalis.com/index.php

И мне было любопытно: есть ли способ сделать что-то подобное с изображениями меньшего размера? Я имею в виду, что это пиксельная графика, и вместо того, чтобы использовать изображение с четырехкратным увеличением размера каждого пикселя, не могли бы мы растянуть их с помощью кода? Так что я начал пытаться это осуществить.

Я пробовал CSS, Javascript и даже HTML, но ни один из них не работал. Все они очень сильно размываются (например: http://jsfiddle.net/nUVJt/2/ ), что подводит меня к моему вопросу: можно ли растянуть изображение в браузере без какого-либо сглаживания?

Я открыт для любых предложений, будь то использование холста, jQuery, CSS3 или чего-то еще.

Спасибо за помощь!

РЕДАКТИРОВАТЬ: Теперь есть лучший способ сделать это! Чуть менее хакерский способ! Вот волшебство:

.pixelated {
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor;
    image-rendering: pixelated;
}

И это остановит сглаживание во всех современных браузерах. Он будет работать даже в IE7-8, но не в 9, и, к сожалению, я не знаю, как сделать это в 9 (кроме хака Canvas, описанного ниже). Даже не смешно, насколько быстрее он это делает, чем с JS. Подробнее об этом: https://developer.mozilla.org/en-US/docs/CSS/Image-rendering

EDIT2: Поскольку это еще не официальная спецификация, это не очень надежный. Chrome и FF, похоже, перестали поддерживать его с тех пор, как я написал выше (согласно этой статье , которая упоминалась ниже), что действительно раздражает. Вероятно, нам придется подождать еще несколько лет, прежде чем мы действительно сможем начать использовать это в CSS, что действительно прискорбно.

ОКОНЧАТЕЛЬНОЕ РЕДАКТИРОВАНИЕ: Теперь есть официальный способ сделать это! Появилось новое свойство рендеринг изображения . Это в спецификации CSS3 . Сейчас поддержка супер пятнистая , но Chrome только что добавил поддержку , так что вскоре мы сможем просто сказать рендеринг изображения: пиксельный; и это буду работать везде (ура вечнозеленые браузеры!)

38
задан Timothy Miller 16 February 2015 в 14:34
поделиться