使用 300dpi (imagemagick) 和 todataurl / base64 保存画布答案

【问题标题】：Saving canvas with 300dpi (imagemagick) and todataurl / base64使用 300dpi (imagemagick) 和 todataurl / base64 保存画布
【发布时间】：2013-05-16 09:19:08
【问题描述】：

我在保存画布时遇到问题。我想那是因为我的画布太大了。我在这里寻求帮助：

Elements on the canvas disappear w/ jsfiddle

canvas.toDataURL() for large canvas

……但没有成功。

我的问题是下一个：

例如，我有一个尺寸为 1123x1965 像素的画布，我需要将其调整为 29.7x52 厘米，并将它们放在 300dpi 中。

我的理性如下：

编辑完模板后，转换为全尺寸，然后将 png 图像保存为实际尺寸（以像素为单位，已乘以 300 dpi）。进行了这样的计算：

29.7 厘米：29.7*300 = 8910

52 厘米：52*300 = 15600

使用这个的问题基本上是画布消失了。请看这个：Elements on the canvas disappear w/ jsfiddle

并且 todataurl 函数不起作用：canvas.toDataURL() for large canvas

然后使用库 imagemagick 转换为 300 dpi，像这样的命令：convert test.png -units PixelsPerCentimeter -density 300 test2.png

谁能帮帮我？

谢谢。

【问题讨论】：

标签： canvas imagemagick html5-canvas base64 fabricjs

【解决方案1】：

只需将您在 2.54 上已有的数据除以得到基于英寸的像素。虽然，更正确的术语是 PPI 而不是 DPI（因为纸上的点与屏幕上的像素有一点不同）。

29.7 cm * 300 PPI / 2.54 = 3508 pixels

52.0 cm * 300 PPI / 2.54 = 6142 pixels

（你确定大约 52 厘米是正确的吗？（A4 短边 x2，即 A3，是 42 厘米）。

【讨论】：

【解决方案2】：

DPI 表示每英寸点数，而不是每厘米点数。 300 DPI（点/英寸）= 118 dpcm（点/厘米）

计算应该是：

29.7 厘米：29.7*118 = 3504.6

52 厘米：52*118 = 6136

我希望这有助于解决您的问题。（我还不能给 cmets。所以我把这个作为答案）

【讨论】：

非常感谢。是的，我认为你是对的。我今天正在尝试实施它。非常感谢。