전체 웹페이지의 스크린샷을 찍어야 합니다. 비결은 화면에 맞지 않는 단일 요소의 전체 내용을 포함하려면 스크린샷이 필요하다는 것입니다.
높이 때문에 스크롤 막대가 있는 단일 열 테이블입니다. IFRAME(자체 탭에 간단히 로드할 수 있음)이 아닙니다.
열에는 서식이 지정된 텍스트와 몇 개의 작은 이미지가 포함되어 있습니다.
스크롤되는 긴 웹 페이지의 경우 이 작업을 수행하는 것은 쉽지 않습니다. 하지만 스크롤되는 페이지 내에 개별 요소가 포함되어 있으면 어떻게 수행할 수 있습니까?
명확하게 말하면 요소 자체뿐만 아니라 전체 페이지를 캡처해야 합니다.
Windows에서 Firefox를 사용하여 이 작업을 수행하고 싶습니다.
답변1
내 제안은Firefox의 내장 기능단일 DOM 요소의 스크린샷을 찍을 수 있습니다.
개발자 도구를 열고 → 요소 찾기 → 마우스 오른쪽 버튼을 클릭하고 스크린샷을 찍으세요.
내 내부 사이트 중 하나에서는 작동하지 않았으므로 모든 사이트에서 작동한다고 말할 수는 없습니다.
OP 편집 후 업데이트:
아래와 같이 전체 DOM 요소 콘텐츠와 함께 전체 페이지를 기록하려면 DOM 요소의 높이를 실시간 편집해야 합니다.하지만...
뷰포트와 스크린샷에서 많은 DOM 요소를 푸시할 예정이며 AFAIK에서는 다른 도구가 이를 캡처하지 않으므로 귀하의 목적에 맞지 않습니다.
아래에서 읽어보세요.https://en.wikipedia.org/wiki/Screenshot
스크린샷, 화면 캡처, 스크린 캡, 캡, 스크린 덤프 또는 스크린샷은 사용 중인 모니터, TV 또는 기타 시각적 출력 장치에 표시되는 시각적 항목을 기록하기 위해 사람이 촬영한 이미지입니다.
정말로 여러분의 방식대로 해야 한다면 GIF를 만들거나 전체 페이지 하나와 DOM 요소만 스크린샷 두 개를 찍어 하나로 병합할 것입니다.
답변2
2021년 편집
툴바가 FF에서 제거되었습니다. 하지만 콘솔에 접두사 .를 입력하여 명령에 액세스할 수 있습니다 :. 따라서 스크린샷을 사용하려면
:screenshot --fullpage fullpage.png
또는
:screenshot --selector #hot-network-questions fullpage.png
오래된 답변
개발자 도구 모음에서 스크린샷 명령을 사용할 수 있습니다.
Shift+를 눌러 F2도구 모음을 열거나 웹 개발자 도구 메뉴에서 선택하세요.
도구 모음에서 명령을 입력합니다
screenshot --fullpage fullpage.png.
단일 요소를 캡처하려면 CSS 선택기를 --selector 플래그와 함께 사용할 수 있습니다. 예:
screenshot --selector #hot-network-questions
아래 이미지를 얻을 수 있습니다
답변3
Firefox를 사용하여반응형 디자인 모드, 너비는 보통으로 설정하고 높이는 전체 페이지를 포함하기에 충분하도록 설정합니다. 그런 다음 스크린샷 버튼(카메라 아이콘)을 클릭하세요.
답변4
나는 사용한다스크린프레소. 스크롤 스크린샷을 찍을 수 있습니다. 기본적으로 스크린샷을 찍고 아래로 스크롤하여 다른 스크린샷을 찍는 등의 작업을 수행하면 Screenpresso가 이를 하나로 연결합니다. 스크린프레소도 무료입니다.
참고로 스크린샷 스크롤의 단축키는 WindowsKey+Shift+PrintScreen입니다. 그런 다음 스크롤하려는 창을 클릭해야 합니다. 스크린샷을 찍을 다음 부분으로 이동하면 마우스 오른쪽 버튼을 클릭하고 아래로 스크롤하고 마우스 오른쪽 버튼을 클릭하는 등의 작업을 수행합니다. 작업이 끝나면 마우스 왼쪽 버튼을 클릭하면 서로 연결됩니다. 스티칭 프로세스가 더 잘 작동하도록 각 스크린샷에 약간의 겹치는 부분이 있는지 확인하세요.