web-dev-qa-db-fra.com

HTML2canvas génère des images floues

J'utilise jsPDF et il utilise html2canvas pour générer une image à partir d'un élément html et l'insérer dans le fichier .pdf. Mais il y a un problème sur html2canvas, il génère des images floues à partir du html. Voir exemple ci-dessous:

Contenu HTML:

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

html2canvas image générée:

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

Existe-t-il un moyen de résoudre ce problème ou existe-t-il une meilleure option pour obtenir le format d'image HTML?

merci! 

javascripthtmlcanvashtml2canvasjspdf
11
jgabrielfaria

J'ai découvert mon problème. Il arrive que mon écran soit un affichage Retina. Ainsi, lorsque le canvas2html rend le code HTML, en raison de la différence de densité de pixels sur l’écran Retina, l’image est rendue floue.

Découvrez la solution ici:

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

2
jgabrielfaria

vous pouvez utiliser scale options dans html2canvas.

Dans la dernière version, v1.0.0-alpha.1, vous pouvez utiliser l'option d'échelle pour augmenter la résolution (échelle: 2 double la résolution par rapport à la résolution par défaut de 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
});
12
Ricky sharma

J'ai eu ce problème parce que j'étais sur un écran de rétine. J'ai résolu en utilisant la solution de MisterLamb ici .

$(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 et PNG sans mise à l'échelle

 enter image description here

HTML et PNG avec mise à l'échelle

 enter image description here

9
Charles Clayton

C'est ce qui l'a corrigé pour moi. Et ce n’est pas parce que j’utilisais un écran de rétine (parce que je n’en ai pas):

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

Il suffit de changer la méthode getBounds () dans html2canvas.js avec celui-ci:

 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 {};
    }
0
foreyez