Bild skalieren, bevor toDataURL - html2canvas

Bevor Sie mir sagen, ist dies eine doppelte Frage, wissen, dass ich gesucht habe durch jeder single ähnliche Frage und keine die Antworten in jedem von Ihnen arbeiten für mich.

Im mit html2canvas , machen Sie einen Schnappschuss von einem div, und was ich tun müssen, ist, Sie zu skalieren bis zu 750x1050 vor dem speichern in das png via canvas.toDataURL().

Der nächste, den ich bekam, war mit dem folgenden code.

html2canvas(document.getElementById('div_id'), {
   onrendered: function(canvas) {

      var extra_canvas = document.createElement("canvas");

        extra_canvas.setAttribute('width', 750);
        extra_canvas.setAttribute('height', 1050);

        var ctx = extra_canvas.getContext('2d');
        ctx.drawImage(canvas, 0, 0, 750, 1050);
        var dataURL = extra_canvas.toDataURL();

        window.open(dataURL);
   }
});

Dem Bild war die Größe richtig, aber der text innerhalb des Bildes war extrem schlechte Qualität, als wenn es angepasst nach immer ein png.

Ist es, dass mache ich etwas falsch oder können Sie einfach nicht scale-up auf diese Weise?

Jede und jeder Vorschlag/work-around wird sehr geschätzt werden!

PS: Die div-ich bin die Erfassung einer Momentaufnahme des ist ein content-editable div mit einer Hintergrundfarbe und html-text innerhalb.

InformationsquelleAutor shaneparsons | 2015-02-20

  1. 3

    Für jemand anderen zu Fragen, wie man high-res-Druck-würdig Inhalte von html: PhantomJS und wkhtmltopdf /wkhtmltoimage sind tolle alternativen, die mit diesen Dingen besser.

    Es scheint mir, wie diese alternativen funktionieren nicht für dynamische web-Inhalte, wo der DOM hat sich nach laden der Seite, ist das richtig? PhantomJS scheint zu funktionieren, indem es eine URL, und Wkhtmltopdf scheint zu funktionieren, indem es eine HTML-Datei oder URL, im Gegensatz zum erstellen eines Bildes basierend auf dem aktuellen Zustand der web-Anwendung. Korrigieren Sie mich, wenn ich falsch bin.
    Ich war in der Lage, um in der Lage zu verwenden wkhtmltopdf mit einer Seite dynamisch erstellt von php, html und javascript. Die Seite wurde speziell für das pdf aber so ist es passiert im hintergrund und nicht dem Benutzer angezeigt. Vielleicht könnten Sie versuchen, etwas entlang der Linien?
    Im wesentlichen neu erstellen, was Sie wollen gedruckt, pdf-Datei der Seite in den hintergrund.

    InformationsquelleAutor shaneparsons

  2. 2

    Hatte ich etwas ähnliches problem und das ist, was ich am Ende dabei

    html2canvas($('#div_id'), {width: 750, height: 1050}).then(
    function(canvas) {
       window.open(canvas.toDataURL("image/png"));
    }
)

    Nun diese führen noch immer zu unscharfen Bildern (besonders bei text), aber das war, weil mein Standard-zoom im browser wurde auf 110% derjenigen, verursacht das Fenster.devicePixelRatio um Ion 1.1000... ich sortierte das heraus, indem Sie einfach zeigen, Warnung für den Benutzer (arbeitete für den Zweck ich es brauche), aber anscheinend gibt es einen besseren Weg, es zu lösen https://stackoverflow.com/a/22819006/460586

    InformationsquelleAutor Antti Vikman

  3. 0

    Sogar meine Bilder wurden kommen pixelized und manchmal eng, wenn es viel Inhalt zu passen in eine VORGEGEBENE Breite und Höhe.
    Nach Stunden des Suchens, fand eine gute Lösung aus diesem post. Es kümmert sich um die Aufrechterhaltung der Auflösung zu gute Maße auch auf das Zoomen und keine sichtbaren pixelization. 

    html2canvas(document.getElementById('div_id'), {
onrendered: function(canvas) {
        var ctx = canvas.getContext('2d');
        ctx.webkitImageSmoothingEnabled = false;
        ctx.mozImageSmoothingEnabled = false;
        ctx.imageSmoothingEnabled = false;
        var myImage = canvas.toDataURL("image/jpeg,1.0");  
       }
 });

    InformationsquelleAutor javatogo

Schreibe einen Kommentar