HTML2canvas erzeugt unscharfe Bilder

Ich verwende jsPDF und es verwendet html2canvas, um ein Bild aus einem HTML-Element zu generieren und in die PDF-Datei einzufügen. Aber es gibt ein Problem mit html2canvas, es erzeugt verschwommene Bilder aus dem HTML. Siehe Beispiel unten:

HTML-Inhalt:

http://puu.sh/7SZz4.png

html2canvas generiertes Bild:

http://puu.sh/7SZAT.png

Gibt es eine Möglichkeit, das Problem zu beheben, oder gibt es eine bessere Option, um das HTML-Bildformular zu erhalten?

Danke!

Sie können verwenden Skala Optionen in html2canvas.

In der neuesten Version, v1.0.0-alpha.1, können Sie die Skalierungsoption verwenden, um die Auflösung zu erhöhen (Skalierung: 2 verdoppelt die Auflösung von den standardmäßigen 96 dpi).

// Create a canvas with double-resolution.
html2canvas(element, {
    scale: 2,
    onrendered: myRenderFunction
});
// Create a canvas with 144 dpi (1.5x resolution).
html2canvas(element, {
    dpi: 144,
    onrendered: myRenderFunction
});

Ich hatte dieses Problem, weil ich auf einem Retina-Display war. Ich habe es mit gelöst MisterLambs Lösung hier.

$(window).load(function () {

    var scaleBy = 5;
    var w = 1000;
    var h = 1000;
    var div = document.querySelector('#screen');
    var canvas = document.createElement('canvas');
    canvas.width = w * scaleBy;
    canvas.height = h * scaleBy;
    canvas.style.width = w + 'px';
    canvas.style.height = h + 'px';
    var context = canvas.getContext('2d');
    context.scale(scaleBy, scaleBy);

    html2canvas(div, {
        canvas:canvas,
        onrendered: function (canvas) {
            theCanvas = canvas;
            document.body.appendChild(canvas);

            Canvas2Image.saveAsPNG(canvas);
            $(body).append(canvas);
        }
    });
});

HTML und PNG ohne Skalierung

HTML und PNG mit Skalierung

Ich stand vor diesem Problem und habe es mit gelöst domtoimage anstatt html2canvas.

Dies HTML2CANVAS Die Lösung funktionierte nicht gut für mich. Ich weiß, dass die Skalierungsoption die Größe des Ziel-Div erhöht, bevor sie erfasst wird, aber es funktioniert nicht, wenn Sie etwas in diesem Div haben, das die Größe nicht ändert, z. B. in meinem Fall war es eine Leinwand für mein Bearbeitungswerkzeug .

Jedenfalls habe ich mich dafür entschieden domtoimage und glauben Sie mir, ich denke, dass dies die beste Lösung von allen ist.

Ich hatte kein Problem mit html2canvas zum Beispiel:

müssen also oben auf der Webseite stehen html2canvas kann die Aufnahme vollständig erfassen und Probleme mit niedrigen dpi

function print()
{
    var node = document.getElementById('shirtDiv');
    var options = {
        quality: 0.95
    };

    domtoimage.toJpeg(node, options).then(function (dataUrl)
    {
        var doc = new jsPDF();
        doc.addImage(dataUrl, 'JPEG', -18, 20, 240, 134.12);
        doc.save('Test.pdf');
    });
}

Cdn für dom to image:

https://cdnjs.com/libraries/dom-to-image

Cdn für jspdf:

https://cdnjs.com/libraries/jspdf

Ich habe mein Problem herausgefunden. Es kommt vor, dass mein Bildschirm ein Retina-Display ist. Wenn also canvas2html den HTML-Code rendert, wird das Bild aufgrund der unterschiedlichen Pixeldichte auf dem Retina-Bildschirm verschwommen gerendert.

Habe hier die Lösung gefunden:

https://github.com/cburgmer/rasterizeHTML.js/blob/master/examples/retina.html

Das hat es für mich behoben. Und es lag nicht daran, dass ich ein Retina-Display verwendet habe (weil ich keins habe):

https://github.com/niklasvh/html2canvas/issues/576

Ändern Sie einfach die Methode getBounds() in html2canvas.js mit dieser:

 function getBounds (node) {
        if (node.getBoundingClientRect) {
            var clientRect = node.getBoundingClientRect();
            var width = node.offsetWidth == null ? clientRect.width : node.offsetWidth;
            return {
                top   : Math.floor(clientRect.top),
                bottom: Math.floor(clientRect.bottom || (clientRect.top + clientRect.height)),
                right : Math.floor(clientRect.left + width),
                left  : Math.floor(clientRect.left),
                width : width,
                height: node.offsetHeight == null ? clientRect.height : node.offsetHeight
            };
        }
        return {};
    }

Die Lösung ist nach X Stunden Test sehr einfach.

Stellen Sie Ihre ALL div’s 2x höher, Ihr IMG 2x höher und stellen Sie schließlich den HTML-Zoom auf 0,5 ein, oder wenn Sie noch bessere Qualität wünschen, stellen Sie 3x höher (in diesem Fall muss der HTML-Zoom 0,33 sein) oder mehr ein (die ursprünglichen Bildgrößen werden größer angenommen).

Beispielsweise:

HTML

<body>
 <div class="pdf">
   <img src="image.jpg">
 </div>
</body>

CSS vorher

body {
    background: #b2b2b2;
}
.pdf {
   background: #fff;
   /* A4 size */
   width: 842px;
   height: 595px;
 }
img {
   width: 300px;
   height: 200px;
}

CSS nachher (nur Änderungen)

html {
   zoom: 0.5;
}

.pdf {
   /* A4 size before . 2 */
   width: 1684; 
   height: 1190px; 
 }
img { /* size before . 2 */
   width: 600px;
   height: 400px;
}

UND hier ist mein Ergebnis:

PDF vorher
PDF nach

Wenn jemand immer noch nach einer Lösung sucht, um für ihn zu arbeiten, hatte ich Erfolg, indem ich die Skala eingestellt habe: 5. Überprüfen Sie es hier in seiner Dokumentation. https://html2canvas.hertzen.com/configuration