html2canvas无法截取页面标注层，因其只渲染目标dom及其子树；需将标注元素动态插入截图容器内，禁用隐藏样式，避免transform缩放，箭头须用canvas或svg绘制，文字标注应同步至canvas层并预加载字体。
用 html2canvas 截当前页但标不上去？先搞清它不支持 DOM 覆盖层
直接用 html2canvas 截图时，所有标注（箭头、文字框、高亮遮罩）如果只是“浮在页面上”的 div，默认不会被渲染进截图——因为 html2canvas 只抓目标 DOM 节点及其子树，不捕获绝对定位在它外面的标注层。
实操建议：
- 把标注元素（如
div.arrow、div.text-label）动态 append 到要截图的容器内部，而不是挂到body底层 - 截图前临时移除
pointer-events: none或opacity: 0等隐藏类，确保样式可计算 - 避免用
transform: scale()做缩放标注，html2canvas对 transform 支持不稳定，改用width/height+font-size缩放 - 截图后立刻恢复 DOM 结构，否则影响后续交互
画箭头得用 canvas 原生 API，别指望 CSS 伪元素自动进截图
CSS 画的箭头（比如 ::before + border 技巧）在 html2canvas 中大概率消失，必须用真实 canvas 绘制或转为 SVG path 插入目标容器。
实操建议：
- 标注阶段用
canvas元素叠加在页面上实时绘制箭头，再把该canvas作为子节点传给html2canvas - 若用 SVG，确保
<svg></svg>是内联写法（非<img src="xxx.svg">），且没有跨域资源引用 - 箭头起点/终点坐标要用
getBoundingClientRect()计算相对容器的偏移，别直接用pageX/Y—— 否则滚动后位置错乱 - 注意 canvas 像素比：
canvas.width = rect.width * window.devicePixelRatio，否则高清屏下箭头模糊
FileSaver.js 保存截图失败？检查 blob 类型和 MIME 是否匹配
常见报错 Failed to execute 'createObjectURL' on 'URL': Overload resolution failed，多因传了错误类型 blob 或未指定 MIME。
实操建议：
-
html2canvas返回的是HTMLCanvasElement，调用.toBlob(callback, 'image/png', 0.95)，不要漏掉第三个质量参数（JPEG 才需要） - callback 里用
saveAs(blob, 'annotation.png')，blob 必须是image/png类型，否则FileSaver.js会静默失败 - Chrome 119+ 对跨域 canvas 有更严限制：若页面含跨域图片且未加
crossOrigin="anonymous"，toBlob会抛SecurityError - 移动端 Safari 不支持
saveAs触发下载，需降级为window.open(URL.createObjectURL(blob))并引导用户长按保存
文字标注输入框失焦就消失？别用 contenteditable 混搭 canvas
很多方案试图让 div[contenteditable] 浮在 canvas 上编辑文字，结果截图无文字、失焦后内容不更新、光标错位——根本问题是 contenteditable 不是真实 DOM 子节点，且样式无法被 html2canvas 正确拾取。
实操建议：
- 文字标注统一走「双层同步」：用户在浮层
input输入 → 实时将值 + 位置渲染到 canvas 上（用fillText）→ 截图只依赖 canvas 层 - 输入框用
position: fixed+transform: translateZ(0)提升合成层，避免 iOS 上输入时页面闪动 - 字体必须预加载：用
document.fonts.load('bold 14px "Helvetica Neue"')等待完成后再允许标注，否则 canvas 文字渲染为空白 - 中文换行需手动切分：
ctx.measureText配合空格/标点断行，canvas不支持 CSS 的word-wrap
标注逻辑本身不难，难的是让每个像素在截图里准确出现——尤其是混合了 CSS 动画、缩放容器、iframe 子页、Web Font 的场景。这些地方一旦出问题，基本只能靠逐层 console.log 容器的 getComputedStyle 和 getBoundingClientRect 来对齐。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
