在画布上绘制图像并导出打印质量图像

Question

我在做什么：

我正在使用Fabric.js开发画布应用程序。用户可以在画布中放置图像或文本

我想做的事：

当用户下载图像时，用户应该能够打印它。目前我正在研究 length: 5 X 8 (inches)。在中Fabric.js，toDataURL()函数默认会给出72 DPI图像，我打算用PHP它来将其转换为300dpi图像。

因此，要创造一个高品质的图像5X8 与300dpi，形象应该是1500px X 2400px。但我不能为用户提供那么多空间，因为它不会很直观。

所以，我做了以下链接中的建议

问题：

但我正面临一个麻烦。当用户放置文本或图像时，它显得非常小。当我单击文本或图像时，几乎看不到边角和边框。它考虑了画布的相对大小。请看小提琴

Answer 1

您不应直接使用尺寸设计画布样式。设置画布属性宽高，不超过屏幕尺寸：

<canvas width="500" height="400" ></canvas>

导出到图像时使用

canvas.toDataURL({multiplier: 4});

这将使您的画布比屏幕上的画布大 4 倍。

使用样式为画布设置样式以减少其尺寸并使用 dataURL 拥有更大的图像会使整体体验变得更糟。

这种风格用fabricjs 还没有准备好理解的东西将画布挤压到你的眼睛。所以你不会得到正常大小的控件。

//remove those
width:400px !important;
height:600px !important;