Meine Express-App empfängt ein base64-codiertes PNG vom Browser (generiert aus Canvas mit toDataURL ()) und schreibt es in eine Datei. Die Datei ist jedoch keine gültige Bilddatei, und das Dienstprogramm "Datei" identifiziert sie einfach als "Daten".
var body = req.rawBody,
base64Data = body.replace(/^data:image\/png;base64,/,""),
binaryData = new Buffer(base64Data, 'base64').toString('binary');
require("fs").writeFile("out.png", binaryData, "binary", function(err) {
console.log(err); // writes out file without error, but it's not a valid image
});
image
node.js
base64
binaryfiles
Mahemoff
quelle
quelle
<img src="data:image/png;base64,..." />
). Nur eine Option, die andere in Betracht ziehen sollten, wenn sie diesen Thread als Referenz verwenden.Antworten:
Ich denke, Sie konvertieren die Daten etwas mehr als nötig. Sobald Sie den Puffer mit der richtigen Codierung erstellt haben, müssen Sie nur noch den Puffer in die Datei schreiben.
new Buffer (..., 'base64') konvertiert die Eingabezeichenfolge in einen Puffer, der nur ein Array von Bytes ist, indem die Eingabe als base64-codierte Zeichenfolge interpretiert wird. Dann können Sie einfach dieses Byte-Array in die Datei schreiben.
Aktualisieren
Wie in den Kommentaren erwähnt,
req.rawBody
ist das keine Sache mehr. Wenn Sieexpress
/ verwendenconnect
, sollten Sie diebodyParser()
Middleware verwenden und verwendenreq.body
. Wenn Sie dies mit dem Standardknoten tun, müssen Sie die eingehendendata
Ereignisobjekte aggregierenBuffer
und diese Bilddaten imend
Rückruf analysieren .quelle
req.rawBody
enthält die Anforderungsdaten, die als Daten-URL codiert sind: developer.mozilla.org/en-US/docs/data_URIs . Sie müssen also den Anfangsteil entfernen, um nur die Base64-Daten zu speichern.Dies ist meine vollständige Lösung, die jedes base64-Bildformat liest und im richtigen Format in der Datenbank speichert:
quelle
AKTUALISIEREN
Ich fand diesen interessanten Link, wie Sie Ihr Problem in PHP lösen können . Ich denke, Sie haben vergessen,
space
durch zu ersetzen,+
wie im Link gezeigt.Ich habe diesen Kreis von http://images-mediawiki-sites.thefullwiki.org/04/1/7/5/6204600836255205.png als Beispiel genommen, das aussieht wie:
Als nächstes habe ich es über http://www.greywyvern.com/code/php/binary2base64 geschrieben, was mir zurückgegeben hat:
hat diese Zeichenfolge gespeichert, aus
base64
der ich in meinem Code gelesen habe.Ich bekomme einen Kreis zurück, aber das Lustige ist, dass sich die Dateigröße geändert hat :) ...
ENDE
Wenn Sie das Bild zurücklesen, müssen Sie wahrscheinlich Header einrichten
Nehmen Sie zum Beispiel imagepng von der PHP-Seite:
Ich denke, die zweite Zeile
header('Content-Type: image/png');
ist wichtig, sonst wird Ihr Bild nicht im Browser angezeigt, sondern nur eine Reihe von Binärdaten wird dem Browser angezeigt.In Express würden Sie einfach so etwas wie unten verwenden. Ich werde Ihren Gravatar anzeigen, der sich unter http://www.gravatar.com/avatar/cabf735ce7b8b4471ef46ea54f71832d?s=32&d=identicon&r=PG befindet und bei Ihnen eine JPEG-Datei ist
curl --head http://www.gravatar.com/avatar/cabf735ce7b8b4471ef46ea54f71832d?s=32&d=identicon&r=PG
. Ich fordere nur Header an, da Curl sonst eine Reihe von Binärdaten (Google Chrome wird sofort heruntergeladen) auf der Konsole anzeigt:app.js.
quelle
Ich musste auch Base64-codierte Bilder speichern, die Teil von Daten-URLs sind, und so habe ich ein kleines npm-Modul erstellt, um dies zu tun, falls ich (oder jemand anderes) es in Zukunft erneut tun muss. Es heißt ba64 .
Einfach ausgedrückt, nimmt es eine Daten-URL mit einem Base64-codierten Bild und speichert das Bild in Ihrem Dateisystem. Es kann synchron oder asynchron gespeichert werden. Es hat auch zwei Hilfsfunktionen, eine zum Abrufen der Dateierweiterung des Bildes und die andere zum Trennen der Base64-Codierung vom
data:
Schema-Präfix.Hier ist ein Beispiel:
Installieren Sie es :
npm i ba64 -S
. Repo ist auf GitHub: https://github.com/HarryStevens/ba64 .PS Später kam mir der Gedanke, dass ba64 wahrscheinlich ein schlechter Name für das Modul ist, da die Leute annehmen können, dass es Base64-Codierung und -Decodierung durchführt, was nicht der Fall ist (es gibt viele Module, die dies bereits tun). Naja.
quelle
Das hat es für mich einfach und perfekt gemacht.
Hervorragende Erklärung von Scott Robinson
Vom Bild zum Base64-String
Von der Base64-Zeichenfolge zum Bild
quelle
Einfache Möglichkeit, das base64- Image in eine Datei zu konvertieren und als zufällige ID oder Namen zu speichern.
quelle
Konvertieren von einer Datei mit Base64-Zeichenfolge in ein PNG-Bild.
4 Varianten, die funktionieren.
quelle
Unter Funktion zum Speichern von Dateien, übergeben Sie einfach Ihre base64-Datei, es wird der Dateiname zurückgegeben, speichern Sie es in der Datenbank.
quelle
Sie können eine Drittanbieter-Bibliothek wie base64-img oder base64-to-image verwenden .
quelle