什么是导出高质量图像画布的最佳做法？ [英] 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).

我认为一个可能的解决方案是：when上传图像，将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.

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

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（< 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

画布需要为300DPI：

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>

现在可以在画布上绘制实际像素位置， （但保留画布本身的所有信息）。如果你使用鼠标坐标，你只是按比例缩放鼠标位置（canvas pos = mouse coord * 3124px / 600px）。

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屋！