Javascript FabricJS toDataURL乘数未正确返回正确的高度/缩放

我有一个FabricJS画布，它必须转换成PDF格式，与打印制作的精确分数英寸相匹配。根据我收到的其他问题，我的打印机是一台大幅面打印机，实际上需要它/能够打印到精确的小数点，如下所示：

Width (Inches): 38.703111
Height (Inches): 25.999987

38.703111 inches x 300 =  11610.9333 px
25.999987 inches x 300 = 7799.9961 px

Width: 650px
Height: 436.6571863 (Orginal Height * New Width / Orginal Width = new height)

var dataURL = canvas.toDataURL({
        format: 'png',
        multiplier: 17.86297431
    })

document.write('<img src="' + dataURL + '"/>');

由于要求的DPI为300，我通过将宽度和高度x 300相乘获得像素，如下所示：

Width (Inches): 38.703111
Height (Inches): 25.999987

38.703111 inches x 300 =  11610.9333 px
25.999987 inches x 300 = 7799.9961 px

Width: 650px
Height: 436.6571863 (Orginal Height * New Width / Orginal Width = new height)

var dataURL = canvas.toDataURL({
        format: 'png',
        multiplier: 17.86297431
    })

document.write('<img src="' + dataURL + '"/>');

有了这些测量数据，我创建了一个FabricJS画布，用户可以对其进行编辑，然后将其转换为一个图像（稍后需要弄清楚如何将其转换为PDF服务器端/使用pdfkit模块怀疑node.js）

由于页面上不能使用11610 x 7799px画布，因此我将画布的大小设置如下：

Width (Inches): 38.703111
Height (Inches): 25.999987

38.703111 inches x 300 =  11610.9333 px
25.999987 inches x 300 = 7799.9961 px

Width: 650px
Height: 436.6571863 (Orginal Height * New Width / Orginal Width = new height)

var dataURL = canvas.toDataURL({
        format: 'png',
        multiplier: 17.86297431
    })

document.write('<img src="' + dataURL + '"/>');

下面是我的画布的外观（HTML）和相应的JavaScript代码：

<canvas id="c" width="650" height="436.6571863" style="border:1px solid"></canvas>

var canvas = new fabric.Canvas('c', {});

var canvas=newfabric.canvas（'c'，{}）；

用户可以编辑画布，然后将其转换为图像，但这就是问题所在。我尝试通过FabricJS的toDataURL方法，使用17.86297431的乘数来缩放画布（原始宽度（像素）/新宽度（像素）和原始高度（像素）/新高度（像素）都等于17.86297431的乘数），如下所示：

Width (Inches): 38.703111
Height (Inches): 25.999987

38.703111 inches x 300 =  11610.9333 px
25.999987 inches x 300 = 7799.9961 px

Width: 650px
Height: 436.6571863 (Orginal Height * New Width / Orginal Width = new height)

var dataURL = canvas.toDataURL({
        format: 'png',
        multiplier: 17.86297431
    })

document.write('<img src="' + dataURL + '"/>');

var-dataURL=canvas.toDataURL({
格式：“png”，
乘数：17.86297431
})
文件。写（“”）；

但是，一旦缩放，输出图像的宽度在11610处显示正确，但高度在7788处关闭，此时它应该是7799。当我检查元素时，这个输出不显示分数，而只显示整个像素

---

我的问题是，我如何让我的FabricJS画布适当地放大到像素（或英寸），以便我的PDF（从PNG转换而来）具有正确的尺寸？这是一个不尊重像素分数的问题吗/我能做些什么呢？

你不应该使用浮动尺寸，这是一个坏主意。为什么不使用

Math.ceil

作为维度。这不会造成视觉上的差异，这是通常使用的方法。

---

此外，还可以使用Zoomify-alghoritm方法确定比例因子。你可以从原来的维度开始，把它们分成2个，直到你得到一个小于你定义的最大值的值，你认为这个值是可以接受的。这样，您的比例因子将是2的幂。

您不应该使用浮动维度，这是一个坏主意。为什么不使用

Math.ceil

作为维度。这不会造成视觉上的差异，这是通常使用的方法。

---

此外，还可以使用Zoomify-alghoritm方法确定比例因子。你可以从原来的维度开始，把它们分成2个，直到你得到一个小于你定义的最大值的值，你认为这个值是可以接受的。这样，您的比例因子将是2的幂。

您需要在fabric.js文件中设置NUM\u FRACTION\u数字 默认情况下，此值为2，您可以更改它并将其设置为例如=9

现在你的乘数=90123456； 但对于Fabric JS，乘数=9012

如果您将NUM_FRACTION_DIGITS设置为9，您将得到乘数=90123456

这里是证明链接：

---

这就是您需要的：NUM\u FRACTION\u DIGITS-定义序列化对象值时要使用的分数位数。您可以使用它来增加/减少诸如left、top、scaleX、scaleY等值的精度。

您需要在fabric.js文件中设置NUM\u FRACTION\u数字 默认情况下，此值为2，您可以更改它并将其设置为例如=9

现在你的乘数=90123456； 但对于Fabric JS，乘数=9012

如果您将NUM_FRACTION_DIGITS设置为9，您将得到乘数=90123456

这里是证明链接：

---

这就是您需要的：NUM\u FRACTION\u DIGITS-定义序列化对象值时要使用的分数位数。您可以使用它来增加/减少诸如left、top、scaleX、scaleY等值的精度。

您能提供一个例子吗？小数即使很小。005刻度差也会对大图像产生视觉差异（即10000像素）你能提供一个例子吗？小数即使是很小的.005刻度差异也会对大图像（即10000像素）产生视觉差异。你在哪里设置这个？这不是一个全局变量。。。它也不会附加到全局静态“结构”中。在创建新结构对象之前，您可以将其设置为fabric.Object.NUM\u FRACTION\u DIGITS=9。参考这把小提琴-你把它放在哪里？这不是一个全局变量。。。它也不会附加到全局静态“结构”中。在创建新结构对象之前，您可以将其设置为fabric.Object.NUM\u FRACTION\u DIGITS=9。请看这把小提琴-