À l'échelle de l'image avant de toDataURL - html2canvas

Avant de me dire que c'est une double question, savent que j'ai cherché à travers chaque seule question similaire, aucun des réponses dans l'un d'eux est de travailler pour moi.

Im en utilisant html2canvas de saisir un instantané d'un div, et ce que je dois faire est de mettre à l'échelle jusqu'à 750x1050 avant de l'enregistrer en png via canvas.toDataURL().

Le plus proche que j'ai eu était avec le code suivant.

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);
   }
});

L'image a été correctement dimensionné, mais le texte à l'intérieur de l'image était de très mauvaise qualité, comme si elle redimensionnée il après devenir un png.

Est-ce que je suis en train de faire quelque chose de mal, ou vous pouvez tout simplement pas à l'échelle de cette façon?

Toute suggestion/travail sera grandement appréciée!

PS: La div je suis de capturer un instantané de est un contenu modifiable div avec un fond de couleur et de texte html à l'intérieur.

OriginalL'auteur shaneparsons | 2015-02-20

  1. 3

    Pour quelqu'un d'autre en se demandant comment obtenir une haute résolution d'impression digne d'un contenu html: PhantomJS et wkhtmltopdf /wkhtmltoimage sont grandes alternatives qui gèrent ces choses mieux.

    Il me semble que ces alternatives ne fonctionnent pas pour le contenu web dynamique où le DOM a changé après le chargement de la page, est ce que le droit? PhantomJS semble fonctionner en lui donnant une URL, et Wkhtmltopdf semble fonctionner en lui donnant un fichier HTML ou URL, par opposition à la création d'une image basée sur l'état actuel d'une application web. Corrigez-moi si je me trompe.
    J'ai été en mesure de pouvoir utiliser wkhtmltopdf avec une page dynamique créé à partir de php, html et javascript. La page a été spécialement construit pour le pdf, donc il s'est passé dans l'arrière-plan et n'a pas été présentée à l'utilisateur. Peut-être que vous pourriez essayer quelque chose le long des lignes?
    Essentiellement de re-créer ce que vous souhaitez imprimer au format pdf sur une page en arrière-plan.

    OriginalL'auteur shaneparsons

  2. 2

    J'ai eu peu le même problème et c'est ce que j'ai fait

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

    Maintenant, cela conduit toujours à des images floues (surtout avec le texte), mais c'était parce que mon zoom par défaut sur le navigateur a été fixé à 110% de ceux qui causent la fenêtre.devicePixelRatio à 1.1000... j'ai trié en montrant simplement d'avertissement pour l'utilisateur (qui a travaillé pour l'usage que j'en ai besoin), mais apparemment il y a une meilleure façon de le résoudre https://stackoverflow.com/a/22819006/460586

    OriginalL'auteur Antti Vikman

  3. 0

    Même mes images ont été à venir pixélisée et parfois à l'étroit quand il y avait beaucoup de contenu pour l'adapter à un pré-réglage de la largeur et de la hauteur.
    Après des heures de recherche, a trouvé une bonne solution à partir de ce post. Il prend soin de maintenir la résolution à la bonne mesure, même sur le zoom et le visible sans pixelisation. 

    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");  
       }
 });

    OriginalL'auteur javatogo