FabricJS toDataURL倍增器没有返回正确的高度/缩放正确

FabricJS toDataURL Multiplier Not Returning Correct Height/Scaling Correctly

本文关键字：高度 缩放 返回 toDataURL FabricJS      更新时间：2023-09-26

我有一个FabricJS画布，必须转换为与打印生产的精确分数英寸匹配的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画布，用户可以编辑，然后转换为图像(将需要弄清楚如何将其转换为PDF服务器端/怀疑node.js与pdfkit模块)。

由于在页面上使用11610 x 7799px的画布是不可用的，我设置画布的大小如下:

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

这是我的画布看起来像(HTML)和相应的JavaScript代码来渲染它:

<canvas id="c" width="650" height="436.6571863" style="border:1px solid"></canvas>
var canvas = new fabric.Canvas('c', {});

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

var dataURL = canvas.toDataURL({
        format: 'png',
        multiplier: 17.86297431
    })
document.write('<img src="' + dataURL + '"/>');

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

我的问题是，我怎么能让我的FabricJS画布适当缩放到像素(或英寸)，这样我就可以有我的PDF(从我的PNG转换)在正确的尺寸?这是像素分数不被尊重的问题/我能做些什么?

你需要在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等值的精度

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

相关文章：