[Python3] Machen Sie einen Screenshot einer Webseite auf dem Server und schneiden Sie sie weiter zu
Einführung
** Was ich machen wollte ** Ich möchte einen Screenshot einer Webseite auf Heroku machen und sie mit einem HTML-Element zuschneiden.
Problem Wenn Sie PhantomJS mit Selen ausführen, gibt es keine Methode, um die Position der Elementposition zu ermitteln.
Lösung Führen Sie Javascript mit der Funktion "execute_script" aus, die in der Klasse "selenium.webdriver.PhantomJS" bereitgestellt wird.
Umgebung
- PhantomJS 2.1.1
- Python 3.6.1
** Python-Bibliothek **
- Pillow 4.2.0
- selenium 3.4.3
Minimaler Code
screenshot_crop.py
from PIL import Image
from selenium import webdriver
driver = webdriver.PhantomJS()
driver.get("https://www.yahoo.co.jp") # (1)
driver.save_screenshot("screenshot.png ") # (2)
element_type = "Id" # (3)
element_name = "topicsboxbd" # (4)
before_script = """
var element = document.getElementBy""" + element_type + "('" + element_name + """');
var rect = element.getBoundingClientRect();
""" # (5)
left = driver.execute_script(before_script + "return rect.left;") # (6)
top = driver.execute_script(before_script + "return rect.top;") # (6)
right = driver.execute_script(before_script + "return rect.width;") + left # (7)
bottom = driver.execute_script(before_script + "return rect.height;") + top # (7)
im = Image.open("screenshot.png ") # (8)
im = im.crop((left, top, right, bottom)) # (9)
im.save("screenshot_crop.png ") # (10)
im.close()
Kommentar
(1) - Geben Sie die URL für den Screenshot an.
(2) - Speichern Sie einen Screenshot der gesamten Seite.
(3) - Geben Sie den Namen des Elementattributs (ID, Klasse usw.) in "element_type" an. Im Kreis Javascript getElementBy 〇〇 kann alles eingegeben werden. Daher muss die zuzuweisende Zeichenfolge mit einem Großbuchstaben beginnen.
(4) - Geben Sie den Attributwert (Hauptteil wie id = "main") des in (3) des Elements in element_name angegebenen Attributs an.
(5) - Gemeinsamer Teil des auszuführenden JS-Codes
(6) (7) - Der Javascript-Code wird von der Funktion "driver.execute_script" ausgeführt, um die oberen linken und unteren rechten Koordinaten des Elements zu erhalten.
(8) -Öffnen Sie den in (1) gespeicherten Screenshot.
(9) - Schneiden Sie den Original-Screenshot mit den in (6) und (7) erhaltenen Koordinaten.
(10) - Speichern Sie den zugeschnittenen Screenshot.
Ausführungsergebnis
screenshot.png
Screenshot der gesamten Seite
screenshot_crop.png
Screenshot von screenhot.png mit dem Element id =" topicboxbd " beschnitten
Beim Laufen auf Heroku
Wenn ich PhantomJS auf Heroku setze und einen Screenshot mache, wird Japanisch im gespeicherten Bild nicht so angezeigt, wie es ist. Durch Erstellen eines .font-Verzeichnisses im Stammverzeichnis und Einfügen einer ttf-Datei (otf), die Japanisch unterstützt, wird Japanisch angezeigt.
Verwenden von Phantomjs mit Heroku | Program Memo
Ich habe mein eigenes Modul erstellt
exphantom.py
from PIL import Image
from selenium import webdriver
class ScreenShot:
def __init__(self, file_name_: str = "screenshot.png "):
"""
:type file_name_: str
"""
self._filename = file_name_
self._driver = webdriver.PhantomJS()
self._driver.set_window_size(1024, 768)
self._crop_margin = 0
def screen_shot(self, url_: str) -> bool:
"""
Take a screenshot of the specified url.
:return: Success is True, Fail is False
:param url_: the webpage to save screenshot
"""
try:
self._driver.get(url_)
self._driver.save_screenshot(self._filename)
except Exception as e:
print(e)
return False
return True
def screen_shot_crop(self, url_: str, search_element_name: str, search_element_type: str = "Id") -> bool:
"""
Take a screenshot of the specified class of the specified url destination.
:return: Success is True, Fail is False
:param url_: the webpage to save screenshot
:param search_element_name: search to element name
:param search_element_type: search to element type
"""
self.screen_shot(url_)
before_script = """
var element = document.getElementBy""" + search_element_type + "('" + search_element_name + """');
var rect = element.getBoundingClientRect();
"""
try:
left = self._driver.execute_script(before_script + "return rect.left;") - self._crop_margin
top = self._driver.execute_script(before_script + "return rect.top;")
right = self._driver.execute_script(before_script + "return rect.width;") + left + self._crop_margin
bottom = self._driver.execute_script(before_script + "return rect.height;") + top + self._crop_margin
except Exception as e:
print(e)
return False
im = Image.open(self._filename)
im = im.crop((left, top, right, bottom))
im.save(self._filename)
im.close()
return True
def set_file_name(self, filename_: str):
self._filename = filename_
def set_window_size(self, width_: int, height_: int):
self._driver.set_window_size(width=width_, height=height_)
def get_window_size(self) -> object:
return self._driver.get_window_size()
def set_crop_margin(self, crop_margin_: int):
self._crop_margin = crop_margin_
def ger_crop_margin(self) -> object:
return self._crop_margin
def __del__(self):
self._driver.close()
if __name__ == "__main__":
#Geben Sie die URL an, um einen Screenshot zu erstellen
screen_url = "https://www.yahoo.co.jp"
#Geben Sie die Attribute des zu beschneidenden Elements an
element_type = "Id"
#Geben Sie den zu beschneidenden Elementnamen an
element_name = "topicsboxbd"
#Geben Sie beim Erstellen einer Instanz den Namen der Speicherzieldatei an
ss = ScreenShot("screenshot.png ")
# screen_Screenshot der URL speichern
ss.screen_shot(screen_url)
#Ändern Sie den Namen der Speicherzieldatei
ss.set_file_name("screenshot_crop.png ")
# screen_URL-Element_Element vom Typ Attribut_Speichern Sie einen Screenshot des Elements mit dem Namen name
ss.screen_shot_crop(screen_url, element_name, element_type)
#Instanz löschen
del ss
[Befindet sich auf GitHub](https://gist.github.com/korosuke613/f5552cec9c52fb1eb3db0837fed6a37f "https://gist.github.com/korosuke613/f5552cec9c52fb1eb3db0837fed6af)
** Beispiel für die tatsächliche Verwendung ** [Inoffizielle] Miyadai Support Division Notice BOT
Referenz
python selenium phantomJS element.location returns wrong location - Stack Overflow