FabricJS toDataURL 乘数未正确返回 Height/Scaling

Question

我有一个 FabricJS canvas，必须将其转换为 PDF 以匹配精确的小数英寸以进行印刷制作。根据我收到的其他问题，我的打印机是大幅面打印机，实际上需要 this/is 能够打印到精确的小数点，如下所示：

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 canvas 用户可以编辑然后转换为图像（需要弄清楚如何将其转换为 PDF 服务器端 later/suspecting node.js 与 pdfkit 模块）。

由于页面上不能使用 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 转换而来）的尺寸就正确了？这是不是像素分数的问题 respected/what 我可以解决这个问题吗？

Answer 1

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

Answer 2

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

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

如果您将设置 NUM_FRACTION_DIGITS = 9，您将得到乘数 = 9,0123456；

证明link：http://fabricjs.com/docs/fabric.Object.html

这就是您所需要的：NUM_FRACTION_DIGITS - 定义序列化对象值时要使用的小数位数。您可以使用它来 increase/decrease 此类值的精度，例如 left、top、scaleX、scaleY 等

FabricJS toDataURL 乘数未正确返回 Height/Scaling

FabricJS toDataURL Multiplier Not Returning Correct Height/Scaling Correctly

javascript

canvas

fabricjs