html2canvas截图为啥模糊？都是devicePixelRatio惹的祸！

HTML2Canvas 截图：警惕 DevicePixelRatio 的陷阱

什么是 DevicePixelRatio？

在现代设备上，屏幕像素往往比您看到的像素要多。例如，Retina 显示器上的一像素实际上是由四个物理像素组成的。设备像素比（DevicePixelRatio）表示设备上物理像素与 CSS 像素的比例。因此，Retina 显示器的 DevicePixelRatio 为 2。

DevicePixelRatio 如何影响 HTML2Canvas 截图？

当使用 HTML2Canvas 将网页截图时，它会根据 CSS 像素创建图像，而不是物理像素。这意味着当 DevicePixelRatio 大于 1 时，截图就会变得模糊，因为 CSS 像素被映射到多个物理像素。

解决 HTML2Canvas 截图模糊的方案

有几种方法可以解决 HTML2Canvas 截图模糊的问题：

1. 使用 canvas.toDataURL() 方法

const canvas = document.querySelector('canvas');
const dataURL = canvas.toDataURL('image/png', 1);

toDataURL() 方法会将 Canvas 内容导出为 PNG 图像。质量参数指定图像质量，范围从 0 到 1，其中 1 表示最高质量。

2. 使用 HTML2Canvas 库的 scale() 方法

html2canvas(element, {
  scale: window.devicePixelRatio
});

scale() 方法调整截图的缩放比例。通过将其设置为 window.devicePixelRatio，您可以让 HTML2Canvas 根据物理像素生成图像。

3. 使用 CSS 媒体查询

@media (min-resolution: 2dppx) {
  canvas {
    scale: 2;
  }
}

媒体查询允许您根据设备分辨率调整样式。在此示例中，当设备分辨率大于等于 2dppx（2x 设备像素比）时，Canvas 元素的缩放比例将设置为 2。

4. 使用第三方库

诸如 dom-to-image 和 html-to-image 之类的第三方库提供了简便的方法来生成清晰的截图，而无需处理 DevicePixelRatio。

结论

通过了解 DevicePixelRatio 并使用适当的技术，您可以轻松生成清晰的 HTML2Canvas 截图。无论您是使用原生方法还是第三方库，都可以确保您的截图保持清晰锐利。

常见问题解答

1. 为什么我的 HTML2Canvas 截图总是模糊的？

这是因为您的设备像素比大于 1，并且 HTML2Canvas 根据 CSS 像素而不是物理像素生成图像。

2. 如何更改 HTML2Canvas 的缩放比例？

您可以使用 scale() 方法，canvas.toDataURL() 或 CSS 媒体查询来更改 HTML2Canvas 的缩放比例。

3. 除了 DevicePixelRatio 之外，还有哪些因素会影响 HTML2Canvas 截图质量？

其他因素包括原始图像的分辨率、文件格式和压缩水平。

4. 如何使用第三方库解决 HTML2Canvas 截图模糊问题？

第三方库提供易于使用的 API，可自动处理 DevicePixelRatio 并生成清晰的截图。

5. 我需要了解什么才能有效解决 HTML2Canvas 截图模糊问题？

了解 DevicePixelRatio、HTML2Canvas 的工作原理以及各种解决方法至关重要。