Как отобразить картинку в браузуре без масштабирования, пиксель в пиксель?

Question

[Дмитрий Гурьянов]

Подскажите, пожалуйста, каким образом можно отобразить картинку в браузуре так, чтобы её пиксели совпадали с пикселями девайса, то есть если размер картинки 960x540 то она должна занимать четверть fullHD экрана или 1/16 4K дисплея.

Единственное что я смог придумать - это в теге img задавать width равный image_width / window.devicePixelRatio. Но тогда будут ошибки округления, devicePixelRatio может ведь любым быть, например у меня в хроме сейчас 1.100000023841858.

Нужно в приложении, которое запускается через электрон.

Comments

[rPman]

Между вами и пикселами столько прослоек, не мудрено где то не на то поделиться. Переходите уже на вектор, раньше перестанете мучиться.

Откуда у вас такое странное значение? точно знаю что devicePixelRatio корректно ловит изменение настроек windows dpi прямо в реальном времени

[Дмитрий Гурьянов]

Да у меня растровые изображения - галерея с фотками, отображать надо на известном мониторе (24 дюйма fullHD) и на известной системе. Исходный размер примерно 4000x5333, если прям такие картинки показывать и ресайзить прямо в браузере до размера скажем 300 по ширине, чтобы 5 колонок было - то очень сильно тормозит. Есть возможность во время процессинга в бекенде сразу генерить изображения меньшего размера практически без потерь производительности, но вот хочется сгенерить скажем 300x400 картинки и их в таком виде и показывать в браузере. Хочется, чтобы и быстро было и качественно пусть даже с потерей универсальности.

Значение такое понятия не имею откуда хром берет, но тут важно что он на основе своей какой-то непонятной логики выбирает совсем нецелое значение. Электрон так же.

[Aricus]

А что, если просто округлить devicePixelRatio, например, до третьего знака после запятой?

[rPman]

Aricus, лучше посчитайте, какое правильное значение в вашем случае должно у devicePixelRatio чтобы ваше изображение без остатка запикселпиксилось?

И покажите, на сколько отличаются ваше значения от системного, от сюда можно дальше изучать вопрос.

[Дмитрий Гурьянов]

Aricus, Тогда уж лучше не округлять и надеяться, что вместо 300 по ширине не получится 299 :)

[Дмитрий Гурьянов]

rPman, devicePixelRatio=1 должен быть для этого, тогда покажется как надо, только вот нет способа зафорсить devicePixelRatio

[rPman]

Дмитрий Гурьянов, объясните мне почему у вас этот параметр не соответствует действительности?

что за железо, видеокарта, монитор (или soc),.. что за операционная система, какие модификации в нее внесены и прочее.

[Дмитрий Гурьянов]

rPman, ноутбук Lenovo carbon X1 5го поколения, монитор там 2560x1440. Система linux fedora 30, браузер - google chrome.

[Дмитрий Гурьянов]

Дмитрий Гурьянов, удалил вот конфиг хрома, стало 2.200000047683716

[rPman]

Очевидно, что нужны настройки масштабирования в ос, тем более это линукс, и уж кошмар на улице - федора (ничего не имею против, но ее популярность а значит поддержка на уровне - сам дурак), в этом мире все что касается масштабирования - на зачаточном уровне, нет нормального стандарта для этого.

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

[Дмитрий Гурьянов]

rPman, В-общем конкретно для моего случая решение нашел. У хрома и электрона есть опция --force-device-scale-factor, задал 1

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

Так для приложений, которые где-то у неизвестных пользователей запускаются, получается лучшее, что можно придумать - это задавать width = image_width / devicePixelRatio и надеяться что округление в javascript и в недрах браузера будет одинаково работать.