canvas.toDataURL()无法直接转换HTML元素，必须先用html2canvas等库模拟渲染或手动绘制到canvas；导出时需注意格式兼容性、色彩空间、设备适配及微信等环境限制。
canvas.toDataURL() 不能直接转 HTML 元素
HTML 元素（比如 <div>、<table>）本身不是图像，canvas.toDataURL() 只能导出 canvas 已绘制的内容，不会自动“截图”页面元素。想让 HTML 变成 canvas 图像，得先把它渲染进 canvas —— 但浏览器原生不支持直接 drawHTML。
常见错误现象：ctx.drawImage(document.getElementById('myDiv'), 0, 0) 报错 TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(HTMLImageElement or SVGImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas)'。
- 浏览器不把 DOM 元素当可绘制源，这是安全限制，也是设计使然
- 真正可行的路径只有两条：用第三方库做 DOM 快照，或手动重绘关键内容到 canvas
- 前者适合展示型需求（如导出报表页），后者适合可控、轻量、需精确控制像素的场景（如生成带文字的二维码卡片）
html2canvas 是最常用且相对可靠的方案
html2canvas 把目标元素的样式和结构尽可能还原为 canvas 内容，不是截图，而是“模拟渲染”。它不依赖服务端，纯前端运行，但要注意它的行为边界。
使用场景：导出用户填写的表单预览、分享活动海报、保存数据看板快照。
立即学习“前端免费学习笔记（深入）”；
- 它不执行 JS 逻辑（比如
onclick不触发，动态加载的图片需确保已加载完成） - 对 CSS 的支持有限：
filter、transform: rotateZ、mask-image等可能被忽略或降级 - 默认会跳过
iframe和跨域图片（会报SecurityError），需提前设置allowTaint: true+ CORS 配置（仅限同域或服务端配了Access-Control-Allow-Origin） - 性能敏感：大表格或含大量 SVG 的区域容易卡顿，建议加
logging: false和useCORS: true
简短示例：
html2canvas(document.getElementById('report'), {
useCORS: true,
allowTaint: false,
logging: false,
scale: window.devicePixelRatio || 1
}).then(canvas => {
const url = canvas.toDataURL('image/png');
const link = document.createElement('a');
link.href = url;
link.download = 'report.png';
link.click();
});
用 Canvas 2D API 手动绘制比想象中更可控
如果你只转少量、结构固定的 HTML（比如一个带标题+数值的卡片），手动用 fillText、strokeRect、drawImage 绘制反而更稳——没有样式兼容性问题，文件体积小，还能自由缩放抗锯齿。
参数差异明显：ctx.font 要显式设字号和字体族，ctx.textBaseline 默认是 alphabetic（不是 middle），ctx.fillText 的坐标是基线位置，不是文字顶部。
- 中文换行需自己切字、测宽、逐行
fillText；英文可用ctx.measureText()判断是否超宽 - 背景色要用
fillRect显式画，canvas 默认透明，导出 PNG 时若没设背景，会是通透黑底 - 避免用
document.fonts.load等异步等字体，直接 fallback 到系统已有字体（如'14px sans-serif'）更可靠 - 导出高清图记得按
window.devicePixelRatio缩放 canvas 的width/height属性，再用 CSS 缩回显示尺寸
导出图像时容易被忽略的细节
很多人调通 toDataURL 就以为结束了，结果在 iOS 或微信里点开是黑图，或 Windows 上颜色发灰。
-
toDataURL('image/jpeg')在 Safari 和部分安卓 WebView 中不支持 alpha 通道，强制用jpeg会导致半透明元素变黑，优先用png - canvas 默认色彩空间是 sRGB，但某些高色域屏幕（如 MacBook Pro）下，未指定
colorSpace参数可能导致色偏；现代写法可加{ colorSpace: 'srgb' }（需检查浏览器支持） - 微信内置浏览器对
data:URL 的a[download]支持极差，必须用location.href = url触发新页下载，或走后端中转 - 大图（>4MB）在低内存安卓机上可能触发 canvas 清空，建议限制输出宽度 ≤1200px，或分块渲染
复杂点从来不在“能不能转”，而在于“转出来的图在谁的设备上能正常打开、颜色对不对、文字清不清楚”。别急着封装通用函数，先跑通目标机型的真实链路。
