Canvasfragen

[Pit]

Hallo Forum,

ich habe heute erste begegnungen mit Canvaselementen gemacht und finde die richtig gut.

Nun habe ich eine grundsätzliche Frage hierzu:

Ich habe die Dimensionen meines Canvasfeldes mit

canvas.width = 400;
canvas.height = 200;

definiert.

Später mache ich aus dem Canvas ein PNG-Image und setze es in ein PDF ein.

Sieht klasse aus, so weit, so gut.

Leider ist mein Canvasfeld mir aber im Grunde zu klein. Nur, wenn ich jetzt das feld größer mache, sieht es später im PDF ganz und gar nicht mehr gut aus, sondern irgendwie eckig und klobig. Und das selbst dann, wenn ich die Dimensionen in Relation gleich beibehalte.

Deshalb meine Fragen:

Ändert es etwas, wenn ich anstelle eines PNG ein JPG Image nehmen würde, d.h. läßt sich ein JPG besser scalieren? Würde es etwas bringen, wenn ich im PDF anstelle eines Image-Bildes den Image base64 stream einsetze?

Gibt es sonst einen Weg, bei dem ich die Größe des Image im PDF als gegeben festlege und das Canvasfeld je nach Browservieport variieren kann und trotzdem das Ergebnis im PDF rund und sauber anstelle von verzogen, gestaucht, eckig und/oder klobig aussieht?

Wie geht man Sowas also an?

Pit

[JürgenB]

Hallo Pit,

Leider ist mein Canvasfeld mir aber im Grunde zu klein. Nur, wenn ich jetzt das feld größer mache, sieht es später im PDF ganz und gar nicht mehr gut aus, sondern irgendwie eckig und klobig. Und das selbst dann, wenn ich die Dimensionen in Relation gleich beibehalte.

du solltest dich wirklich mit SVG beschäftigen, das „S“ steht für skalierbar. SVG-Grafiken – auch die per Javascript erstellten – können nachträglich skaliert werden. Canvas muss neu gezeichnet werden. Für den Funktionsplotter im WIKI habe ich eine Canvas und eine SVG-Version erstellt. Da kannst du die Techniken vergleichen.

Ändert es etwas, wenn ich anstelle eines PNG ein JPG Image nehmen würde, d.h. läßt sich ein JPG besser scalieren?

PNG und JPG sind Pixelgrafiken. Die sind beide nicht gut zu skalieren. Der Kompressor in PNG-Grafiken ist für Zeichnungen optimiert, der in JPG für Fotos.

Würde es etwas bringen, wenn ich im PDF anstelle eines Image-Bildes den Image base64 stream einsetze?

ich glaube nicht.

Gibt es sonst einen Weg, bei dem ich die Größe des Image im PDF als gegeben festlege und das Canvasfeld je nach Browservieport variieren kann und trotzdem das Ergebnis im PDF rund und sauber anstelle von verzogen, gestaucht, eckig und/oder klobig aussieht?

Wie erzeugst du das PDF?

Gruß
Jürgen

[Pit]

Hallo Jürgen,

du solltest dich wirklich mit SVG beschäftigen, das „S“ steht für skalierbar. SVG-Grafiken – auch die per Javascript erstellten – können nachträglich skaliert werden. Canvas muss neu gezeichnet werden. Für den Funktionsplotter im WIKI habe ich eine Canvas und eine SVG-Version erstellt. Da kannst du die Techniken vergleichen.

Ist es denn auch möglich, mit dieser Technik (SVG) eine Art "Feld zum Zeichnen oder Schreiben" zu generieren?

Gibt es sonst einen Weg, bei dem ich die Größe des Image im PDF als gegeben festlege und das Canvasfeld je nach Browservieport variieren kann und trotzdem das Ergebnis im PDF rund und sauber anstelle von verzogen, gestaucht, eckig und/oder klobig aussieht?

Wie erzeugst du das PDF?

In diesem Fall mit TCPDF.

Aber wie gesagt, das Klobige kommt daher, dass die Grafik zu sehr zusammengeschoben wird (auch in passender Relation zum Original). Je näher dann das Scalierte zum Original passt, desto besser das Ergebnis. Ich bin gar nicht mal so unzufrieden mit dem Ergebnis, aber im Vergleich zum Original ists halt sichtbar scaliert, wenn es zu klein dargestellt wird.

Pit

[JürgenB]

Hallo Pit,

meines Wissens nach kann man mit SVG (fast) alles machen, was auch mit canvas geht.

Wie sieht denn dein Weg vom canvas zum PDF aus? Warum benötigst du ein png und wie erzeugst du dieses?

Gruß
Jürgen

[Gunnar Bittersmann]

@@JürgenB

… SVG-Grafiken …

RAS-Syndrom?

LLAP 🖖

[pl]

Hi Jürgen,

welchen Sinn macht es, in ein PDF für das die Abmessungen ja von vornherein feststehen, eine skalierbare Grafik einzubauen?

MFG

[Tabellenkalk]

Hallo,

welchen Sinn macht es, in ein PDF für das die Abmessungen ja von vornherein feststehen, eine skalierbare Grafik einzubauen?

Die Ausgabegröße sollte wohl festgelegt sein, aber Pit möchte die Eingabegröße variabel halten.

Gruß
Kalk

[Pit]

Zusatz:

Leider ist mein Canvasfeld mir aber im Grunde zu klein. Nur, wenn ich jetzt das feld größer mache, sieht es später im PDF ganz und gar nicht mehr gut aus, sondern irgendwie eckig und klobig. Und das selbst dann, wenn ich die Dimensionen in Relation gleich beibehalte.

Das gilt allerdings nur für meine aktuelle "Seitenbreiteneinstellung", die das PDF auf 144% darstellt. Je größer ich das PDF mache, desto besser wird dann auch das Image. Selbst bei manchen Scalierungen des Acrobar Readers < 100% ist es richtig gut, so z.b. bei ca. 75%.

Pit

[pl]

Je größer ich das PDF mache

Umso größer muss auch Deine Grafik sein. Sonst wirds pixelig. Und da Dein PDF schließlich auch eine ganz bestimmte Größe hat (sprich A4, A3 usw.), dürfte das ja kein Problem sein, die einzubauenden Grafiken darauf abzustimmen.

Für ein A4 PDF ist eine Grafik mit 400x200 Pixeln mit Sicherheit zu klein.

MFG

[Gunnar Bittersmann]

@@pl

Sonst wirds pixelig. […] Für ein A4 PDF ist eine Grafik mit 400x200 Pixeln mit Sicherheit zu klein.

Wolltest du sagen: Für ein A4-PDF ist eine Grafik mit Pixeln mit Sicherheit falsch?

LLAP 🖖

[pl]

Siehe da