05 · 网页复制成图片至剪贴板

字数: 0 字 时长: 0 分钟

一句话

navigator.clipboard.writeText 只能复制文字；要把 DOM 区域变成图片 进剪贴板，需要 DOM → Canvas → Blob → Clipboard。

和你日常工作的关系

飞书/Notion「复制为图片」、分享卡片、生成海报，都是这类需求。自己手写 DOM 转 Canvas 极难，一般用 html2canvas 或 dom-to-image。

流程

1. 选中根节点 element
2. html2canvas(element)：遍历 DOM、算样式、画到 canvas（处理图片跨域 CORS、伪元素等）
3. canvas.toBlob()
4. navigator.clipboard.write([new ClipboardItem({ 'image/png': blob })])

常见坑

• 跨域图要 crossOrigin
• 太大区域内存爆
• 部分 CSS（filter、shadow）渲染不一致
• 需 HTTPS 且用户授权剪贴板

演示

无内置 demo（依赖库体积大）。可在自己项目 npm i html2canvas 对某个 div 试一次。

面试 STAR

• 需求：一键复制区块为图。
• 方案：html2canvas + Clipboard API。
• 难点：样式还原、清晰度、devicePixelRatio。

课程资料

05. 网页复制成图片至剪贴板/课件资料/05-技术讲解.md