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

Question

我在做什么:

我正在使用 Fabric.js 开发 Canvas 应用程序。用户可以在 Canvas 中放置图片或文字

我想做什么:

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

因此，要创建 5X8 和 300dpi 的高质量图像，图像应为 1500px X 2400px。但我不能为用户提供那么多空间，因为它不会非常直观。

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

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

问题:

但是我遇到了麻烦。当用户放置文本或图像时，它显得很小。当我单击文本或图像时， Angular 和边框几乎看不到。它考虑 Canvas 的相对大小。请参阅 Fiddle

Answer 1

您不应该直接使用尺寸来设计 Canvas 样式。设置 Canvas 属性宽高，不超过屏幕尺寸:

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

导出为图片使用时

canvas.toDataURL({multiplier: 4});

这将为您提供比屏幕上的 Canvas 大 4 倍的 Canvas 。

使用减少维度的样式来设置 Canvas 的样式，并使用 dataURL 获得更大的图像会使整体体验变差。

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

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

http://jsfiddle.net/Q3TMA/1043/