Aplikasi My Express menerima PNG yang disandikan base64 dari browser (dihasilkan dari kanvas dengan toDataURL ()) dan menulisnya ke file. Tetapi file tersebut bukan file gambar yang valid, dan utilitas "file" hanya mengidentifikasinya sebagai "data".
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
sumber
sumber
<img src="data:image/png;base64,..." />
). Hanya opsi untuk mempertimbangkan orang lain menggunakan utas ini sebagai referensi.Jawaban:
Saya pikir Anda mengonversi data sedikit lebih dari yang Anda butuhkan. Setelah Anda membuat buffer dengan pengkodean yang tepat, Anda hanya perlu menulis buffer ke file.
Buffer baru (..., 'base64') akan mengonversi string input menjadi Buffer, yang hanya merupakan array byte, dengan menginterpretasikan input sebagai string yang disandikan base64. Kemudian Anda bisa menulis array byte itu ke file.
Memperbarui
Seperti yang disebutkan dalam komentar,
req.rawBody
tidak ada lagi. Jika Anda menggunakanexpress
/connect
maka Anda harus menggunakanbodyParser()
middleware dan gunakanreq.body
, dan jika Anda melakukan ini menggunakan Node standar maka Anda perlu menggabungkan objekdata
acara yang masukBuffer
dan melakukan data gambar ini dengan menguraikan dalamend
callback.sumber
req.rawBody
berisi data permintaan yang disandikan sebagai URL data: developer.mozilla.org/en-US/docs/data_URIs . Jadi, Anda harus menghapus bagian awal untuk mendapatkan hanya data base64 untuk disimpan.ini adalah solusi lengkap saya yang akan membaca format gambar base64 dan menyimpannya dalam format yang tepat di basis data:
sumber
MEMPERBARUI
Saya menemukan tautan menarik ini bagaimana menyelesaikan masalah Anda di PHP . Saya pikir Anda lupa untuk mengganti
space
dengan+
seperti yang ditunjukkan pada tautan.Saya mengambil lingkaran ini dari http://images-mediawiki-sites.thefullwiki.org/04/1/7/5/6204600836255205.png sebagai sampel yang terlihat seperti:
Selanjutnya saya memasukkannya melalui http://www.greywyvern.com/code/php/binary2base64 yang mengembalikan saya:
menyimpan string ini
base64
yang saya baca dari dalam kode saya.Saya mendapatkan lingkaran kembali, tetapi lucunya file files telah berubah :)
AKHIR
Ketika Anda membaca kembali gambar, saya pikir Anda perlu mengatur header
Ambil contoh gambar dari halaman PHP:
Saya pikir baris kedua
header('Content-Type: image/png');
, penting kalau gambar Anda tidak akan ditampilkan di browser, tetapi hanya sekelompok data biner yang ditampilkan ke browser.Dalam Express, Anda cukup menggunakan sesuatu seperti di bawah ini. Saya akan menampilkan gravatar Anda yang terletak di http://www.gravatar.com/[/cabf735ce7b8b4471ef46ea54f71832d?s=32&d=identicon&r=PG dan merupakan file jpeg saat Anda
curl --head http://www.gravatar.com/avatar/cabf735ce7b8b4471ef46ea54f71832d?s=32&d=identicon&r=PG
. Saya hanya meminta tajuk karena ikal lain akan menampilkan banyak hal biner (Google Chrome segera mengunduh) ke konsol:app.js
sumber
Saya juga harus menyimpan gambar yang disandikan Base64 yang merupakan bagian dari URL data, jadi saya akhirnya membuat modul npm kecil untuk melakukannya jika saya (atau orang lain) perlu melakukannya lagi di masa depan. Ini disebut ba64 .
Sederhananya, dibutuhkan URL data dengan gambar yang disandikan Base64 dan menyimpan gambar ke sistem file Anda. Itu dapat menyimpan secara sinkron atau asinkron. Ini juga memiliki dua fungsi pembantu, satu untuk mendapatkan ekstensi file gambar, dan yang lainnya untuk memisahkan pengkodean Base64 dari
data:
awalan skema.Ini sebuah contoh:
Menginstalnya:
npm i ba64 -S
. Repo ada di GitHub: https://github.com/HarryStevens/ba64 .PS Terpikir oleh saya kemudian bahwa ba64 mungkin adalah nama yang buruk untuk modul karena orang mungkin menganggap itu melakukan encoding dan decoding Base64, yang tidak (ada banyak modul yang sudah melakukan itu). Baiklah.
sumber
Ini melakukannya untuk saya dengan sederhana dan sempurna.
Penjelasan luar biasa dari Scott Robinson
Dari gambar ke string base64
Dari string base64 ke gambar
sumber
Cara mudah untuk mengonversi gambar base64 ke file dan menyimpan beberapa id atau nama acak.
sumber
Konversi dari file dengan string base64 ke gambar png.
4 varian yang berfungsi.
sumber
Di bawah ini berfungsi untuk menyimpan file, cukup kirimkan file base64 Anda, itu mengembalikan nama file simpan dalam DB.
sumber
Anda bisa menggunakan perpustakaan pihak ketiga seperti base64-img atau base64-to-image .
sumber