移动端海报模糊主因是未正确利用设备像素比（dpr），需用 window.devicepixelratio 动态放大 canvas 分辨率，配合 img 替代背景图、关闭抗锯齿、整数文字字号及后端分块合成。
移动端海报生成模糊，核心不是“适配”本身，而是设备像素比（dpr）没被正确利用。HTML页面按CSS像素渲染，但高DPR屏幕（如iPhone Retina、安卓旗舰机）实际物理像素是CSS像素的2倍或3倍。html2canvas默认只按CSS尺寸绘制，相当于把4K内容压缩到1080p画布里，自然糊。
用 devicePixelRatio 动态放大 canvas 实际分辨率
这是最直接有效的做法。不能只靠 CSS 缩放，必须提升 canvas 内部像素数量：
- 获取当前设备 dpr：
window.devicePixelRatio（通常为2或3） - 在 html2canvas 配置中设置
scale为 dpr 值（如scale: window.devicePixelRatio） - 同时显式指定
width和height为 DOM 元素的scrollWidth × dpr和scrollHeight × dpr，避免因缩放导致截断或留白 - 注意：仅设
scale不够——若目标DOM宽300px、dpr=3，scale:3会让 canvas 内部变成900px宽，但若没同步调整 canvas.width 属性，部分浏览器仍会按默认逻辑降采样
背景图改用 ![]()
标签而非 CSS background-image
html2canvas 对 CSS 背景图（尤其是渐变、多背景、background-size: cover）支持差，常出现拉伸失真或完全不渲染。换成 <img> 可确保原图像素被完整采样：
- 把海报中的 banner、头像、二维码等全部用
<img src="...">替代background: url(...) - 给 img 设置
width: 100%; height: auto;并包裹在固定宽高的容器内，保持布局稳定 - 务必添加
crossOrigin="anonymous"属性（尤其图片跨域时），否则 html2canvas 会因安全限制跳过该图片
规避文字和细线模糊的关键细节
即使 canvas 分辨率上去了，文字和1px边框仍可能发虚，因为 Canvas 绘制默认启用抗锯齿：
- 对 canvas 2D 上下文关闭平滑插值：
ctx.imageSmoothingEnabled = false（需通过 html2canvas 的onclone钩子获取 ctx 后设置） - 文字建议用整数字号（如 24px、32px），避免 13.5px 这类半像素值；行高也取整
- 1px 边框可改用
transform: scale(0.5)在高分辨率 canvas 上画 2px 线再缩小，或直接用 box-shadow 模拟 - 避免使用 CSS filter（如 blur、contrast），html2canvas 不支持或渲染异常
后端合成辅助应对超长/复杂海报
单页海报过高（如 >5000px）时，前端 canvas 易触发内存溢出或绘制失败，尤其低端安卓机：
- 将海报按区域切分成若干块（如每块高度 2000px），分别用 html2canvas 生成 base64 图片
- 前端汇总所有 base64，传给后端（如 Node.js + Canvas 或 Python + Pillow）拼接成完整高清图
- 后端可统一设置 DPI（如 300dpi）、优化压缩质量（JPEG quality=0.95），比前端更可控
- 此方案兼顾兼容性与清晰度，适合电商邀请函、长图文报告等真实业务场景
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
