조회 수 6086 추천 수 2 댓글 2
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
Extra Form
라이선스 MIT

안녕하세요?


Selenium을 이용하여 웹페이지의 특정 element를 캡처하는 스크립트를 작성해보았습니다.


일반적인 윈도우의 캡처 프로그램(픽픽 등)은 element를 선택하여 캡처할 수는 없다고 알고 있네요.


물론 아래 URL에 소개된 것처럼 크롬 개발자도구를 이용하여 element를 캡처하는 방법이 있지만요.


https://umaar.com/dev-tips/156-element-screenshot/


그래서 이 스크립트를 작성하게 되었습니다.



여러모로 부족한 점이 많지만 이 스크립트의 대략적인 구동방법을 말씀드리자면 


Selenium으로 웹페이지에 접속한 후에 해당 element의 위치와 크기를 구하고


전체 화면을 캡처한 후에 element의 위치와 크기에 알맞게 crop을 하는 방법을 택했습니다.


Selenium 이외에도 이미지처리와 관련하여 Pillow를 필요로 합니다.



Stackoverflow 등에 관련된 Q&A가 있었지만 제가 직접 구동해보니 약간의 문제가 있었습니다.

https://stackoverflow.com/questions/13832322/how-to-capture-the-screenshot-of-a-specific-element-rather-than-entire-page-usin


제가 구글링 실력이 부족한지 제대로 작동하는 스크립트를 찾지는 못했어요 ㅠㅠ


단순히 get_screenshot_as_png를 이용하면 element가 화면보다 긴 경우에 짤리는 문제가 발생하더군요.


Stackoverflow에 location 대신에 location_once_scrolled_into_view를 이용하면 된다는 리플도 있었지만


element가 아주 길어지면 역시 중간에서 짤리더군요 ㅠㅠ


그래서 주먹구구식이기는 하지만 일단 전체 페이지의 사이즈를 구하고


브라우저의 창 크기를 그에 맞게 확대한 후에 스크린캡처를 하는 방법을 택했습니다.


이것이 최선의 방법은 아닐 것 같지만 일단 제가 테스트한 바로는 잘 작동하네요 ^^



from selenium import webdriver
from PIL import Image
from io import BytesIO
from selenium.webdriver.firefox.options import Options

options = Options()
options.headless = True
driver = webdriver.Firefox(options=options)
driver.get(캡쳐할 웹페이지의 주소)

# 전체 페이지의 사이즈를 구하여 브라우저의 창 크기를 확대하고 스크린캡처를 합니다.
page_width = driver.execute_script('return document.body.parentNode.scrollWidth')
page_height = driver.execute_script('return document.body.parentNode.scrollHeight')
driver.set_window_size(page_width, page_height)
png = driver.get_screenshot_as_png()

# 특정 element의 위치를 구하고 selenium 창을 닫습니다.
element = driver.find_element_by_class_name(캡쳐할 element의 class)
image_location = element.location
image_size = element.size
driver.quit()

# 이미지를 element의 위치에 맞춰서 crop 하고 저장합니다.
im = Image.open(BytesIO(png))
left = image_location['x']
top = image_location['y']
right = image_location['x'] + image_size['width']
bottom = image_location['y'] + image_size['height']
im = im.crop((left, top, right, bottom))
im.save('저장할 파일명.png')



제가 이 스크립트를 작성하면서 느낌 점이 있는데 Selenium이 굉장히 민감한 것 같아요 ㅠㅠ


구글링을 해보니 크롬과 파이어폭스에 따라 캡처된 결과물이 다르다고 하더군요.

(대체로 스크린캡처와 관련해서는 파이어폭스를 조금 더 추천하는 것 같더군요)


그리고 제가 테스트해본 바로는 headless 모드와 일반 모드에 따라 캡처된 결과물이 달라지는 경우도 있었어요.



여러모로 부족한 글 읽어주셔서 감사합니다 ^^


그럼 내일부터 또 더워진다는데 스포어 회원님들께서도 항상 건강하세요!



+)


humit 님의 https://studyforus.com/freeboard/583864 게시물에서 .board-wrapper를 캡처해봤어요 ^-^



Who's 이니스프리

profile

Make StudyForUs Great Again!

 

CSVpuymXAAAVVpd.jpg

Atachment
첨부 '1'
  • profile
    title: 황금 서버 (30일)humit 2019.07.10 00:44
    Firefox는 잘 모르겠지만 크롬의 경우에는 headless 모드와 일반 모드일 때 윈도우 사이즈가 동일하더라도 화면의 사이즈가 달라지더라고요.
    화면 사이즈만 동일하게 맞춰주면 UI 상으로는 크게 차이가 없는 것처럼 보였습니다.
  • profile
    이니스프리 2019.07.10 00:58
    옙 구글링해보니 Stackoverflow 등에서는 humit 님께서 말씀하신 그런 이유도 있고 해서
    스크린 캡쳐와 관련해서는 대체로 파폭을 더 추천하는 분위기이더군요.

    그런데 이 스크립트가 윈도우에서는 분명히 잘 작동하는데
    VPS에서 테스트를 해보니 에러가 나는 경우가 많더군요.
    from pyvirtualdisplay import Display로 display를 지정해봐도 마찬가지이구요.
    Stackoverlfow를 검색해보니 파폭을 업데이트하거나 아예 낮은 버전을 쓰라고 되어 있어서 둘 다 시도해봤는데 잘 안 되더군요.
    항상 안 되는 것은 아니고 시스템을 reboot를 하고 다시 시도해보면 어쩌다가 한 번 캡쳐가 되기도 하던데요.
    geckodriver.log를 봐도 실행할 때마다 에러로그가 달라서 정확한 원인을 찾지 못했네요 ㅠㅠ
    제 추측으로는 상하로 긴 element를 png 파일로 저장할 때 시스템 리소스가 부족한 것이 아닌가 하는 생각도 드네요.

    humit 님께서 해결해주신 PyQt의 GUI 문제와 더불어 우분투에서 Selenium의 문제까지 겹쳐서
    요새 며칠 파이썬 대신 C#이나 C++을 공부해야 되는 것이 아닌가 하는 생각마저 들었네요 ㄷㄷ

    그럼 humit 님께서도 편안한 밤 되시고 안녕히 주무세요 ^^
    늘 진심으로 감사드립니다!

List of Articles
번호 분류 제목 글쓴이 날짜 조회 수
38 코드 잘못 쓰면 컴퓨터가 날아가는 코드 29 제르엘 2018.07.08 1016
37 코드 매우 특이한 버그 9 title: 대한민국 국기gimmepoint 2018.06.05 720
36 내가 만든 merge sort 3 title: 대한민국 국기gimmepoint 2018.05.17 528
35 코드 내가 만든 함수 모음집 2 title: 대한민국 국기gimmepoint 2018.05.12 528
34 코드 내가 만든 사칙연산 계산기 title: 대한민국 국기gimmepoint 2018.05.11 621
33 코드 내가 만든 함수 모음집 4 title: 대한민국 국기gimmepoint 2018.05.08 520
32 코드 클라이언트단에서 이미지 리사이징 6 file 네모 2018.05.06 1154
31 코드 HEX를 RGB로, RGB를 HEX로 바꾸는 PHP 코드 1 네모 2018.05.05 672
30 코드 c 이진트리 전,중,후위 알고리즘 2 title: 대한민국 국기gimmepoint 2018.04.24 642
29 코드 html 초보가 만든 자소서 4 title: 대한민국 국기gimmepoint 2018.04.21 730
28 코드 Hello, World!를 출력해보자 18 네모 2018.04.21 661
27 코드 아주 간단한 기초 C++ 6 제르엘 2018.04.21 567
26 코드 미완성 받아쓰기 (C) title: 대한민국 국기gimmepoint 2018.04.20 565
25 코드 Cmd 에서 서비스 시작 / 종료하기 1 ProjectSE 2018.02.18 691
24 코드 CMD로 로컬 연결 고정 IP 설정하기 1 title: 황금 서버 (30일)humit 2018.02.06 1092
23 코드 컴퓨터의 uuid 얻기 5 title: 황금 서버 (30일)humit 2018.01.28 1220
22 코드 유튜브에 약간의 기능을 추가 해주는 크롬 확장 프로그램. 11 file Hanam09 2018.01.26 1076
21 코드 사이트 서버 이전 (또는 미러링 사이트 구축) 쉽게하는 스크립트 1 NoYeah 2018.01.14 1027
20 코드 새 글 자동 댓글 스크립트 (AutoHotkey) 9 이니스프리 2017.11.26 3561
19 코드 파이썬을 이용한 텔레그램 새 글 알림 (허접합니다) 4 이니스프리 2017.11.19 2516
Board Pagination Prev 1 2 3 4 Next
/ 4