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

我需要你的帮助。我解释我的情况：我正在使用fabric.js库在应用程序中放置形状，文本等。我的canvas尺寸为1000×1000像素（约26.45×26.45厘米）。我有一个图像上传脚本只能上传高质量的图像，如300 dpi。

基本上我所做的是： – 绘制canvas（上传图片，放置文本等）; – 调整尺寸乘以比例因子的canvas最终能够以300dpi的图像; – 以PNG格式保存canvas; – 使用php / ajax和Imagick，把canvas以300 dpi的质量，保存在jpg格式。

问题是：当我保存canvas时，上传的图像的质量将会下降，因为我调整了canvas的大小是72 dpi（在我保存PNG的那一刻）。

我认为可能的解决scheme是：上传图片时，将位置以x和y的位置和大小保存到整个过程的最后，以JPG格式replace图片。如果这是一个最好的方法，可以使用Imagick库或PHP？

我想知道你的意见。

谢谢。

处理图像时，DPI根本不重要。图像以像素为单位进行测量，所以这是您需要调整的。你可以放心地忽视新闻部，因为在这方面没有意义。

缩放在这里不会有所帮助 – 请记住，您正在使用像素设备，而不是vector，因此canvas需要已经达到您要用于打印的大小，否则缩放时会因为插值而降低质量。

就是这样：

您需要根据您在最后阶段需要的尺寸，以像素为单位预先调整您的canvas大小。

假设你想打印一个15×10厘米的图像（或约6×4英寸）@ 300DPI输出。然后你计算像素：

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的图片，canvas需要：

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

要在屏幕上的较小区域显示该canvas，可以使用CSS来显示元素，例如 –

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

您现在可以在canvas的实际像素位置绘制canvas，并在屏幕上缩小显示（但保留canvas上的所有信息）。如果使用鼠标坐标，则可以按比例缩放鼠标位置（canvaspos =鼠标坐标* 3124px / 600px）。

对于缩放等，它变得有点复杂，但原则依然是：图像的最终尺寸必须是最终结果的尺寸。

关于DPI：如果这个图像是72 DPI或300 DPI像素的数量将完全相同。之前提到的原因是图像是以像素为单位进行测量的。

对于像素设备（位图，监视器，相机等），DPI是一个任意的值，并且仅用于DTP软件以获得最终打印尺寸的提示，其将仅使用该信息来预先缩放图像与用于设置打印的页面的关系。