导出具有高质量图像的画布的最佳做法是什么? [英] What is the best practice to export canvas with high quality images?

问题描述

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

I need your help. I explain my situation: I’m using fabric.js library to place shapes, text, etc. in my application. My canvas size has 1000x1000 pixels (about 26.45x26.45 centimeters). I have an image upload script only for upload images in high quality, like 300 dpi.

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

Basically what I do is the following: - draw the canvas (uploading images, put text, etc…); - resize the canvas multiplying by scale factor to be able at the end to have an image with 300dpi; - save the canvas in PNG format; - using php/ajax and Imagick, put the canvas with 300 dpi quality, saving in jpg format.

问题是:当我保存画布时，上传图像的质量会下降，因为我将画布调整为 72 dpi(在我保存为 PNG 的那一刻).

The problem is: when I save the canvas, the quality of uploaded images will decrees, because I resize the canvas was 72 dpi (at the moment that I save in PNG).

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

I think a possible solution is: when uploading the images, save the position in an array with x and y position and size to the end of the whole process, replace the image in JPG. If this is a best way, it is possible to make it with Imagick library or in PHP?

我想知道您对此的看法.

I would like to know your opinion about it.

谢谢.

推荐答案

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

The DPI doesn't matter at all when dealing with images. Images are measured in pixels so this is what you need to adjust. You can safely disregard DPI as it has no sense in this context.

缩放在这里对您无济于事 - 请记住，您使用的是像素设备，而不是矢量，因此画布需要已经是您要用于打印等的大小，否则会因插值而降低质量缩放时.

Scaling won't help you here - remember you are working with a pixel device, not vectors, so the canvas need to be already in the size you want to use for print etc. or you will have reduced quality due to interpolation when scaling it.

方法如下:

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

You need to pre-calulate your canvas size in pixels in relation to what size you want in the final stage.

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

Lets say you want to print a 15 x 10 cm image (or about 6 x 4 inches) @ 300DPI output. You then calculate the pixels:

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

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

For inches simply multiply with the DPI (4 in != 10 cm so a little different result, numbers picked for simplicity):

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

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

For your image at 26.45 cm @ 300 DPI the canvas would need to be:

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

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

To display that canvas in a smaller area on screen you use CSS to display the element, for example -

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

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

You can now draw to the canvas at its actual pixel position and it will show up scaled down on screen (but retain all information on the canvas itself). If you use mouse coordinates you just scale the mouse position proportionally (canvas pos = mouse coord * 3124px / 600px).

对于缩放等，它变得有点复杂，但原则仍然存在:图像的最终大小必须是最终结果的大小.

For zooming etc it becomes a tad more complicated, but the principle remains: the final size of your image must be that of the final result.

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

About DPI: if this image was 72 DPI or 300 DPI the numbers of pixels would be the exact same. The reason as already mentioned is that images are measured in pixels.

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

DPI is an arbitrary value when it comes to pixel devices (bitmaps, monitors, cameras etc.) and is only used for a DTP software to get a hint on dimension for final print which will use this information only to pre-scale the image in relation to the page you using to set the print with.

这篇关于导出具有高质量图像的画布的最佳做法是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！