Comment enregistrer un graphique jQuery FLOT dans un fichier .png ou autre format d’image?

J’utilise un plugin pour Jquery appelé FLOT http://code.google.com/p/flot/

Une fois que le graphique est rendu, je veux que le client puisse enregistrer le graphique dans un fichier pour plus tard. Avez-vous une idée de la façon dont cela peut être fait sans demander au client de télécharger un outil ou un périphérique de capture d’image?

     Graph               
$(function () { var options0 = { xaxis: {mode: "time"}, legend: {position: "nw"}, lines: {show: true}, grid: {hoverable: true}}; var grid_data0 = [[new Date(1286172000 * 1000), 1219], [new Date(1286258400 * 1000), 1583], [new Date(1286344800 * 1000), 1566], [new Date(1286431200 * 1000), 2191], [new Date(1286517600 * 1000), 2471], [new Date(1286604000 * 1000), 3128], [new Date(1286690400 * 1000), 2713], [new Date(1286776800 * 1000), 2117], [new Date(1286863200 * 1000), 3174], [new Date(1286949600 * 1000), 3051], [new Date(1287036000 * 1000), 3582], [new Date(1287122400 * 1000), 3472], [new Date(1287208800 * 1000), 3928], [new Date(1287295200 * 1000), 3688], [new Date(1287381600 * 1000), 2547], [new Date(1287468000 * 1000), 1549], [new Date(1287554400 * 1000), 3008], [new Date(1287640800 * 1000), 2309], [new Date(1287727200 * 1000), 2973], [new Date(1287813600 * 1000), 3805], [new Date(1287900000 * 1000), 3643], [new Date(1287986400 * 1000), 2310], [new Date(1288072800 * 1000), 2323], [new Date(1288159200 * 1000), 2399], [new Date(1288245600 * 1000), 2305], [new Date(1288332000 * 1000), 2393], [new Date(1288418400 * 1000), 3212], [new Date(1288504800 * 1000), 3348], [new Date(1288591200 * 1000), 2391], [new Date(1288677600 * 1000), 2130], [new Date(1288764000 * 1000), 1896], [new Date(1288850400 * 1000), 1765], [new Date(1288936800 * 1000), 2191], [new Date(1289023200 * 1000), 3008], [new Date(1289109600 * 1000), 3085], [new Date(1289199600 * 1000), 2151], [new Date(1289286000 * 1000), 2011], [new Date(1289372400 * 1000), 2016], [new Date(1289458800 * 1000), 1914]]; var plot = $.plot($("#placeholder"), [{data: grid_data0}, ], options0); }); $("#placeholder").mouseout(function(e){ $("#test").hide(); }); function test() { //var oCanvas = $("#placeholder");//document.getElementById("placeholder"); //img=document.createElement("img"); //Save //img.src=oCanvas.toDataUrl(); //Restore //oCanvas.drawImage(img, 0, 0); //var oCanvas = $("#placeholder");//document.getElementById("placeholder"); //document.write(document.getElementById('placeholder').toDataUrl()); Canvas2Image.saveAsPNG(document.getElementById('placeholder')); //Canvas2Image.saveAsPNG(oCanvas, true); } Click

    La méthode de base consiste à utiliser canvas.toDataURL("image/png"); mais j’ai aussi trouvé ce lien pour vous

    http://nihilogic.dk/labs/canvas2image/

    Je ne l’ai pas testé.

    Si vous voulez utiliser Firefox, j’ai écrit WWW :: Mechanize :: Firefox , qui permet de sauvegarder toute la page ou les éléments d’une page au format PNG.

    Vous pouvez également automatiser complètement Firefox, ce que je fais avec ffeedflotr , un petit programme de traçage de données qui crée des graphiques de type flot.

    Vous pouvez regarder dans HighCharts qui a une fonction d’exportation et d’impression. Cela fonctionne en générant tous les graphiques en SVG avant le rendu sur le canevas. Quand un utilisateur veut une image, le javascript envoie le SVG au serveur pour la conversion en une image. Voir le module d’exportation pour plus de détails.

    Les structures de données pour les diagrammes en hauteur sont bien documentées et il n’est pas trop difficile de les transférer. Ils ont également de nombreux exemples avec lesquels vous pouvez jouer de manière interactive en utilisant jsFiddle.