[FRAGE] HiDpi Canvas drucken - AngularJS

[alphakanal]

Nabend zusammen,

probier schon ne Zeit dran rum, aber als JS-Null fällt mir irgendwie nix ein...

Ich habe ein "HiDpi-Canvas" Element ( unterschiedliche Texte auf Hintergrundbild ) welches ich gerne drucken möchte.

<div print-section>
 <canvas width="2100" height="2900" style="width: 210px; height: 290px;></canvas>
</div>

Die eigentlich Größe des Canvas ist 2100 x 2900 Pixel ( DIN A4 Format ) und wird als Druckvorschau layoutbedingt als verkleinerte Version mit 210 x 290 Pixel angezeigt.

Ursprünglich benutze ich für den Ausdruck einzelner HTML Elemente angularPrint. Das druckt die Element innerhalb des <div print-section> Tags. Doch da wird eben nur die 210x290 Version gedruckt -> Texte kaum bis gar nicht lesbar.

Hat jemand ne Idee wie ich die "große" Version des Canvas drucken kann - ist es evtl mögliche einen neuen großen Canvas ( für den User nicht sichtbar ) aufzubauen und den dann zu drucken?

 

[kkapsner]

Wie wird denn das Canvas verkleinert? Über CSS? Dann kannst du doch einfach ein print-CSS machen, das das Canvas nicht verkleinert.

ist es evtl mögliche einen neuen großen Canvas ( für den User nicht sichtbar ) aufzubauen und den dann zu drucken?

Auch das wäre ein Weg.

 

[alphakanal]

Hi! Also der Canvas ist via style-Attribut verkleinert:

<canvas id="mein-canvas" [COLOR="#FF0000"]width="2100" height="2900"[/COLOR] [COLOR="#008000"]style="width: 210px; height: 290px;"[/COLOR]></canvas>

Das über print-css wäre mir der sympatischere Weg -> danke für den Hinweis!

Würde dann das style Attribut weglassen und meine CSS ändern:

HTML:
<canvas id="mein-canvas"></canvas>

CSS:
@media screen {
  #mein-canvas {
    width: 210px;
    height: 290px;
  }
}
 	
@media print {
  #mein-canvas {
    width: 2100px;
    height: 2900px;
  }
}

Kann es grad nur nicht testen -> reicht / stimmt das so ?

- - - Aktualisiert - - -

So jetzt gerade getestet. CSS passt wie oben nur im HTML muss ich fürs Canvas die width + height fürs Drucken angeben, sonst verzerrt es sich:

<canvas width="2100" height="2900" id="print-canvas"></canvas>

Dankschee!!

 

[kkapsner]

die width + height fürs Drucken angeben

Nein, das ist nicht die Druckgröße, sondern die interne Rendergröße.

Dankschee!!

Bitte - gern geschehen.

 

[alphakanal]

Nein, das ist nicht die Druckgröße, sondern die interne Rendergröße.

So wars ja auch nicht gemeint - nur falsch ausgedrückt. Gemeint war: Muss die width + height angeben, da es sich sonst beim Drucken verzieht