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

Draw Image on Canvas and export print quality image

本文关键字：图像 打印质量 绘制      更新时间：2024-04-29

我在做什么：

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

我想做的事：

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

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

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

导出具有高质量图像的画布的最佳做法是什么？

问题：

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

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

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

导出到图像时使用

canvas.toDataURL({multiplier: 4});

这将给你一个比屏幕上的画布大4倍的画布。

用这种风格设计画布以减少其尺寸，并用dataURL制作更大的图像会使整体体验更糟。

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

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

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

相关文章：