svg - 当 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）。

标签： svgsizepngblurrydevicepixelratio

Answer 1

我找到了解决办法。

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

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

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