offscreencanvas 可在 web worker 中通过序列化 dom 数据并手动绘制实现网页截图。主线程需提取 html、样式与布局信息发送至 worker；worker 创建 offscreencanvas 并用 2d 上下文还原视觉效果；最终以 imagebitmap 传回主线程渲染。
OffscreenCanvas 允许在 Web Worker 中直接操作 Canvas 渲染上下文，绕过主线程的 DOM 限制，从而安全、高效地生成网页截图（如 Canvas 绘制内容、SVG 转绘、或模拟页面快照）。关键在于：Worker 中不能访问 document 或真实 DOM 节点，所以“网页截图”需理解为「基于结构化数据（如 DOM 快照、CSSOM、布局信息）在 Worker 中重建并绘制到 OffscreenCanvas」，而非直接调用 html2canvas 或 captureVisibleTab 等主线程 API。
1. 主线程：序列化页面状态并发送给 Worker
由于 Worker 无法读取 DOM，你需要主动将需要截图的内容“描述”出来，常用方式包括：
-
使用
XMLSerializer序列化目标元素 HTML 字符串（适合静态结构，不含运行时样式/尺寸） -
结合
getComputedStyle和getBoundingClientRect提取关键样式与布局数据（如宽高、transform、background、font 等），打包为纯 JS 对象 - 用
canvas.captureStream()或documentPictureInPicture不适用此场景——它们依赖主线程渲染
示例（主线程）：
const target = document.getElementById('chart');
const html = new XMLSerializer().serializeToString(target);
const rect = target.getBoundingClientRect();
const style = getComputedStyle(target);
<p>const snapshot = {
html,
width: rect.width,
height: rect.height,
styles: {
backgroundColor: style.backgroundColor,
fontFamily: style.fontFamily,
fontSize: style.fontSize,
// ……按需提取
}
};</p><p>worker.postMessage({
type: 'render',
payload: snapshot,
transfer: [] // OffscreenCanvas 可 transfer，但这里暂不传 canvas
});</p>
2. Worker 中：创建 OffscreenCanvas 并绘制内容
Worker 内通过 new OffscreenCanvas(width, height) 创建画布，获取 2D 或 WebGL 上下文，然后手动还原视觉效果。注意：Worker 中没有 CSS 解析器、HTML 解析器或排版引擎，所有绘制必须由你编码实现（例如用 ctx.fillText 模拟文本、ctx.fillStyle 设置背景、ctx.fillRect 绘制色块）。
若需更高保真度，可引入轻量级渲染库（如 roughjs、canvas2svg Worker 版本），或预编译 SVG 字符串后用 OffscreenCanvas 的 drawImage + Blob + createImageBitmap 加载（支持 SVG → bitmap）。
示例（Worker）：
self.onmessage = async function(e) {
if (e.data.type === 'render') {
const { payload } = e.data;
const { width, height, html, styles } = payload;
<pre class="brush:php;toolbar:false;">const canvas = new OffscreenCanvas(width, height);
const ctx = canvas.getContext('2d');
// 绘制背景
ctx.fillStyle = styles.backgroundColor || '#fff';
ctx.fillRect(0, 0, width, height);
// 简单文本示意（实际中需解析 HTML 片段、计算换行、字体度量等）
ctx.font = `${styles.fontSize} ${styles.fontFamily}`;
ctx.fillStyle = '#333';
ctx.fillText('Rendered in Worker', 20, 50);
// ✅ 关键：将 canvas 转为 ImageBitmap，可 transfer 回主线程
const bitmap = await canvas.transferToImageBitmap();
self.postMessage({
type: 'result',
bitmap
}, [bitmap]); // transfer 列表必须包含 bitmap} };
3. 主线程接收并展示 ImageBitmap
ImageBitmap 是可跨线程传输的高性能图像对象，可在主线程直接绘制到普通 <canvas></canvas>，或设置为 <img> 的 src（需转为 blob URL）。
- 推荐方式：绘制到已有 canvas> —— 零解码开销，最高效
-
兼容方式：转为 blob URL 后赋给
—— 需额外 blob 操作，但更通用
示例（主线程）：
worker.onmessage = function(e) {
if (e.data.type === 'result') {
const canvas = document.getElementById('output-canvas');
const ctx = canvas.getContext('2d');
<pre class="brush:php;toolbar:false;">// 直接 drawImage ImageBitmap
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(e.data.bitmap, 0, 0);
// ✅ 可选：复用 bitmap，或自行 cleanup（bitmap 自动释放）} };
4. 进阶提示：提升实用性与保真度
纯手工绘制 HTML 成本极高。生产环境建议组合策略：
- 服务端渲染快照：将 HTML + CSS 发送到服务端（如 Puppeteer），生成 PNG 返回，Worker 仅作中转
-
Client-side “DOM to Canvas” 库改造：如修改
dom-to-image，使其输出绘制指令数组（而非直接调用 ctx），再由 Worker 执行指令 -
利用
convertCanvasToBlob（Chrome 122+）：OffscreenCanvas 支持直接导出 blob，适合后续上传或下载 -
注意设备像素比（dpr）：Worker 不知晓
window.devicePixelRatio，需主线程传入，并按比例缩放 canvas 尺寸和绘制坐标
