Generieren von Bilddaten aus dem HTML-Canvas-Element

Question

Was ist der beste Weg, um Bilddaten aus dem Inhalt eines HTML-Canvas-Elements zu generieren?

Ich möchte die Bilddaten so erstellen, dass sie an einen Server übertragen werden können (der Benutzer muss nicht direkt in einer Datei speichern können). Die Bilddaten sollten in einem gängigen Format wie PNG oder JPEG vorliegen.

Lösungen, die in mehreren Browsern korrekt funktionieren, werden bevorzugt. Wenn jedoch jede Lösung vom Browser abhängt, sollten aktuelle Versionen von Firefox als Ziel gewählt werden.

Answer 1

Ich denke, eine Lib, die Sie verwenden können, ist Canvas2Image, verwendet native Features aus Canvas, aber es wird nicht auf jedem Browser funktionieren. Ich habe eine optimierte Version dieser Lib, wenn Sie möchten, ich werde es mit Ihnen teilen.

Dann könnten Sie die generierte Data URI und senden Sie es mit Ajax an den Server.

Answer 2

Firefox und Opera haben eine toDataURL() Methode, die eine Daten-URL PNG-formatiert zurückgibt. Sie können das Ergebnis einem Formularfeld zuweisen, um es an den Server zu senden.

Die Daten-URL ist Base-64-codiert, daher müssen Sie sie auf der Serverseite dekodieren. Sie müssten auch die "Daten: image/png;" Teil natürlich.