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

3

Мне нужен скриншот из нашего веб-приложения. Он будет напечатан на плакате, поэтому мне нужна версия с высоким разрешением. У меня монитор 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, и у моего отдела нет средств, чтобы инвестировать в платный специальный инструмент для этой задачи.

Руми П.
источник
Я не знаю хорошего способа добиться того, чего ты хочешь. Но в крайнем случае вы хотели бы увеличить изображение (например, с помощью GIMP, чтобы изменить разрешение до 300 точек на дюйм (и изменить его размер на фактический размер печати) с соответствующим увеличением фактического числа пикселей, предпочтительно с помощью бикубического алгоритма или lanczos3.
Том Ян
@ Tomayan это выглядит не очень хорошо. Текст смазывается даже при первом увеличении веб-страницы, а затем в GIMP. И когда мне нужно уменьшить масштаб, чтобы текст стал совсем маленьким, а затем увеличился в GIMP, он стал почти нечитаемым.
Руми П.
1
Я использую демонстрацию этого html для svg, чтобы получить векторную версию веб-страниц для размещения плакатов и подобных материалов.
ff524
Не могли бы вы просто создать макет в вашем любимом графическом редакторе? Это должна быть "живая" версия?
Бурги
1
Я думаю, вы должны взглянуть на это
Бродяга

Ответы:

2

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

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

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

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

Saloaty
источник
1

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

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

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

Фирш - LetsWP.io
источник