Canvas导出高清图片的关键是适配设备像素比（dpr），即按css尺寸×dpr设置canvas宽高并调用ctx.scale(dpr,dpr)，多层合并时需统一缩放，html2canvas需设scale:devicePixelRatio，并对1px线条加0.5偏移抗锯齿。
Canvas 导出高清图片的关键，在于让绘制像素匹配设备物理像素，而不是只按 CSS 逻辑像素渲染。真机上模糊，根本原因是没适配高分屏的 dpr（设备像素比），导致系统强行拉伸、插值模糊。
适配设备像素比（dpr）是核心
高分屏（如 iPhone Retina、安卓旗舰机）的 dpr 常为 2 或 3。若 canvas.width/height 按 CSS 尺寸设为 600×400，而 dpr=2，实际应使用 1200×800 的物理画布尺寸，并缩放绘图上下文，否则文字和线条必然发虚。
- 用
wx.getWindowInfo().pixelRatio（小程序）或window.devicePixelRatio（H5）获取当前 dpr - 将 canvas 元素的
width和height属性设为cssWidth × dpr和cssHeight × dpr - 调用
ctx.scale(dpr, dpr)，使后续所有绘图坐标保持逻辑尺寸不变 - CSS 样式中仍设
width: 600px; height: 400px，确保布局不被撑大
多层 Canvas 合并导出时也要统一缩放
如果页面用多个 canvas 分层（比如背景层 + 贴纸层 + 文字层），合并前必须确保每一层都已按相同 dpr 初始化。否则某一层未放大，合并后该层内容就会模糊。
- 创建临时 canvas，尺寸按目标逻辑宽高 × dpr 计算
- 对每个源 canvas，先检查其是否已按 dpr 缩放；若未缩放，需先用
drawImage按比例绘制到新 canvas 上 - 再调用
tempCanvas.toDataURL('image/jpeg', 0.95)导出，质量建议 0.9–0.95
html2canvas 导出高清图的实用配置
对 DOM 截图场景，html2canvas 默认不处理 dpr，容易糊。需手动干预：
立即学习“Java免费学习笔记（深入）”；
- 设置
scale: window.devicePixelRatio选项，强制提升渲染分辨率 - 添加
useCORS: true和allowTaint: false，避免跨域图片被降质 - 指定
logging: false, scrollY: 0减少干扰，确保完整区域被捕捉 - 导出后可再用 canvas 压缩函数调整尺寸与质量，平衡清晰度和文件大小
导出前做一次“抗锯齿微调”
即使 dpr 正确，1px 线条在高分屏上仍可能因绘制起点偏移而模糊。简单有效的方式是：对需要锐利边缘的图形（如签名、印章、边框），把坐标加 0.5：
ctx.beginPath(); ctx.moveTo(10.5, 20.5); ctx.lineTo(100.5, 20.5);- 或统一设置
ctx.lineCap = 'round'/'square'，避免默认'butt'造成的半像素截断
