如何用Selenium获取网页中Canvas元素的图像？

因为Canvas元素是动态绘制的，没有像img标签那样直接的图像URL，所以需要通过JavaScript提取其绘制内容的编码数据，再转换为图像文件。具体步骤如下：

• 定位Canvas元素：用Selenium找到目标canvas节点，比如通过类名board-canvas定位。
• 提取Base64编码数据：执行JavaScript调用canvas的toDataURL()方法，获取图像的Base64编码字符串。
• 解码并保存图像：去掉Base64字符串的前缀后解码，将二进制数据写入文件保存为图像。

代码示例（Python） #

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
import base64

# 初始化浏览器驱动
driver = webdriver.Chrome()
driver.get("https://www.robotreboot.com/challenge")

# 等待canvas元素加载完成（避免获取空图）
canvas = WebDriverWait(driver, 10).until(
    EC.presence_of_element_located((By.CLASS_NAME, "board-canvas"))
)

# 执行JS获取canvas的Base64图像数据（去掉"data:image/png;base64,"前缀）
canvas_base64 = driver.execute_script(
    "return arguments[0].toDataURL('image/png').substring(21);", 
    canvas
)

# 解码并保存为PNG图片
image_data = base64.b64decode(canvas_base64)
with open("robot_board.png", "wb") as img_file:
    img_file.write(image_data)

# 关闭浏览器
driver.quit()

关键说明 #

• toDataURL()默认生成PNG格式的编码，若需JPEG格式，可传入参数"image/jpeg"，同时可添加质量参数如"image/jpeg", 0.9（取值0-1，值越高质量越好）。
• 必须等待Canvas完全渲染后再提取数据，否则可能得到空白或不完整的图像，示例中用WebDriverWait实现10秒内等待元素加载完成。

内容的提问来源于stack exchange，提问作者ordptt