当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）然后缩小它。只有这样，画布才包含每个物理像素的像素。

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

我的问题源于我的信念，即正确的图像大小可能看起来像素化。