Ergebnis 1 bis 5 von 5
  1. #1
    Avatar von alphakanal
    alphakanal ist offline Foren As
    registriert
    03-12-2016
    Beiträge
    92

    HiDpi Canvas drucken - AngularJS

    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.
    HTML-Code:
    <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?
    Geändert von alphakanal (12-03-2017 um 21:28 Uhr)
    "640 Kilobyte ought to be enough for anybody."
    Bill Gates, 1981

  2. #2
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.687

    AW: HiDpi Canvas drucken - AngularJS

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

    Zitat Zitat von alphakanal Beitrag anzeigen
    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.

  3. #3
    Avatar von alphakanal
    alphakanal ist offline Foren As
    registriert
    03-12-2016
    Beiträge
    92

    AW: HiDpi Canvas drucken - AngularJS

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

    Code:
    <canvas id="mein-canvas" width="2100" height="2900" style="width: 210px; height: 290px;"></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:
    Code:
    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:
    Code:
    <canvas width="2100" height="2900" id="print-canvas"></canvas>
    Dankschee!!
    Geändert von alphakanal (13-03-2017 um 08:12 Uhr)
    "640 Kilobyte ought to be enough for anybody."
    Bill Gates, 1981

  4. #4
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.687

    AW: HiDpi Canvas drucken - AngularJS

    Zitat Zitat von alphakanal Beitrag anzeigen
    die width + height fürs Drucken angeben
    Nein, das ist nicht die Druckgröße, sondern die interne Rendergröße.

    Zitat Zitat von alphakanal Beitrag anzeigen
    Dankschee!!
    Bitte - gern geschehen.

  5. #5
    Avatar von alphakanal
    alphakanal ist offline Foren As
    registriert
    03-12-2016
    Beiträge
    92

    AW: HiDpi Canvas drucken - AngularJS

    Zitat Zitat von kkapsner Beitrag anzeigen
    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
    "640 Kilobyte ought to be enough for anybody."
    Bill Gates, 1981

Ähnliche Themen

  1. AngularJS und $http defaults Properties
    Von alphakanal im Forum JavaScript
    Antworten: 3
    Letzter Beitrag: 10-02-2017, 12:22
  2. [GELÖST] AngularJS Entwickler (m/w) für Köln gesucht
    Von ToM80 im Forum Jobs
    Antworten: 1
    Letzter Beitrag: 26-04-2016, 12:31
  3. [HOW-TO/TUTORIAL] Einführung in AngularJS
    Von uthred im Forum Tutorials Javascript
    Antworten: 1
    Letzter Beitrag: 30-10-2015, 12:15
  4. [FRAGE] Canvas wird nicht auf canvas gerendert via drawImage
    Von xorg1990 im Forum JavaScript
    Antworten: 5
    Letzter Beitrag: 05-12-2014, 18:13
  5. [FRAGE] AngularJS http-request
    Von bambamboole im Forum Ajax
    Antworten: 3
    Letzter Beitrag: 19-09-2014, 09:28

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •