Was ist die beste Vorgehensweise, um Canvas mit hochwertigen Bildern zu exportieren?

Question

Ich brauche deine Hilfe. Ich erkläre meine Situation: Ich verwende fabric.js-Bibliothek, um Formen, Text, etc. in meiner Anwendung zu platzieren. Meine Leinwandgröße hat 1000x1000 Pixel (ca. 26,45x26,45 Zentimeter). Ich habe ein Bild-Upload-Skript nur zum Hochladen von Bildern in hoher Qualität, wie 300 dpi.

Grundsätzlich was ich tue, ist folgendes: - Zeichnen Sie die Leinwand (Hochladen von Bildern, Text, etc ...); - Größe der Leinwand multiplizieren mit Skalierungsfaktor, um am Ende ein Bild mit 300 dpi zu haben; - Speichern Sie die Leinwand im PNG-Format; - mit Hilfe von php/ajax und Imagick, legen Sie die Leinwand mit 300 dpi Qualität, Speichern im JPG-Format.

Das Problem ist: Wenn ich die Leinwand speichere, wird die Qualität der hochgeladenen Bilder bestimmt, weil ich die Größe der Leinwand 72 dpi (in dem Moment, dass ich in PNG speichern).

Ich denke, eine mögliche Lösung ist: beim Hochladen der Bilder, speichern Sie die Position in einem Array mit x und y Position und Größe bis zum Ende des gesamten Prozesses, ersetzen Sie das Bild in JPG. Wenn dies der beste Weg ist, ist es möglich, es mit Imagick-Bibliothek oder in PHP zu machen?

Ich würde gerne Ihre Meinung dazu wissen.

Vielen Dank.

Answer 1

Beim Umgang mit Bildern spielt die DPI keine Rolle. Bilder werden in Pixeln gemessen, also müssen Sie diese anpassen. Sie können DPI sicher ignorieren, da es in diesem Zusammenhang keinen Sinn macht.

Skalierung wird Ihnen hier nicht helfen - denken Sie daran, dass Sie mit einem Pixel-Gerät, nicht Vektoren arbeiten, also muss die Leinwand bereits in der Größe sein, die Sie für den Druck usw. verwenden möchten Interpolation beim Skalieren.

Hier ist, wie:

Sie müssen Endstadium vorab calulate Ihre Leinwandgröße in Pixel in Bezug auf welche Größe Sie wollen in.

Nehmen wir an, Sie möchten ein 15 x 10 cm Bild (oder etwa 6 x 4 Zoll) @ 300DPI-Ausgabe drucken. Sie berechnen dann die Pixel (! 4 in = 10 cm, so etwas anderes Ergebnis, Zahlen nahm der Einfachheit halber)

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

Für Zoll einfach mit dem DPI multiplizieren:

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

Für Ihre Bild bei 26,45 cm @ 300 DPI müßte die Leinwand sein:

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

dass Leinwand auf dem Bildschirm in einem kleineren Bereich anzuzeigen Sie CSS verwenden, um anzuzeigen t er Element, zum Beispiel -

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

Sie können nun in seiner tatsächlichen Pixelposition auf die Leinwand ziehen und es wird sich zeigen verkleinert auf dem Bildschirm (aber alle Informationen auf der Leinwand selbst behalten). Wenn Sie Mauskoordinaten verwenden, skalieren Sie die Mausposition proportional (canvas pos = mouse coord * 3124px/600px).

Zum Zoomen usw. wird es etwas komplizierter, aber das Prinzip bleibt: Die endgültige Größe Ihres Bildes muss die des Endergebnisses sein.

Über DPI: Wenn dieses Bild 72 DPI oder 300 DPI wäre, wäre die Anzahl der Pixel genau gleich. Der bereits erwähnte Grund ist, dass Bilder in Pixeln gemessen werden.

DPI ist ein beliebiger Wert für Pixelgeräte (Bitmaps, Monitore, Kameras usw.) und wird nur für eine DTP-Software verwendet, um einen Hinweis auf die Abmessungen für den endgültigen Druck zu erhalten. Skalieren Sie das Bild in Bezug auf die Seite, mit der Sie den Druck festlegen.