html2canvas本质是解析dom并重绘到canvas，而非直接drawimage；因drawimage仅支持图像类元素，传入div等会报类型错误，且富文本含样式、伪元素、字体等动态结构，必须用html2canvas等库处理。
不能直接用 drawImage 把富文本 DOM “画”进 Canvas —— 它不是图片，而是带样式、布局、伪元素、字体渲染的动态结构。 你得靠 html2canvas 这类库做 DOM 解析与重绘，否则截图要么空白、要么错位、要么漏样式。
为什么 canvas.drawImage(document.querySelector('.editor')) 会失败
Canvas 的 drawImage 只接受 HTMLImageElement、HTMLVideoElement、HTMLCanvasElement 等原生图像源，不接受 div 或 section。直接传富文本容器会报错：Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(HTMLImageElement or SVGImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas or VideoFrame)'。
常见误操作包括：
- 把编辑器根节点（如
contenteditable的div）直接塞给drawImage - 忽略编辑器内嵌的 iframe、MathML、SVG、自定义 web component，它们不会被自动解析
- 没处理字体加载时机：
font-face异步加载完成前调用 html2canvas，文字会回退成系统默认字体甚至空白
html2canvas 截图前必须做的三件事
富文本编辑器（如 Quill、Tiptap、Slate 或自研 contenteditable）截图质量差，90% 源于初始化配置缺失。重点检查以下三项：
-
useCORS: true：编辑器里若有用户上传的跨域图片（如 OSS、七牛、S3），不加这个参数会导致图片区域空白或污染 canvas，后续toDataURL()报错 -
scale: window.devicePixelRatio || 1：否则在 Retina 屏上截图模糊；若想进一步提升清晰度可设为2，但注意内存占用翻倍 -
logging: false（上线前关闭）+ignoreElements: (el) => el.classList.contains('ql-toolbar') || el.hasAttribute('data-no-screenshot')：跳过工具栏、浮动菜单等非内容区域，避免截入无关 UI
导出 PNG 时遇到 “tainted canvas” 错误怎么办
错误信息典型为：Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. 这说明 canvas 已被跨域资源污染 —— 常见于：<img src="https://xxx.com/avatar.jpg?x-oss-process=image/resize,p_40"> 未配 CORS，或本地用 file:// 协议打开页面。
解决路径很明确：
- 服务端图片响应头必须含
Access-Control-Allow-Origin: *（或指定域名），且前端useCORS: true已开启 - 开发阶段禁用
file://，改用vite preview、http-server或任何本地 HTTP 服务 - 绝对不要设
allowTaint: true：它会让toDataURL()直接抛异常，无法导出，属于无效规避 - 备用方案：对无法控制 CORS 的图片，用
proxy参数走后端中转（如proxy: '/api/cors-proxy?url=...'），但需自行实现该接口
富文本中特殊内容的兼容性陷阱
html2canvas 对现代 CSS 和复杂 DOM 支持有限，以下内容极易出问题：
-
transform、filter、backdrop-filter：会被忽略，元素按原始位置/样式绘制；建议截图前临时移除或降级为translate+opacity - 伪元素（
::before/::after）：仅当 CSS 中显式声明content且值为字符串或 url() 时才可能捕获，attr()不支持 - MathML / LaTeX 渲染（如 KaTeX）：需确保公式已完全渲染完毕再调用 html2canvas，可用
await new Promise(r => setTimeout(r, 100))稍作等待 - video/audio 元素：只截帧，不录声音；若需视频封面，应取
video.videoWidth/video.videoHeight并drawImage(video, ...)单独处理
最常被忽略的一点：编辑器内容区若用了 contain: layout paint style 或 will-change，html2canvas 可能无法正确计算尺寸，截图高度塌陷 —— 截图前临时清除这些 CSS 属性更稳妥。
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
