Создайте изображение или распечатайте веб-страницу размером больше экрана из веб-браузера

1697
SwiftArchitect

Q:

Как я могу создать изображение или распечатать веб-страницу размером больше экрана из веб-браузера? Поскольку я не могу увеличить окно за пределы экрана, я ограничен экраном, который я использую:

enter image description here

Я хотел бы сделать очень крупный шрифт с большим количеством деталей, как если бы у меня был очень большой экран.

Почему этот новый вопрос?

Большинство вопросов по теме:

просто обращайтесь к конкретному случаю Google Maps, или требуйте определенного стороннего программного обеспечения, или получайте глупые ответы, такие как «расширить свое окно», не принимая во внимание, что это просто не вариант в большинстве сценариев. А как насчет луны?

Кроме того, нет ни общего вопроса, ни ответа по адресу:

  1. Создайте изображение или экспортируйте только ту часть, которая вам нужна
  2. Независимое от разрешения экрана решение, которое не проходит через снимок экрана
  3. Никакая покупка программного обеспечения, которая может или не может работать на вашей платформе
  4. Создайте изображение или распечатайте веб-страницу размером больше экрана из веб-браузера
  5. Любой сайт, любой размер
4
Чтобы пояснить, что здесь уникального, некоторые веб-страницы содержат механизм рендеринга окна на огромном виртуальном изображении. Размер окна определяется доступной площадью экрана, а затем - это то, сколько изображения отображается. Базовый виртуальный образ можно прокручивать или перетаскивать, чтобы показать больше. Виртуальное изображение может даже не существовать как одно большое изображение, но интересующая область может быть собрана по мере необходимости. Большинство методов захвата экрана захватывают то, что отображается, но не дают вам доступ к базовому виртуальному изображению. (Продолжение) fixer1234 6 лет назад 0
То, что здесь описано, - это больше, чем просто захват существующей страницы, в том числе закадровых фрагментов, просматриваемых прокруткой. Это определяет виртуальный холст. Механизм рендеринга страниц использует этот холст так, как если бы экран имел почти бесконечную доступную недвижимость для отображения гораздо большей части базового виртуального изображения. fixer1234 6 лет назад 0

3 ответа на вопрос

6
SwiftArchitect

100% веб-браузер

Вот решение, включающее только Firefox, надежный и безопасный браузер.

Yahoo Map at 12%

Источник изображения: https://search.yahoo.com (т.е. не Google Map) с разрешением 5369 × 5913 пикселей и 24,6 МБ.

Использование Firefox

  1. В Firefox:
    • откройте свою веб-страницу
    • не используйте полноэкранный режим
    • убедитесь, что вы видите свои полосы прокрутки, они вам понадобятся
    • перейдите в Инструменты> Веб-разработчик> Инспектор
  2. Убедитесь, что инструменты разработчика «Показать в отдельном окне» Show in separate window
  3. Выберите «Адаптивный режим проектирования» ( RDM )
    Responsive Design Mode
    • отложите это окно инспектора в сторону, оно вам больше не понадобится
  4. Вернитесь на свою веб-страницу с помощью панели инструментов RDM и выберите размер виртуального окна, соответствующий вашим потребностям; чем больше окно, тем больше памяти и ресурсов Responsive Design Mode
  5. С помощью значка камеры на панели инструментов RDM или надстройки Firefox сделайте снимок ( † )
    Camera

† Некоторые снимки (не технически скриншоты) слишком велики для обработки. Я использовал Сохранить страницу как изображение ... Abduction Add-on и его selection-copy X-Ray+ Copy...для вставки изображений ниже в моем любимом программном обеспечении для редактирования изображений для последующей обработки, без ущерба для качества, некоторые из них более 100 МБ в формате PNG ,
X-Ray + Copy

Map My Ride at 6%

Источник изображения: http://mapmyride.com (т.е. не Google Map) с разрешением 5659 × 7966 пикселей и 113,2 МБ.

Moon at 12%

Источник изображения: https://www.google.com/moon/ (yay Google) с разрешением 3600 × 3540 пикселей и 9,3 МБ.

► Посмотреть это решение на YouTube .

Предполагая, что вы добрались до шага 4. и можете видеть огромное изображение с помощью полос прокрутки, сложность состоит в том, чтобы захватить это изображение на шаге 5: это не снимок экрана, это «Сохранить страницу как изображение ...», если Вы установили надстройку, упомянутую в сноске (†), или камеру на панели инструментов ** RDM ** (опять же, не снимок экрана) SwiftArchitect 7 лет назад 0
Выложил видео. Смотрите https://youtu.be/jyxZlFEjlsc SwiftArchitect 6 лет назад 0
Когда вы активируете RDM, вы должны находиться в верхней части страницы, и для нестандартного размера может потребоваться редактирование первоначально показанного нестандартного размера. Не выделите область, потому что она выбирается с использованием цвета, который будет зафиксирован на снимке. Это были ключи к тому, чтобы заставить это работать. Но я заставил его работать, как большие страницы, так и огромные встроенные изображения. На таких вещах, как карты Google или небо, Google отображает намного большее изображение после определения большего размера. Вы можете захватить всю страницу, используя различное программное обеспечение для захвата экрана, но это первое решение, которое я видел, которое создаст огромный виртуальный образ. fixer1234 6 лет назад 0
0
한규환

http://www.goohwan.net/entry/%ED%81%B0%EC%A7%80%EB%8F%84-%EC%84%9C%EB%B9%84%EC%8A%A45% EA% B5% AC% EA% B8% 80% EC% A7% 80% EB% 8F% 84v2World

этот сайт служит "google_map" и "как скрабить"

Как это отвечает на вопрос? Пожалуйста, дайте больше информации Mawg 6 лет назад 0
-1
Lassi

Теперь вы можете использовать screenshot --fullpageв Firefox GCLI: https://superuser.com/a/1199896/594282

Как правило, просто ссылка на другой ответ лучше в качестве комментария. Ответы предназначены для комплексных, автономных решений. О, посмотри, у тебя теперь достаточно представителей, чтобы комментировать. :-) fixer1234 7 лет назад 0
Вопрос не в том, как сделать снимок экрана, скажем так, а в том, как расширить веб-страницу за пределы экрана. SwiftArchitect 6 лет назад 1
@SwiftArchitect Хороший звонок. `screenshot --fullpage` может захватывать все содержимое страницы с помощью полос прокрутки (например, очень длинный письменный документ). Я не знаю, работает ли он со страницами без полос прокрутки, которые запрограммированы так, чтобы не загружать больше содержимого, чем помещается на экране. Lassi 6 лет назад 0

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