Cara menggunakan
- Tempel string Base64 atau URI data:image/png;base64 lengkap.
- Periksa pratinjau. Area transparan ditampilkan di atas pola papan catur.
- Biarkan Unduh sebagai pada PNG. Jika datanya berupa JPEG, WebP, atau format lain, data tersebut dikonversi ke PNG di browser Anda.
- Unduh file .png.
Dari mana PNG Base64 berasal
PNG adalah format yang paling mungkin Anda temui dalam bentuk Base64. Memanggil canvas.toDataURL() tanpa argumen menghasilkan data URI PNG. Alat otomatisasi browser mengembalikan tangkapan layar sebagai PNG Base64, misalnya page.screenshot({ encoding: 'base64' }) di Puppeteer atau get_screenshot_as_base64() di Selenium. Perender grafik, generator kode QR, dan API pembuat gambar sering mengembalikan gambar sebagai kolom Base64 di dalam JSON.
String PNG mudah dikenali: selalu diawali dengan iVBORw0KGgo, yaitu hasil enkode signature PNG 8 byte yang dimulai dengan 89 50 4E 47. Setelahnya muncul AAAANSUhEUg, yang merupakan awal chunk IHDR berisi lebar dan tinggi gambar.
String yang disalin dari JSON perlu diperiksa sebentar terlebih dahulu. Misalnya, json_encode di PHP secara default meng-escape garis miring, sehingga PNG dari API PHP bisa datang dengan urutan \/. Ganti urutan tersebut dengan / dan hapus tanda kutip di sekelilingnya sebelum menempel.
Mengapa menyimpan sebagai PNG
PNG memampatkan data tanpa menghilangkan detail apa pun dan menyimpan kanal alfa penuh, sehingga bayangan lembut dan tepi anti-aliasing tetap utuh. Karena itu PNG menjadi pilihan alami untuk tangkapan layar, elemen antarmuka, diagram, dan apa pun yang berisi teks. Untuk foto, JPG atau WebP menghasilkan file yang jauh lebih kecil.
Mengonversi JPEG atau WebP ke PNG mempertahankan persis apa yang terlihat di layar, tetapi tidak dapat mengembalikan detail yang sudah dibuang oleh kompresi lossy, dan PNG-nya biasanya lebih besar daripada file sumbernya.
Menyimpan PNG Base64 lewat kode
# Python
import base64
with open('screenshot.png', 'wb') as f:
f.write(base64.b64decode(b64_string))
// Browser: data URI ke Blob, tanpa dekode manual
const blob = await (await fetch(dataUri)).blob();
const url = URL.createObjectURL(blob);Perlu arah sebaliknya? PNG ke Base64 mengenkode file menjadi string atau data URI.
Pertanyaan yang sering diajukan
Bagaimana cara mengetahui apakah string Base64 berisi PNG?
iVBORw0KGgo. Alat ini juga membaca byte signature secara langsung, sehingga melaporkan format sebenarnya meskipun data URI menyebutkan format lain.Apakah konversi ke PNG menurunkan kualitas?
Tidak. PNG bersifat lossless, sehingga piksel disimpan persis seperti yang didekode browser. Satu-satunya kehilangan adalah yang sudah terjadi pada file sumber.
Apakah transparansi dipertahankan?
Ya. Keluaran PNG mempertahankan kanal alfa penuh. Keluaran JPEG mengisi area transparan dengan warna putih, dan keluaran GIF mengubah setiap piksel menjadi transparan penuh atau buram penuh.
Data URI PNG saya menampilkan gambar rusak. Apa masalahnya?
\/ sebelum menempel.