Question

我有一个FabricJS画布，必须将其转换为与打印作品的精确分数英寸相匹配的PDF。我收到的其他问题，我的打印机是一台大幅面打印机，实际上需要这个/能够按如下方式打印到精确的小数：

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

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

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

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

由于在页面上没有11610 x 7799px画布是不可用的，我按如下方式设置画布的大小：

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

以下是我的Canvas看起来像（HTML）和相应的JavaScript代码来呈现它：

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

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

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

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

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

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

我的问题是，如何才能让我的FabricJS Canvas正确扩展到像素（或英寸），这样我就能以正确的尺寸获得我的PDF（从我的PNG转换）？这是一个问题，像素分数没有得到尊重/我该怎么办？

Answer 1

您需要在fabric.js文件中设置NUM_FRACTION_DIGITS 默认情况下，此值= 2，您可以更改它并设置为例如= 9

现在您的乘数= 9,0123456; 但对于Fabric JS，您的乘数= 9,012;

如果您设置NUM_FRACTION_DIGITS = 9，您将获得乘数= 9,0123456;

这里是证明链接：http://fabricjs.com/docs/fabric.Object.html

这就是您所需要的：NUM_FRACTION_DIGITS - 定义序列化对象值时要使用的小数位数。您可以使用它来增加/减少诸如left，top，scaleX，scaleY等值的精度。

Answer 2

你不应该使用浮动尺寸，这是一个坏主意。为什么不使用Math.ceil作为维度。这将没有视觉差异，这是通常使用的方法您也可以使用Zoomify alghoritm方法确定您的比例因子。您可以从原始尺寸开始并将它们除以2，直到得到的值小于您定义的最大值（您认为可以接受）。这样你的比例因子将是2的幂。

FabricJS toDataURL乘数未正确返回正确的高度/比例

2 个答案: