使用高质量图像导出画布的最佳做法是什么?

ptC*_*der 18 php canvas imagick html5-canvas fabricjs

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

基本上我做的是: - 画画布(上传图片,放文字等等); - 调整画布大小乘以比例因子,以便最终得到300dpi的图像; - 以PNG格式保存画布; - 使用php/ajax和Imagick,以300 dpi的质量放置画布,以jpg格式保存.

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

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

我想知道你对它的看法.

谢谢.

小智 43

在处理图像时,DPI根本不重要.图像以像素为单位进行测量,因此这是您需要调整的内容.您可以放心地忽略DPI,因为在这种情况下没有任何意义.

缩放不会帮助你在这里 - 还记得你与一个像素设备,而不是载体工作,所以画布需要是已经在大小要用于打印等或缩放时,你会质量下降,由于插值.

这是如何做:

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

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

Width : 10 cm * 300 / 2.54 = 1181 pixels
Height: 15 cm * 300 / 2.54 = 1772 pixels
Run Code Online (Sandbox Code Playgroud)

对于英寸简单地用DPI相乘(!4 =10厘米所以稍微不同的结果,数字拾取为了简化):

Width : 4 in * 300 = 1200 pixels
Height: 6 in * 300 = 1800 pixels
Run Code Online (Sandbox Code Playgroud)

对于26.45厘米@ 300 DPI的图像,画布需要为:

26.45 cm * 300 DPI / 2.54 inches = 3124 pixels.
Run Code Online (Sandbox Code Playgroud)

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

<canvas width="3124" height="3124" style="width:600px;height:600px;"></canvas>
Run Code Online (Sandbox Code Playgroud)

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

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

关于DPI:如果此图像为72 DPI或300 DPI,则像素数将完全相同.已经提到的原因是图像是以像素为单位测量的.

DPI是像素设备(位图,显示器,相机等)的任意值,仅用于DTP软件以获得最终打印尺寸的提示,这些信息仅用于预先缩放图像.与用于设置打印的页面的关系.