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

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

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