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

Question

Мне нужен скриншот из нашего веб-приложения. Он будет напечатан на плакате, поэтому мне нужна версия с высоким разрешением. У меня монитор 96 DPI, поэтому при печати стандартный снимок экрана Мое решение этой проблемы было

• Подсчитайте необходимое мне количество пикселей, чтобы изображение могло быть напечатано с разрешением 300 точек на дюйм в нужном мне размере.
• установите инструмент Responsive Design в Firefox точно на тот же размер области просмотра, скажем, X на Y пикселей
• изменяйте масштаб с помощью Ctrl + +, пока необходимые элементы дизайна не заполнят представление (эта часть важна - решение должно работать, когда содержимое масштабируется или уменьшается)
• используйте встроенный инструмент для создания снимков экрана.
• используйте GIMP, чтобы изменить разрешение изображения до 300 точек на дюйм без изменения фактического количества пикселей

К моему удивлению, скриншот был не X на Y пикселей, а меньший размер, например, 0,67X на 0,67Y, так что я мог получить только изображение с разрешением 200 точек на дюйм, не масштабируя его. Фактор также варьировался. Поиграв, я обнаружил, что размер скриншота определяется уровнем масштабирования.

Использование аддона для создания скриншота (Awesome Screenshot Plus) привело к точно такой же проблеме. Использование Chrome создало другую проблему, поскольку Chrome не отображает полный большой видовой экран, а захватывается только часть изображения. Насколько мне известно, в IE нет инструмента для увеличения размера области просмотра за пределы физического экрана.

Есть ли у вас какие-либо предложения (аддоны браузера, может быть, другой браузер?) за способ сделать мой скриншот? Мне нужен браузер для отображения страницы, а не что-то вроде PageLayouts, потому что JavaScript в приложении несколько задействован, и потому что мне нужно немного подправить HTML и CSS на лету.

Я работаю на ПК под управлением Windows, и у моего отдела нет средств, чтобы инвестировать в платный специальный инструмент для этой задачи.

Answer 1

То, что работало для меня, было в Firefox, я открыл консоль разработчика и в правом верхнем углу я щелкнул опции панели инструментов (выглядит как маленькая шестеренка).

В разделе «Доступные кнопки панели инструментов» я установил флажок «Сделать снимок экрана полной страницы». Это заставило маленькую кнопку камеры появиться рядом с кнопкой настроек панели инструментов.

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

Примечание: я знаю, что функция адаптивного дизайна имеет кнопку для скриншота, но для меня, когда я делаю скриншот, разрешение не соответствует установленному.

Answer 2

Это возможно только с дополнением Firefox под названием Pearl Crescent Page Saver, где вы вводите 200 или 300 к значению% в отмеченной настройке. Он увеличит страницу (не увеличенное до пикселя) и сделает снимок экрана, который в 2-3 раза больше, чем ваш видовой экран. Я использовал его, чтобы сделать скриншоты веб-сайтов с разрешением 300-600 точек на дюйм для печати, и это оказалось потрясающим (особенно если сайт был готов к сетчатке, иначе только CSS-линии, углы, шрифты и т.д. Хорошо масштабировались).

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