Enregistrer flot graphique en tant qu'image
Salut, je suis en train d'enregistrer flot graphique en tant qu'image (png, jpeg..). Je regarde dans d'autres questions qu'ils des conseils à utiliser de la toile.toDataURL("image/png"); ou canvas2image. Cependant, je suis en utilisant des div pour le flot de la façon suivante.
<div id="graph"> <div id="graphc" style="width: 600px;height:153px; top: 560px; left:120px; auto;"> </div> </div>
plot= $.plot($("#graph #graphc"),
[ {data: data5 ],
xaxis: { mode: "time",minTickSize: [10, "second"],
timeformat: "%0H:%0M" } } );
Comment puis-je enregistrer ce graphique? Merci pour votre aide.
OriginalL'auteur user1874941 | 2013-03-25
Vous devez vous connecter pour publier un commentaire.
Vous avez besoin pour obtenir la toile qui flot crée au sein de votre div. Si vous regardez la docs vous verrez il y a un
.getCanvas()
fonction. Ou vous pourriez probablement utiliser jQuery pour sélectionner une toile à l'intérieur de votre div.Une fois que vous avez la toile, vous pouvez utiliser
.toDataURL
ou de toute autre technique.Donc, vous avez ce:
Et alors vous devriez être en mesure de le faire:
Pour télécharger un fichier, vous devez utiliser
.toDataURL()
, puis remplacezimage/png
type mime avecimage/octet-stream
et ensuite configurer votredocument.location.href
à votre chaîne:Ou vous pouvez utiliser canvas2image de faire tout cela pour vous.
Edit: Le seul problème avec ceci est que, dans FireFox, au moins, l'image sera enregistrée avec un nombre aléatoire à la recherche de nom et un
.part
extension. Changer l'.png
va révéler qu'il est l'image réelle. Vous ne savez pas si il ya une bonne façon de convaincre le navigateur de l'enregistrer avec un nom convivial, ou au moins l'un avec la bonne extension.J'ai mis à jour ma réponse
Je n'var myCanvas = intrigue.getCanvas(); myCanvas.toDataURL("image/png"); toutefois, il ne faut pas enregistrer une image. il n'y a pas d'erreur.
.toDataURL ne pas enregistrer une image directement, il la code tel que vous pouvez l'utiliser comme source pour une autre toile ou un
img
tag. Vous pouvez ensuite l'enregistrer, ou vous pouvez, comme vous le suggérez dans votre question, utiliser une bibliothèque comme canvas2image pour gérer cela pour vous (canvas2image fait exactement la même chose).pour enregistrer avec un nom convivial, vous pouvez utiliser ma fourchette de canvas2image github.com/mbochynski/canvas2image
OriginalL'auteur Matt Burland
Je n'étais pas heureux avec n'importe quel de ces solutions, en raison des problèmes suivants:
Ma solution à ce problème est de changer les options du graphique à replot toile seulement graphique, puis utiliser de la toile-à-goutte pour convertir ce tableau pour une goutte, puis FileSaver pour enregistrer le blob pour l'utilisateur, enfin je replot le graphique après l'enregistrement de l'image.
Requiert les éléments suivants JS plugins:
Code:
Peut-être si vous avez des préoccupations similaires au sujet de la solution ci-dessus(s), vous pouvez essayer celui-ci.
OriginalL'auteur srussking
J'ai fait quelques corrections au code. Afin d'enregistrer le graphique localement, vous pouvez utiliser le code ci-dessous.
OriginalL'auteur user1874941