如何在 Selenium 中将画布保存为 PNG？答案

【问题标题】：How to save a canvas as PNG in Selenium?如何在 Selenium 中将画布保存为 PNG？
【发布时间】：2016-11-13 23:00:58
【问题描述】：

我正在尝试将画布元素保存为 png 图像。这是我现在的代码，但不幸的是，它不起作用：

import time
from selenium import webdriver
# From PIL import Imag.


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 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");};')

我想看看 Python 中的解决方案。我还希望看到一个不需要在屏幕截图末尾裁剪的解决方案。

【问题讨论】：

How to capture the screenshot of a specific element rather than entire page using Selenium Webdriver?的可能重复
...或者更好，stackoverflow.com/questions/15018372/…
我希望看到一个解决方案，而不是裁剪图像。您提供的第一个链接是 Java。
没有其他方法可以为元素拍照而不裁剪屏幕截图。我看了看，这就是我最终使用的。是的，我链接了它，然后意识到它是 Java，而你没有要求 Java。对此很抱歉，但当时我无法编辑它，所以我用正确的语言发布了一个。

标签： javascript python selenium canvas png

【解决方案1】：

您可以调用HTMLCanvasElement.toDataURL() 将画布作为PNG base64 字符串。这是一个工作示例：

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)

【讨论】：