Canvas无法直接获取绘图数据，必须通过page.evaluate()在浏览器上下文中调用toDataURL()或getImageData()；需确保渲染完成、处理跨域污染、适配WebGL及高分辨率导出陷阱。
Canvas元素本身无法直接获取绘图数据
Pyppeteer（或任何基于Chrome DevTools Protocol的工具）无法读取Canvas内部的像素或路径数据，因为Canvas是位图渲染目标，绘制后原始矢量指令就丢失了。你看到的只是最终像素，canvas.toDataURL() 或 canvas.getContext('2d').getImageData() 才是真正能拿到数据的入口——但必须在页面上下文中执行。
常见错误是试图用 page.query_selector() 拿到 <canvas> 元素后直接调用 .toDataURL()，这会报 TypeError: canvas.toDataURL is not a function，因为元素对象不包含方法，只包含DOM属性。
- 必须用
page.evaluate()进入浏览器上下文执行JS - 确保Canvas已完成绘制（可能需
await page.wait_for_timeout(100)或监听自定义事件） - 若Canvas使用WebGL，
getContext('2d')会返回null，需改用getContext('webgl')并读取帧缓冲区（更复杂）
提取Canvas图像数据的最小可行代码
以下代码从已渲染的2D Canvas中获取Base64图像数据：
canvas_data = await page.evaluate('''(selector) => {
const canvas = document.querySelector(selector);
if (!canvas) return null;
return canvas.toDataURL('image/png'); // 注意：仅支持 'image/png' 和 'image/jpeg'
}''', 'canvas#myChart')如果要提取原始像素（例如做OCR或颜色分析），改用：
立即学习“Python免费学习笔记（深入）”；
pixel_data = await page.evaluate('''(selector) => {
const canvas = document.querySelector(selector);
const ctx = canvas.getContext('2d');
if (!ctx) return null;
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
return {
width: imageData.width,
height: imageData.height,
data: Array.from(imageData.data) // 转为普通数组，避免JSON序列化失败
};
}''', 'canvas.chart-canvas')-
getImageData()返回的imageData.data是Uint8ClampedArray，不能直接JSON序列化，必须转成Array.from() - Canvas宽高可能被CSS缩放影响，
canvas.width/canvas.height才是真实像素尺寸 - 跨域Canvas（如drawImage加载外站图片）会触发“Tainted”异常，
getImageData()抛出SecurityError
处理动态/懒加载Canvas的时机问题
很多图表库（如Chart.js、ECharts）在Canvas渲染后还会触发动画或异步重绘，直接在 page.goto() 后立刻提取大概率拿到空白帧。
- 优先监听图表库的渲染完成事件，例如Chart.js的
onAnimationComplete回调，可提前注入监听逻辑 - 退而求其次用
page.wait_for_function()检查Canvas是否非空：await page.wait_for_function("() => document.querySelector('canvas').width > 0") - 避免用固定
wait_for_timeout()，不同机器/网络下渲染时间波动大，容易漏帧或超时 - 若Canvas内容由WebSocket或fetch更新，需在对应请求完成后再提取，可用
page.on('response', ...)监听关键API
导出高分辨率Canvas图像的陷阱
网页显示的Canvas常因CSS缩放（如 transform: scale(2)）导致模糊，直接 toDataURL() 输出的是低分辩率位图。
正确做法是临时放大Canvas的内在尺寸（canvas.width/canvas.height），再重绘：
high_res_data = await page.evaluate('''(selector, scale = 2) => {
const canvas = document.querySelector(selector);
const ctx = canvas.getContext('2d');
const originalWidth = canvas.width;
const originalHeight = canvas.height;
<p>canvas.width = originalWidth <em> scale;
canvas.height = originalHeight </em> scale;
ctx.scale(scale, scale);</p><p>// 重新绘制（需图表库支持重绘，或手动调用其render方法）
// 此处依赖具体图表库API，例如 Chart.js 实例需调用 chart.resize() + chart.update()</p><p>return canvas.toDataURL('image/png');
}''', 'canvas#main', 2)- 单纯放大canvas尺寸不会自动重绘内容，必须触发图表库的重绘逻辑，否则仍是空白或错位
- 某些库（如ECharts）提供
setOption({ devicePixelRatio: 2 })配置，比手动操作Canvas更可靠 - 高分辨率导出显著增加内存占用，Pyppeteer进程可能OOM，建议导出后立即释放：
del high_res_data
实际中最容易被忽略的是Canvas的“污染状态”和重绘时机——前者让 getImageData() 直接失败且无明确提示，后者导致90%的提取结果为空白。调试时先在DevTools里手动运行相同JS，确认浏览器端能拿到数据，再迁移到Pyppeteer。
