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

Question

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

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

由于要求 DPI 为 300，所以我通过将宽度和高度乘以 300 得到像素，如下所示:

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

有了这些测量结果，我创建了一个 FabricJS Canvas ，用户可以编辑它，然后转换为图像(稍后需要弄清楚如何将其转换为 PDF 服务器端/怀疑带有 pdfkit 模块的 node.js) 。

由于页面上无法使用 11610 x 7799px 的 Canvas，因此我将 Canvas 的大小设置如下:

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', {});

用户可以编辑 Canvas ，然后将其转换为图像，但这就是出现问题的原因。我尝试使用 17.86297431 的乘数通过 FabricJS 的 toDataURL 方法缩放 Canvas (原始像素宽度/新像素宽度和原始像素高度/新像素高度均等于 17.86297431 的乘数)如下:

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

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

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

我的问题是，如何让 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 等。