Moja aplikacja Express odbiera plik PNG zakodowany w standardzie Base64 z przeglądarki (wygenerowany z kanwy za pomocą toDataURL ()) i zapisuje go do pliku. Jednak plik nie jest prawidłowym plikiem obrazu, a narzędzie „plik” identyfikuje go po prostu jako „dane”.
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
źródło
źródło
<img src="data:image/png;base64,..." />
). To tylko opcja do rozważenia dla innych używających tego wątku jako odniesienia.Odpowiedzi:
Myślę, że konwertujesz dane nieco bardziej, niż potrzebujesz. Po utworzeniu bufora z odpowiednim kodowaniem wystarczy zapisać bufor do pliku.
new Buffer (..., 'base64') przekształci ciąg wejściowy w bufor, który jest po prostu tablicą bajtów, interpretując dane wejściowe jako ciąg zakodowany algorytmem base64. Następnie możesz po prostu zapisać tę tablicę bajtów do pliku.
Aktualizacja
Jak wspomniano w komentarzach,
req.rawBody
to już nie jest rzecz. Jeśli używaszexpress
/connect
to powinieneś użyćbodyParser()
oprogramowania pośredniego i użyćreq.body
, a jeśli robisz to za pomocą standardowego Node, musisz zagregować przychodzące obiektydata
zdarzeńBuffer
i przeprowadzić analizę danych obrazu wend
wywołaniu zwrotnym.źródło
req.rawBody
zawiera dane żądania, które są zakodowane jako adres URL danych: developer.mozilla.org/en-US/docs/data_URIs . Musisz więc usunąć część początkową, aby zapisać tylko dane base64.to jest moje pełne rozwiązanie, które odczyta dowolny format obrazu base64 i zapisze go w odpowiednim formacie w bazie danych:
źródło
AKTUALIZACJA
Znalazłem interesujący link, jak rozwiązać problem w PHP . Myślę, że zapomniałeś zamienić
space
na,+
jak pokazano w linku.Wziąłem ten krąg z http://images-mediawiki-sites.thefullwiki.org/04/1/7/5/6204600836255205.png jako próbkę, która wygląda następująco:
Następnie umieściłem to przez http://www.greywyvern.com/code/php/binary2base64, co zwróciło mi:
zapisałem ten ciąg, z
base64
którego czytałem w moim kodzie.Dostaję kółko z powrotem, ale zabawne jest to, że rozmiar pliku się zmienił:) ...
KONIEC
Kiedy czytasz obraz, myślę, że musisz ustawić nagłówki
Weźmy na przykład imagepng ze strony PHP:
Myślę, że druga linia
header('Content-Type: image/png');
jest ważna, ponieważ w przeciwnym razie twój obraz nie będzie wyświetlany w przeglądarce, ale przeglądarka wyświetla tylko zbiór danych binarnych.W Expressie po prostu użyjesz czegoś takiego jak poniżej. Mam zamiar wyświetlić twój gravatar, który znajduje się pod adresem http://www.gravatar.com/avatar/cabf735ce7b8b4471ef46ea54f71832d?s=32&d=identicon&r=PG i jest plikiem jpeg
curl --head http://www.gravatar.com/avatar/cabf735ce7b8b4471ef46ea54f71832d?s=32&d=identicon&r=PG
. Żądam tylko nagłówków, ponieważ w przeciwnym razie curl wyświetli kilka plików binarnych (Google Chrome natychmiast przejdzie do pobrania) na konsolę:app.js
źródło
Musiałem również zapisać obrazy zakodowane w Base64, które są częścią adresów URL danych, więc skończyło się na stworzeniu małego modułu npm, aby to zrobić na wypadek, gdybym (lub ktoś inny) musiał zrobić to ponownie w przyszłości. Nazywa się ba64 .
Mówiąc najprościej, pobiera adres URL danych z obrazem zakodowanym w formacie Base64 i zapisuje obraz w systemie plików. Może zapisywać synchronicznie lub asynchronicznie. Posiada również dwie funkcje pomocnicze, jedną do pobierania rozszerzenia pliku obrazu, a drugą do oddzielania kodowania Base64 od
data:
prefiksu schematu.Oto przykład:
Zainstalować go:
npm i ba64 -S
. Repozytorium znajduje się na GitHub: https://github.com/HarryStevens/ba64 .PS Później przyszło mi do głowy, że ba64 to prawdopodobnie zła nazwa dla modułu, ponieważ ludzie mogą przypuszczać, że obsługuje on kodowanie i dekodowanie Base64, czego nie robi (jest wiele modułów, które już to robią). No cóż.
źródło
Zrobiło to dla mnie prosto i doskonale.
Doskonałe wyjaśnienie Scotta Robinsona
Od obrazu do ciągu base64
Od ciągu base64 do obrazu
źródło
Łatwy sposób na konwersję obrazu base64 do pliku i zapisanie jako losowy identyfikator lub nazwa.
źródło
Konwersja z pliku z ciągiem base64 do obrazu png.
4 warianty, które działają.
źródło
Poniżej funkcja zapisywania plików, po prostu podaj swój plik base64, zwraca nazwę pliku i zapisz go w DB.
źródło
Możesz użyć biblioteki innej firmy, takiej jak base64-img lub base64-to-image .
źródło