我之前在项目里也遇到过html2canvas生成的截图分辨率低、画质模糊的问题，折腾了好一阵总结出几个有效的解决办法，你可以挨个试试：

• 利用scale参数提升分辨率
  这是最直接的方法，html2canvas支持通过scale选项设置渲染时的缩放比例。建议直接使用当前设备的像素比（window.devicePixelRatio），这样能适配不同屏幕的高清显示：

  html2canvas(document.querySelector('#target-element'), {
    scale: window.devicePixelRatio // 通常是2或3，根据设备而定
  }).then(canvas => {
    const dataUrl = canvas.toDataURL('image/png');
    // 后续处理dataUrl
  });
  

  原理是先以更高的分辨率渲染画布，再转换成图片，这样导出的截图细节会清晰很多。

• 清理影响渲染的CSS样式
  有些CSS属性会导致html2canvas渲染时模糊：

  • 检查目标元素或其子元素是否用了transform: scale()，如果有，截图前临时移除这个样式，截图后再恢复；
  • 给目标元素添加image-rendering: pixelated;或image-rendering: crisp-edges;，强制浏览器以清晰的方式渲染像素；
  • 避免使用filter: blur()这类模糊效果，除非你特意需要，否则截图前先关闭。

• 处理跨域图片的渲染限制
  如果页面里包含跨域图片，html2canvas默认会用低质量的占位符替代，导致截图模糊。解决办法：

  • 在html2canvas配置里开启useCORS: true；
  • 确保图片所在服务器配置了正确的CORS响应头，允许你的域名访问；
  • 如果无法修改服务器配置，可以把图片转成base64格式后再插入页面，这样就不会有跨域问题了。

• 明确设置toDataURL的质量参数
  虽然PNG是无损格式，但显式设置质量参数可以确保导出的是最高质量：

  const dataUrl = canvas.toDataURL('image/png', 1.0); // 1.0代表最高质量
  

  这个参数对PNG来说影响不大，但能避免某些情况下的隐性压缩，稳妥起见加上更好。

• 检查元素的裁剪与溢出设置
  如果目标元素或其父元素设置了overflow: hidden、clip-path等属性，可能会导致html2canvas渲染时丢失部分细节或强制压缩。截图前可以临时移除这些属性，完成后再恢复。

这些方法组合起来，基本能解决绝大多数html2canvas截图画质差的问题，你可以根据自己的场景调整尝试。

内容的提问来源于stack exchange，提问作者vincent