响应式图片与截屏保存需分别按物理像素控制：图片用srcset+sizes精准供给，截屏用devicePixelRatio动态缩放canvas并禁用模糊样式，关键场景建议服务端截图。
移动端 H5 响应式图片 + 截屏保存功能要同时保证清晰，不能只靠“看起来正常”。核心矛盾在于：响应式图片本身要省流量、适配 DPR；而截屏（如 html2canvas）又得绕过浏览器渲染链，直接采样像素。两者逻辑不同，混用就糊。
响应式图片本身得先清晰
仅写 max-width: 100%; height: auto 是无效的——浏览器仍下载 2000px 大图，在 iPhone 上缩到 375px 显示，物理像素全丢了。必须用真正响应式的方案：
-
优先用
srcset + sizes搭配w描述符：例如srcset="img-480w.jpg 480w, img-768w.jpg 768w, img-1200w.jpg 1200w"，配合sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw"。sizes 必须匹配真实布局宽度，写错等于没写。 -
避免用 CSS 背景图做关键内容图：background-size 缩放不可控，object-fit 也不生效除非父容器有明确宽高。该用
-
导出切图必须带 DPR 标识：设计师给 @2x/@3x 图，命名和路径要一致（如
icon@2x.png、icon@3x.png），否则 srcset 找不到对应资源。
截屏保存时图片不糊的关键控制点
html2canvas 默认在 1x 环境下绘制，遇到 DPR=3 的手机，输出就是 1/3 物理像素密度——再放大也补不回细节。必须主动适配设备像素比：
-
按
window.devicePixelRatio动态设 scale：调用时传入{ scale: window.devicePixelRatio || 2 }。注意不要硬写 3，部分安卓机 DPR 不稳定，取整后更稳妥。 -
手动修正 canvas 宽高，避免浏览器缩放干扰：设置 canvas 的
width和height属性为实际物理像素值（即offsetWidth * scale），但用 CSS 控制显示尺寸（如style="width: 100%; height: auto;"）。 -
禁用模糊降级行为：html2canvas 默认会跳过跨域图片、SVG、CSS filter 等。确保所有图片加
crossOrigin="anonymous"，且 CDN 支持 CORS 头；避免在截图区域用filter: blur()或transform: scale()类样式。
替代方案：服务端截图更稳
前端截图受 DOM 渲染时机、字体加载、异步资源、DPR 判断误差等影响太大。对营销页、分享长图等关键场景，建议走服务端渲染：
- 把 HTML 结构 + 数据发到服务端，用 Puppeteer 或 Playwright 截图，可精确控制 viewport、deviceScaleFactor、emulateNetwork、字体注入等；
- 服务端能统一用 DPR=2 渲染，输出 PNG，再返回 base64 或 CDN 链接，规避所有前端兼容性问题；
- 适合需强一致性的场景：比如带用户昵称/金额的分享图、合规水印图、含 WebFont 的海报。
清晰不是靠“放大再压缩”，而是从资源供给、渲染控制、采样精度三端对齐。响应式图片管下载，截屏管采样，两者都得按物理像素说话。
