web-dev-qa-db-fra.com

Comment convertir / enregistrer le graphique d3.js en pdf / jpeg

Je travaille sur une fonction côté client/javascript pour enregistrer ou convertir un graphique D3-SVG existant dans un fichier. J'ai beaucoup cherché et trouvé quelques recommandations, principalement en utilisant canvas.toDataURL().

Je n'ai pas de <canvas> Dans ma page, et à la place j'utilise: d3.select("body").append("svg").... J'ai également essayé d'ajouter le SVG au <canvas> Mais rien ne se passe.

Pourriez-vous s'il vous plaît m'aider à résoudre cette exception:

Uncaught TypeError: Object #<SVGSVGElement> has no method 'toDataURL'

Merci

svgd3.jspdf-generation
30
Moein

Comme l'a souligné @Premasagar dans ce commentaire sur cette question Convertir SVG en image (JPEG, PNG, etc.) dans le navigateur

Si le borwser prend en charge SVG et canvas, vous pouvez utiliser cette technique https://svgopen.org/2010/papers/62-From_SVG_to_Canvas_and_Back/index.html

function importSVG(sourceSVG, targetCanvas) {
    // https://developer.mozilla.org/en/XMLSerializer
    svg_xml = (new XMLSerializer()).serializeToString(sourceSVG);
    var ctx = targetCanvas.getContext('2d');

    // this is just a JavaScript (HTML) image
    var img = new Image();
    // http://en.wikipedia.org/wiki/SVG#Native_support
    // https://developer.mozilla.org/en/DOM/window.btoa
    img.src = "data:image/svg+xml;base64," + btoa(svg_xml);

    img.onload = function() {
        // after this, Canvas’ Origin-clean is DIRTY
        ctx.drawImage(img, 0, 0);
    }
}
4
Pavel Nikolov

Pour afficher votre svg dans un canevas, vous devez d'abord le convertir à l'aide d'un utilitaire d'analyse/rendu tel que http://code.google.com/p/canvg/

(code adapté de: Convertir SVG en image (JPEG, PNG, etc.) dans le navigateur , non testé)

// the canvg call that takes the svg xml and converts it to a canvas
canvg('canvas', $("#my-svg").html());

// the canvas calls to output a png
var canvas = document.getElementById("canvas");
var img = canvas.toDataURL("image/png");
20
widged

Juste pour prévenir que j'ai transformé ce concept en une petite bibliothèque JavaScript: https://github.com/krunkosaurus/simg

Il convertit simplement n'importe quel SVG en une image pour l'échanger ou déclencher un téléchargement. Idée tirée d'ici: http://techslides.com/save-svg-as-an-image/

6
Mauvis Ledford

La bibliothèque Simg créée et suggérée par Mauvis Ledford ci-dessus a très bien fonctionné pour permettre le téléchargement de mes graphiques svg créés avec Dimple.

J'ai cependant eu besoin de changer un aspect du code pour le faire fonctionner. À l'intérieur du prototype toString (), à l'intérieur de la boucle forEach (ligne 37), si vous changez "svg.setAttribute (..)" en "svg [0] .setAttribute", cela atténuera le "setAttribute (..) n'est pas une fonction "erreur. De même, la même chose doit être faite juste en dessous dans l'instruction return, en ajoutant "[0]" après svg (ligne 39).

J'ai également dû modifier manuellement les affectations "canvas.width" et "canvas.height" (lignes 48 et 49) dans le prototype toCanvas (), afin de rendre l'image téléchargée plus correcte (il s'agissait auparavant de télécharger un fichier carré statique de 300 x 150 dans le coin supérieur gauche du graphique).

3
Psilocybic