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

Question

我在做什么：

我正在使用 Fabric.js 开发一个 canvas 应用程序。用户可以在 canvas

中放置图片或文字

我想做的事情：

当用户下载图像时，用户应该能够打印它。目前我正在研究长度：5 X 8 （英寸）。在 Fabric.js 中，toDataURL() 函数默认会给出 72 DPI 图像，我计划使用 PHP 将其转换为 300dpi 图像。

所以要用 300dpi 创建 5X8 的高质量图像，图像应该是 1500px X 2400px。但我不能为用户提供那么多 space，因为它不会很直观。

所以，我按照下面的建议做了 link

What is the best practice to export canvas with high quality images?

问题：

但是我遇到了麻烦。当用户放置文本或图像时，它看起来非常 small.When 我单击文本或图像时，角落和边框几乎看不到。它考虑了 canvas 的相对大小。请参阅 Fiddle

Answer 1

您不应该 canvas 直接使用尺寸设置样式。设置 canvas 属性宽度和高度，不超过屏幕尺寸：

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

导出为图像时使用

canvas.toDataURL({multiplier: 4});

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

使用样式来设置 canvas 的样式以减小其维度并使用 dataURL 设置更大的图像会使整体体验变差。

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

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

Draw Image on Canvas and export print quality image