canvas 是动态绘制的位图，其内容不包含在 html 源码中，因此仅通过 fetch + domparser 解析 html 无法获取实际图像；必须通过运行时访问源页面的活跃 canvas 元素并调用 todataurl() 或 getimagedata() 才能提取内容。
canvas 是动态绘制的位图，其内容不包含在 html 源码中，因此仅通过 fetch + domparser 解析 html 无法获取实际图像；必须通过运行时访问源页面的活跃 canvas 元素并调用 todataurl() 或 getimagedata() 才能提取内容。
在 Chrome 扩展开发中，若需将一个网页中的 Canvas 内容（如图表）复制到另一个页面显示，关键在于理解 Canvas 的本质：它不是静态 DOM 节点，而是由 JavaScript 在内存中绘制的位图缓冲区。直接克隆 <canvas> 元素（包括其 HTML 字符串或 DOM 节点）只会复制空画布——因为绘图状态、像素数据和上下文均未序列化。
✅ 正确做法是：在源页面上下文中执行脚本，读取 canvas 当前像素，并编码为可跨域传输的数据。以下是推荐实现流程：
1. 注入 content script 到目标页面（源页面）
在 manifest.json 中声明匹配权限：
Canvas 内容工厂（网格生成→多页 PDF→SVG 精准复刻）
下载
用户要生成可打印的中文字帖/练习纸、导出多页 A4 PDF 报告，或把 SVG 设计稿零误差还原到 Canvas 时使用。本技能是「Canvas 内容工厂闭环」的总控，编排：网格渲染引擎(13 种教育网格+拼音标注) → 多页 PDF 导出(A4 合成) → SVG 精准复刻(坐标误差<0.001px)。触发词：生成字帖、练习纸、导出 PDF、SVG 转 Canvas、印刷级还原、A4 报告、米字格田字格。
"content_scripts": [{
"matches": ["https://example.com/*"],
"js": ["canvas-reader.js"],
"run_at": "document_idle",
"world": "MAIN"
}]2. 在 canvas-reader.js 中读取 canvas 数据
// 查找目标 canvas（例如 chart-container 下的 canvas）
const canvas = document.querySelector('.chart-container canvas');
if (!canvas) {
console.error('Canvas not found');
chrome.runtime.sendMessage({ type: 'canvas_error', message: 'No canvas found' });
return;
}
try {
// 注意：若 canvas 已被跨域资源绘制（如图片未设置 CORS），会触发 tainted canvas 错误
const dataUrl = canvas.toDataURL('image/png'); // 安全且兼容性好
chrome.runtime.sendMessage({
type: 'canvas_data',
dataUrl,
width: canvas.width,
height: canvas.height
});
} catch (e) {
console.error('Failed to read canvas:', e);
chrome.runtime.sendMessage({ type: 'canvas_error', message: e.message });
}3. 在 service worker 或 popup 中接收并渲染
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
if (message.type === 'canvas_data') {
const img = new Image();
img.src = message.dataUrl;
img.onload = () => {
const targetContainer = document.getElementById('display-area');
targetContainer.innerHTML = '';
targetContainer.appendChild(img);
};
}
});⚠️ 重要限制与注意事项：
- CORS 敏感性：若 canvas 曾绘制过跨域图像（如 <img src="https://other-domain.com/chart.png">）且未设置 crossOrigin="anonymous"，则 canvas 被标记为“tainted”，toDataURL() 和 getImageData() 均会抛出安全错误；
- 时机问题：确保 canvas 已完成绘制（可监听 window.onload、图表库的渲染完成事件，或使用 MutationObserver 监控 .chart-container 变化）；
- 性能考量：高分辨率 canvas 生成的 base64 数据可能很大，建议压缩为 WebP（toDataURL('image/webp', 0.8)）或分块传输；
- 替代方案（高级）：对于复杂场景，可注入 OffscreenCanvas 或使用 canvas.getContext('2d').getImageData() + ArrayBuffer 二进制传输，但需额外处理跨域与序列化。
总之，Canvas 不可“静态复制”，而需“动态捕获”。唯有在源页面真实运行环境中读取其像素数据，才能真正实现跨页面复用。
