FabricJS toDataURL 乘数没有返回正确的高度/正确缩放答案

【问题标题】：FabricJS toDataURL Multiplier Not Returning Correct Height/Scaling CorrectlyFabricJS toDataURL 乘数没有返回正确的高度/正确缩放
【发布时间】：2015-12-30 23:08:59
【问题描述】：

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

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

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

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

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

由于页面上不能使用 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', {});

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

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

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

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

我的问题是，我怎样才能让我的 FabricJS Canvas 正确放大到像素（或英寸），以便我的 PDF（从我的 PNG 转换而来）具有正确的尺寸？这是不尊重像素分数的问题吗/我该怎么办？

【问题讨论】：

标签： javascript canvas fabricjs

【解决方案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 等。

【讨论】：

你在哪里设置这个？这不是全局变量...也不是附加到全局静态“结构”
在创建新的织物对象之前，您可以像这样设置 fabric.Object.NUM_FRACTION_DIGITS = 9。参考这个小提琴 - jsfiddle.net/johndubya/mwx2hz54/26

【解决方案2】：

您不应该使用浮动尺寸，这是一个坏主意。为什么不使用Math.ceil 作为您的尺寸。这不会产生任何视觉差异，这是通常使用的方法。
您也可以使用 Zoomify 算法方法来确定您的比例因子。您可以从原始尺寸开始，然后将它们除以 2，直到您得到一个小于您定义的最大值的值，您认为这是可以接受的。这样，您的比例因子将是 2 的幂。

【讨论】：

你能举个例子吗？
小数点即使很小的 0.005 比例差异也会对大图像（即 10,000 像素）产生视觉差异