Comment convertir/enregistrer d3.js graphique au format pdf/jpeg
je travaille sur une fonction côté client/javascript pour enregistrer ou convertir un graphique D3-SVG existant en fichier.
J'ai beaucoup cherché et j'ai trouvé quelques recommandations, principalement en utilisant canvas.toDataURL() .
je n'ai pas de <canvas> dans ma page, et au lieu d'utiliser: d3.select("body").append("svg")....
J'ai aussi essayé d'ajouter le SVG au <canvas> mais rien ne se passe.
pourriez-vous m'aider à résoudre cette exception:
Uncaught TypeError: Object #<SVGSVGElement> has no method 'toDataURL'
Merci vous
4 réponses
pour afficher votre svg dans une toile, vous devez d'abord le convertir en utilisant un outil d'analyse / de rendu tel que http://code.google.com/p/canvg /
(code adapté de: Convert SVG to 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");
juste un avertissement 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/
comme l'a souligné @Premasagar dans ce commentaire sur cette question Convertissez SVG en image (JPEG, PNG, etc.) dans le navigateur
si le borwser supporte à la fois 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);
}
}
la bibliothèque Simg créée et suggérée par Mauvis Ledford ci-dessus fonctionnait très bien pour permettre le téléchargement de mes cartes svg créées avec Dimple.
je n'ai cependant 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(..) ", "svg[0].setAttribute" il permettra de soulager les "setAttribute(..) n'est pas une fonction d'erreur". De même, la même chose doit être faite ci-dessous. dans le relevé de déclaration, Ajouter "[0]" après svg (ligne 39).
j'ai aussi dû éditer manuellement la" toile.largeur " et " toile.height " (lignes 48 & 49) assignations dans le prototype toCanvas (), afin de rendre l'image téléchargée une taille plus correcte (il était précédemment juste de télécharger un carré 300x150 statique dans le coin supérieur gauche de la carte).