브라우저가 지원하는 것보다 더 높은 해상도로 브라우저 스크린 샷을 찍는 방법은 무엇입니까?


97

4000x3000 픽셀과 같은 매우 높은 해상도의 모니터에 나타날 웹 사이트의 스크린 샷을 만들어야합니다. 내 노트북 ​​화면의 기본 해상도는 1400x768입니다. 기본적으로 모니터 및 비디오 카드가 실제로 지원하는 것보다 훨씬 높은 모니터 해상도를 갖는 것을 시뮬레이션해야합니다. Firefox의 CTRL MINUS (확대)를 반복적으로 클릭 할 때 사이트의 스크린 샷이 거의 보이지만 스케일링으로 인한 픽셀 손실이 없어야합니다. 어떻게해야합니까? 가상 머신 소프트웨어를 사용하여 고해상도 디스플레이를 시뮬레이션 할 수있는 방법이 있습니까? 그렇지 않은 경우 화면보다 큰 브라우저 창을 연 다음 어떻게 든 PNG로 내용을 캡처 할 수 있습니까? 작동 할 다른 것이 있습니까?


OS의 dpi 설정을 전환하려고 할 수 있습니다. Windows 8에서는 레지스트리 값을 변경해야한다고 생각합니다. 이것은 거대한 데스크탑을 제공하지만 글꼴도 확장되므로 텍스트를 읽으려면 눈을 더 많이 돌리십시오.
jiggunjer

답변:


104

Firefox 및 2 개의 확장 ( Web DeveloperFireShot)으로 이를 수행 할 수 있습니다 .

두 확장이 모두 설치되면 도구-웹 개발자-크기 조정-크기 조정 크기 편집 ...으로 이동하십시오.

새 크기 인 4000 x 3000을 추가하십시오. 페이지 내용 만 4000x3000으로하려면 "뷰포트 크기 조정"을 선택하십시오. 확인하지 않으면 Firefox의 전체 창 (도구 모음, 메뉴 등)이이 차원으로 설정됩니다.

대체 텍스트

올바른 크기가되면 도구-FireShot-전체 페이지 캡처 및 ...으로 이동하십시오. 예를 들어 저장과 같은 조치를 선택하십시오. 웹 개발자가 설정 한 페이지 내용을 원하는 크기로 저장합니다.

대체 텍스트


@ 스나크-글쎄, 그것은 거의 효과가 있었다. 그러나 웹 개발자 확장 프로그램을 사용하면 뷰포트를 화면보다 크게 만들 수 없습니다 ...?
Joshua Carmody

@Joshua : 그것은 나를 위해 잘 작동합니다. 답변을 게시하기 전에 테스트했습니다. 새로운 테스트를했지만 큰 이미지를 호스팅 할 위치를 찾지 못했습니다
Snark

1
업데이트 : 화면보다 더 큰 창을 만들 수 없다는 문제는 Windows OS 자체에 의해 부과되는 제한으로 보입니다.
Joshua Carmody

@ 스나크-어떤 OS를 사용하고 있는지 물어봐도 될까요?
Joshua Carmody

2
@ 스나크-아. 어쩌면 그것은 Windows XP 일 것입니다 (내가 붙어있는 것입니다). 어쨌든 FireBug를 사용하여 style = "width : 4000px; height : 3000px;"인 DIV를 삽입하여 문제를 해결할 수 있습니다. HTML 코드에 넣은 다음 FireShot을 사용하므로 여전히 좋습니다. FireShot을 지적 해 주셔서 감사합니다. 그렇게하면 인생이 훨씬 쉬워집니다. 이전에 수동으로 합성하는 것보다 스크롤하여 스크린 샷을 찍었습니다. 중대한 고통이었다.
Joshua Carmody

19

한편 (최소한 1 년 또는 2 년 동안-내가 실수하지 않으면 버전 15 이후) Firefox는 통합 개발자 도구를 통해이를 직접 지원합니다.

스트라이프 메뉴 의 개발자 도구 아이콘에서 반응 형 디자인보기 를 누르 CtrlShift M거나 선택하십시오 .

즉, 사전 설정의 집합을 선택할뿐만 아니라, 원하는 해상도를 입력하게됩니다이보기 나타납니다 직접 한 번의 클릭으로 디스크에 PNG 형식으로 스크린 샷을 저장 :

여기에 이미지 설명을 입력하십시오


1
확대하여 hi-dpi 이미지를 시뮬레이션 할 때 스크린 샷 단추가 제대로 작동하지 않을 수 있습니다.이 경우 개발자 도구 모음 Shift+를 열고 "콘솔"에 F2붙여 넣으십시오 screenshot --clipboard --fullpage. 이것은 일반적인 JS 콘솔과 다릅니다.
블레이드

크롬 개발자 콘솔 기기 테스트 모드에서도 작동합니다. 스크린 샷 옵션은 오른쪽 상단의 드롭 다운 메뉴에 있습니다.
Tully

불행히도 이것은 Chrome에서 작동하지 않는 것 같습니다. 방금 Firefox의 전체 뷰 스크린 샷 방법이 작동하더라도 Firefox에서 Flow가 올바르게 표시되지 않기 때문에 Microsoft Flow의 Chrome에서 전체 뷰 포트 스크린 샷을 찍으려고 시도했지만 현재 표시된 공간의 스크린 샷 만 가져 왔습니다. 다시 말해 Chrome의 '캡처 스크린 샷'과 '전체 화면 캡쳐 화면 캡처'옵션 사이에는 차이가 없었습니다.
TylerH


6

Abduction 이라는 FireFox 애드온을 사용하여 웹 페이지 전체를 .png 샷으로 만듭니다. 불행하게도 해당 애드온은 아직 FireFox 3.6과 호환되도록 업데이트되지 않았습니다.

처럼 보이는 ScreenGrab이 같은 일을 할 것입니다.


5

Firefox 16 이후에는 이제 개발자 콘솔을 사용하여 뷰포트의 크기를 제어 할 수 있습니다.

도구 열기 ... 웹 개발자 ... 개발자 툴바

이 명령으로 뷰포트 크기를 조정하십시오.

resize to 5000 5000

이 명령으로 화면 캡처 :

screenshot output.png

4

글쎄, 리눅스 (또는 X 윈도우 시스템 설정)를 사용하면 모니터보다 큰 가상 데스크탑을 설정할 수 있습니다. 당신은 그것을 스크롤하지만 브라우저를 최대화하고 스크린 샷을 얻을 수 있다고 생각합니다.

Windows 또는 OS X에서 할 수있는 방법이 있는지 모르겠습니다.


3

자주하지 않아도 브라우저 플러그인을 설치하는 것보다 thumbalizr 와 같은 온라인 서비스를 사용하는 것이 더 쉽다는 것을 알았 습니다.


1

Chrome에는 다음과 같은 몇 가지 확장이 있습니다.

다른 웹 페이지 스크린 샷이 있지만 두 개 이상의 링크를 게시 할 정도로 평판이 좋지 않습니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.