19

我需要你的帮助。我解释了我的情况:我正在使用 fabric.js 库在我的应用程序中放置形状、文本等。我的画布尺寸为 1000x1000 像素(约 26.45x26.45 厘米)。我有一个图像上传脚本,仅用于上传高质量的图像,如 300 dpi。

基本上我所做的如下: - 绘制画布(上传图像,放置文本等......);- 调整画布的大小乘以比例因子,以便最终能够获得 300dpi 的图像;- 以 PNG 格式保存画布;- 使用 php/ajax 和 Imagick,放置 300 dpi 质量的画布,保存为 jpg 格式。

问题是:当我保存画布时,上传图像的质量会下降,因为我将画布的大小调整为 72 dpi(此时我保存为 PNG)。

我认为一个可能的解决方案是:在上传图像时,将位置保存在一个数组中,其中包含 x 和 y 位置和大小,直到整个过程结束,替换为 JPG 中的图像。如果这是最好的方法,是否可以使用 Imagick 库或 PHP 来实现?

我想知道你对此的看法。

谢谢你。

4

1 回答 1

48

在处理图像时,DPI 根本不重要。图像以像素为单位,因此这是您需要调整的。您可以放心地忽略 DPI,因为它在这种情况下没有意义。

缩放在这里对您没有帮助 - 请记住您正在使用像素设备,而不是矢量,因此画布需要已经是您想要用于打印等的大小,否则您将在缩放时由于插值而降低质量.

就是这样:

您需要根据最终阶段所需的尺寸预先计算画布尺寸(以像素为单位)。

假设您要以 300DPI 输出打印 15 x 10 厘米(或大约 6 x 4 英寸)的图像。然后计算像素:

Width : 10 cm * 300 / 2.54 = 1181 pixels
Height: 15 cm * 300 / 2.54 = 1772 pixels

对于英寸只需乘以 DPI(4 英寸!= 10 厘米,因此结果略有不同,为简单起见选择数字):

Width : 4 in * 300 = 1200 pixels
Height: 6 in * 300 = 1800 pixels

对于 26.45 cm @ 300 DPI 的图像,画布需要:

26.45 cm * 300 DPI / 2.54 inches = 3124 pixels.

要在屏幕上的较小区域中显示该画布,您可以使用 CSS 来显示元素,例如 -

<canvas width="3124" height="3124" style="width:600px;height:600px;"></canvas>

您现在可以在画布的实际像素位置绘制,它会在屏幕上按比例缩小显示(但保留画布本身的所有信息)。如果您使用鼠标坐标,您只需按比例缩放鼠标位置(画布位置 = 鼠标坐标 * 3124px / 600px)。

对于缩放等,它变得有点复杂,但原则仍然存在:图像的最终尺寸必须是最终结果的尺寸。

关于 DPI:如果此图像是 72 DPI 或 300 DPI,则像素数将完全相同。如前所述,原因是图像以像素为单位。

当涉及到像素设备(位图、监视器、相机等)时,DPI 是一个任意值,仅用于 DTP 软件以获取最终打印尺寸的提示,该软件将仅使用此信息来预缩放图像与您用来设置打印的页面相关。

于 2013-06-11T00:57:19.550 回答