2016-07-11 15 views
9

Ich versuche, ein Canvas-Element als PNG-Bild zu speichern. Dies ist mein Code jetzt, aber leider funktioniert es nicht.Wie speichert man eine Leinwand als PNG in Selen?

import time 
from selenium import webdriver 
#from PIL import Image 

driver = webdriver.Firefox() 
driver.get('http://www.agar.io') 
driver.maximize_window() 
driver.find_element_by_id('freeCoins').click() 

time.sleep(2) 

# the part below does does not seem to work properly 

driver.execute_script('function download_image(){var canvas = document.getElementByTagName("canvas");canvas.toBlob(function(blob) {saveAs(blob, "../images/output.png");}, "image/png");};') 

Ich möchte die Lösung in Python sehen. Ich würde auch gerne eine Lösung sehen, die am Ende des Screenshots kein Zuschneiden erfordert.

+0

Mögliche Duplikat (http://stackoverflow.com/questions/13832322/how-to -capture-the-screenshot-of-a-specific-Element-eher-als-ganze-Seite-usin) – JeffC

+0

... oder besser noch, http://Stackoverflow.com/questions/15018372/how-to-take -partial-screenshot-with-selen-webdriver-in-python – JeffC

+0

Ich würde gerne eine andere Lösung sehen, als das Bild beschneiden zu müssen. Der erste von Ihnen angegebene Link ist Java. – Clone

Antwort

8

Sie könnten HTMLCanvasElement.toDataURL() aufrufen, um die Zeichenfläche als PNG base64-Zeichenfolge zu erhalten. Hier ist ein funktionierendes Beispiel: [? Wie den Screenshot eines bestimmten Elements zu erfassen, anstatt ganze Seite mit Selen WebDriver]

import base64 
from selenium import webdriver 

driver = webdriver.Chrome() 
driver.get("http://curran.github.io/HTML5Examples/canvas/smileyFace.html") 

canvas = driver.find_element_by_css_selector("#canvas") 

# get the canvas as a PNG base64 string 
canvas_base64 = driver.execute_script("return arguments[0].toDataURL('image/png').substring(21);", canvas) 

# decode 
canvas_png = base64.b64decode(canvas_base64) 

# save to a file 
with open(r"canvas.png", 'wb') as f: 
    f.write(canvas_png)