Масштабируйте изображения в HTML5 без размытия

Есть ли способ увеличить изображение в HTML5, чтобы оно не было размытым?

Например, это изображение 24x24: введите описание изображения здесь

Если вместо этого вы загружаете его шириной 150, он становится размытым. Я хочу в пикселях !

http: //png-1.findicons .com /файлы /иконки /734 /phuzion /24 /bug.png

Вместо этого я хотел бы изменить механизм рендеринга, чтобы он отображался так, как вы видите в фотошопе. Примерно так:

введите описание изображения здесь

Я забочусь только о современных браузерах.

7 голосов | спросил at. 28 MarpmThu, 28 Mar 2013 22:35:08 +04002013-03-28T22:35:08+04:0010 2013, 22:35:08

2 ответа


0

После некоторого исследования: к сожалению, то, что вы хотите сделать, ограничено конкретными ограничениями браузера. Firefox имеет ограниченный экспериментальный код (image-rendering), который может заставить браузер прекратить интерполировать пиксели и таким образом вызвать размытость.

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

Вот так: введите описание изображения здесь

Страница документации Mozilla: https://developer.mozilla.org /EN-US /Docs /CSS /изображений рендеринга

ответил Michael 28 MarpmThu, 28 Mar 2013 22:54:53 +04002013-03-28T22:54:53+04:0010 2013, 22:54:53
0

Если вы просто оставите это браузеру, они попытаются сделать его как можно более плавным в наши дни (старые версии IE этого не сделали). Поэтому лучше всего загрузить его на холст и выполнить (ближайший сосед) апскейлинг самостоятельно. Я не говорю, что это нормальная идея, просто высказываю ее. :)

Это или иметь несколько версий изображения и как-то переключать их. Есть несколько техник, которые вы можете попробовать, например, раздвижные двери css.

ответил DanMan 28 MarpmThu, 28 Mar 2013 22:52:46 +04002013-03-28T22:52:46+04:0010 2013, 22:52:46

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132