当 devicePixelRatio !== 1 时将 SVG 下载为 PNG

Question

我想将 SVG 渲染为 PNG。

我通过将 SVG 写入画布并将画布下载为 PNG 来做到这一点。

在具有视网膜显示屏和 devicePixelRatio !== 1 的设备上执行此操作时，会导致图像模糊。

当渲染到屏幕上时，这很容易解决，方法是通过属性放大画布，然后通过 CSS 缩小画布。

canvas.width = width * scale;
canvas.style.width = width;

但是，我想将画布下载为具有正确分辨率和大小的 PNG，我所能做的就是下载一个两倍于预期大小但在缩小时不模糊的 PNG 或一个正确大小的 PNG但是很模糊。

此Fiddle 显示了问题，请注意您需要在 devicePixelRatio !== 1 的机器上（如 MacBook Pro 或 iMac）。

Answer 1

我找到了解决办法。

图像只是模糊，因为它是渲染到屏幕上的光栅图像，图像中每 1 个像素对应 4 个物理像素。这就是为什么您需要将画布放大 4 (2 x 2) 倍，然后再缩小。只有这样，画布才会为每个物理像素包含一个像素。

但是，然后下载该画布当然会产生两倍宽和两倍高的图像。这就是预期的结果！

我的问题源于我认为正确的图像尺寸可能看起来像素化。