Canvas 的内容是动态绘制的，不包含在 HTML 源码中；仅通过解析 HTML 字符串无法获取其像素数据，必须访问源页面的实时 DOM 并调用 toDataURL() 或 getImageData() 才能提取图像内容。
canvas 的内容是动态绘制的，不包含在 html 源码中；仅通过解析 html 字符串无法获取其像素数据，必须访问源页面的实时 dom 并调用 `todataurl()` 或 `getimagedata()` 才能提取图像内容。
在 Chrome 扩展开发中，若想将目标网页中
✅ 正确做法是通过 Content Script 注入目标页面，在源页面上下文中读取 Canvas 数据，再跨域传递至你的弹窗或注入页：
// content-script.js（注入目标网页）
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
if (request.action === "getCanvasData") {
const canvas = document.querySelector(".chart-container canvas");
if (!canvas) return sendResponse({ error: "Canvas not found" });
try {
// 若 Canvas 未被跨域资源污染（tainted），可安全导出
const dataUrl = canvas.toDataURL("image/png"); // 返回 base64 图片
sendResponse({ success: true, dataUrl });
} catch (e) {
sendResponse({ error: "Canvas is tainted — cannot read pixel data", details: e.message });
}
}
});
// 弹窗或注入页脚本（调用方）
async function copyCanvasFromPage(url) {
// 1. 确保目标页已注入 content script（可通过 chrome.scripting.inject 调用）
await chrome.scripting.executeScript({
target: { url },
files: ["content-script.js"]
});
// 2. 向目标页发送消息获取 Canvas 数据
const response = await chrome.runtime.sendMessage({
action: "getCanvasData"
});
if (response.success && response.dataUrl) {
const img = new Image();
img.src = response.dataUrl;
img.onload = () => {
document.getElementById("target-container").appendChild(img);
};
} else {
console.error("Failed to copy canvas:", response.error);
}
}
⚠️ 注意事项：
- 跨域限制：若 Canvas 绘制了来自其他域名的图片（如 CDN 图标、远程图表数据图），则会被标记为 tainted，toDataURL() 和 getImageData() 将抛出 SecurityError。此时唯一可行方案是让源页面主动导出（如通过 postMessage 发送 canvas.toBlob() 结果），或要求源站启用 CORS。
- 尺寸一致性：toDataURL() 默认使用 canvas 的 width/height 属性值（CSS 缩放不影响），确保目标显示区域按原始分辨率渲染，避免模糊。
- 性能考量：高分辨率 Canvas（如 2000×1500）生成的 base64 字符串可能达数 MB，建议改用 canvas.toBlob() 配合 URL.createObjectURL() 流式传输。
总结：Canvas 不是静态 DOM 节点，而是“画布”对象。复制其内容的本质是截图式捕获，而非 HTML 克隆。务必在源页面上下文中执行 toDataURL() 或 transferControlToOffscreen()（WebGL 场景），并妥善处理跨域与错误边界。
