Hi Ich versuche, flot Grafik als Bild zu speichern (png / jpeg ..). Ich schaue mir andere Fragen an, die sie raten, canvas.toDataURL ("image / png") zu verwenden; oder canvas2image. Allerdings verwende ich div für Flot wie folgt.
%Vor%Wie kann ich dieses Diagramm speichern? Danke für Ihre Hilfe.
Sie müssen die Leinwand, die flot erzeugt, in Ihr div bekommen. Wenn Sie sich die Dokumentation ansehen, sehen Sie, dass es eine Funktion .getCanvas() gibt. Oder Sie könnten wahrscheinlich jQuery verwenden, um eine Zeichenfläche in Ihrem div auszuwählen.
Sobald Sie die Leinwand haben, können Sie .toDataURL oder eine andere Technik verwenden.
Sie haben das also:
%Vor%Und dann sollten Sie in der Lage sein, dies zu tun:
%Vor% Um eine Datei tatsächlich herunterzuladen, müssen Sie .toDataURL() verwenden, dann image/png mime type durch image/octet-stream ersetzen und dann Ihre document.location.href auf Ihre Zeichenfolge setzen:
Oder Sie können canvas2image verwenden, um all dies für Sie zu tun.
Bearbeiten: Das einzige Problem dabei ist, dass in FireFox das Bild mit einem zufälligen Namen und einer .part Erweiterung gespeichert wird. Wenn Sie sie in .png ändern, wird angezeigt, dass es sich um das eigentliche Bild handelt. Ich bin mir nicht sicher, ob es einen guten Weg gibt, den Browser davon zu überzeugen, ihn mit einem freundlichen Namen oder zumindest einem mit der korrekten Erweiterung zu speichern.
Ich habe einige Korrekturen am Code vorgenommen. Um Graphen lokal zu speichern, können Sie den folgenden Code verwenden.
%Vor%Ich war mit einer dieser Lösungen aufgrund der folgenden Probleme nicht zufrieden:
Meine Lösung für dieses Problem besteht darin, die Optionen für das Diagramm so zu ändern, dass es als Canvas-Diagramm neu erstellt wird. Verwenden Sie dann canvas-to-blob, um dieses Diagramm in ein Blob zu konvertieren, und FileSaver, um das Blob für den Benutzer zu speichern erneut das Diagramm nach dem Speichern des Bildes.
Erfordert die folgenden JS-Plugins:
Code:
%Vor%Wenn Sie ähnliche Bedenken hinsichtlich der oben genannten Lösung (en) haben, können Sie diese versuchen.
Tags und Links javascript html html5