問題描述

我需要你的幫助.我解釋一下我的情況:我正在使用 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.

這篇關于導出具有高質量圖像的畫布的最佳做法是什么?的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！