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

【问题标题】：Draw Image on Canvas and export print quality image在画布上绘制图像并导出打印质量图像
【发布时间】：2016-08-01 11:14:18
【问题描述】：

我在做什么：

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

我想做什么：

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

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

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

问题：

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

【问题讨论】：

【解决方案1】：

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

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

导出到图片时使用

canvas.toDataURL({multiplier: 4});

这将为您提供一个比屏幕大 4 倍的画布。

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

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

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

【讨论】：