Войти
ПрограммированиеФорумВеб

Сделать скриншоты сайта с Pixel Ratio != 1

Advanced: Тема повышенной сложности или важная.

#0
20:01, 14 янв. 2017

Привет. Имеется веб-игра, и нужно сделать ее скриншоты как она выглядит на различных мобильных девайсах. То, как Google Chrome показывает игру в Device Mode - устраивает, но есть пара проблем, которые не удается решить:

1. Pixel Ratio: физический пиксель != CSS-пиксель, в связи с чем страница рендерится по обеим сторонам в 2+ раз меньше чем будет скриншот, снятый на реальном устройстве. Например, разрешение iPhone 5 640x1136, но т.к. Pixel Ratio на нем = 2, то Chrome нарисует страницу размером 320х568.

2. Даже если удастся заставить хром рисовать с Pixel Ratio 1, возникнет другая проблема - несколько устройств имеют разрешение 2к+, и я просто не смогу развернуть браузер на этот размер (у меня монитор 1920).

3. Игра на WebGL, и может захотеться воспользоваться функцией canvas.toDataURL(). Но проблема в том, что поверх WebGL еще рисуется кое-какой гуй на HTML, и таким образом скриншот не захватит ничего кроме WebGL-рендера.


В общем, нужно сделать скриншот веб-страницы со всем ее содержимым из Device Mode таким образом, чтобы скриншот учитывал Pixel Ratio. Можно и не Device Mode, и вообще не хром, МНЕ ПРОСТО НУЖНЫ СКРИНШОТЫ (ノಠ益ಠ)ノ彡┻━┻


#1
8:10, 15 янв. 2017

В хроме же можно создать кастомное устройство с нужным тебе разрешением и pixel ratio (пункт "Edit..." в списке с устройствами)

#2
20:11, 15 янв. 2017

grgd
Спасибо, Кэп. Расскажите еще как сделать так, чтобы на экране масштаб был один, а в скриншотах - другой (1:1) ?

#3
8:37, 16 янв. 2017

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

ПрограммированиеФорумВеб

Тема в архиве.