核心问题是逻辑像素与物理像素未对齐，需用devicepixelratio动态适配：将canvas宽高及scale均乘以window.devicepixelratio，并确保原始图片尺寸≥样式尺寸×dpr，同时禁用劣质插值、导出png、避免transform缩放。
前端渲染海报时图片模糊，核心问题不是“图没做好”，而是逻辑像素和物理像素没对齐。高 DPI 屏幕（比如 MacBook Retina、iPhone、4K 显示器）上，浏览器默认用 1 倍图渲染，但实际需要 2 倍甚至 3 倍分辨率才能看清。控制清晰度的关键，在于让 canvas 或 html-to-image 的输出尺寸、缩放行为与设备真实像素匹配。
用 devicePixelRatio 动态适配缩放比例
这是最直接有效的做法。`window.devicePixelRatio` 返回当前设备的像素比（常见值：1.0/1.5/2.0/3.0），它就是你该放大多少倍的依据：
- 设置
scale参数为window.devicePixelRatio（html2canvas、dom-to-image 都支持） - 同时把 canvas 或目标容器的宽高也乘以该值，避免拉伸失真
- 例如：
width: elm.offsetWidth * window.devicePixelRatio，height: elm.offsetHeight * window.devicePixelRatio - 若需兼容低 DPR 设备（如旧安卓机），可设最小值：
Math.max(2, window.devicePixelRatio)
确保原始图片资源足够大
再高的 scale 也救不回一张 200×200 的小图。海报中所有图片（尤其是背景图、头像、图标）必须满足：
- 原始尺寸 ≥ 样式尺寸 × 设备像素比
- 推荐提供 @2x 和 @3x 版本，并用
srcset让浏览器自动选图：<img src="bg@1x.jpg" srcset="bg@1x.jpg 1x, bg@2x.jpg 2x, bg@3x.jpg 3x"> - 避免用 CSS
width/height强行缩放小图——这等于让浏览器做劣质插值
调整绘制参数，避开默认降质陷阱
很多库默认启用抗锯齿或压缩，对文字和线条图反而不利：
- html2canvas 中关闭平滑：
logging: false, useCORS: true, allowTaint: false - dom-to-image 可加 style 覆盖：
style: { 'image-rendering': 'crisp-edges' }（适合图标、文字） - 导出为 PNG 而非 JPEG，避免有损压缩；若必须用 JPEG，quality 至少设为 0.95
- 慎用
transform: scale()替代 canvas 缩放——它只是 CSS 渲染层放大，不提升实际像素数
规避 iOS 和低端安卓的兼容坑
某些机型（如 iOS 14.2）首次调用 html2canvas 会失败或丢图：
- 可尝试重试机制：最多 3 次，取最后一次结果
- 安卓低端机文字渲染异常，建议统一使用系统安全字体（如
system-ui），避免自定义 webfont 加载失败导致空白 - 背景图尽量不用
background-image，改用<img>标签 +position: absolute定位，更易被 html2canvas 捕获
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
