Mengirim file gambar dengan JSON

Ketemu lagi dengan gw, xixix. Udah lama nih g ngeblog. Hmm, kalau dilihat dari last post, udah 3 bulan lebih g ngeblog di sini. Kali ini ane mau share pengalaman ane waktu kerja, yaitu mengubah image menjadi text agar bisa dikirim dalam json body.

REST API

Jadi ceritanya gini, suatu ketika saya dapat task, dimana diminta buat bantu ngebikin API “REST” untuk mobile apps. Kebetulan waktu itu gw makai library yang biasa dipakai dan dibuat oleh temen gw sendiri. Kekurangan library “REST” yang gw pakai itu adalah dia gak bisa menerima input data berupa form POST, dan hanya mau menerima input POST dengan body JSON sebagai data input. Hehe, agak aneh sih emang, REST gak bisa proses form POST. (Mungkin di lain kesempatan gw akan share tentang apa itu REST)

Konversi Gambar ke Base64

Nah, saat gw mau bikin API yang fungsinya nerima inputan berupa gambar, disitulah gw mulai bingung. Setelah tanya temen gw yang bikin n’tu library, gw dikasih tau kalau dia biasanya konversi dulu file gambar tersebut ke dalam bentuk encoding base64. Unik juga sih caranya, tapi karena nda ada pilihan lain & deadline yang terbatas, akhirnya gw ngikutin caranya aje, ehehe.

Jadi apa sih sebenernya base64 encode itu? Menurut wiki, base64 encoding adalah skema encoding (konversi bentuk) dari bentuk biner ke dalam bentuk text ASCII. Bentuk biner ini bisa berupa banyak hal, dari file binary, gambar, media player (audio), video, dan lain sebagainya. Terus bagaimana bentuknya? Bentuknya kurang lebih sama dengan text biasa, seperti:

TWFuIGlzIGRpc3Rpbmd1aXNoZWQsIG5vdCBvbmx5IGJ5IGhpcyByZWFzb24sIGJ1dCBieSB0aGlz

IHNpbmd1bGFyIHBhc3Npb24gZnJvbSBvdGhlciBhbmltYWxzLCB3aGljaCBpcyBhIGx1c3Qgb2Yg

dGhlIG1pbmQsIHRoYXQgYnkgYSBwZXJzZXZlcmFuY2Ugb2YgZGVsaWdodCBpbiB0aGUgY29udGlu

dWVkIGFuZCBpbmRlZmF0aWdhYmxlIGdlbmVyYXRpb24gb2Yga25vd2xlZGdlLCBleGNlZWRzIHRo

ZSBzaG9ydCB2ZWhlbWVuY2Ugb2YgYW55IGNhcm5hbCBwbGVhc3VyZS4=

Terus tujuannya apasih dibuat begituan? Kebetulan, untuk kasus gw diatas, tujuannya ya gambar yang mau ikirim bisa di embed di JSON body, ehehe. Tapi sebenernya ada beberapa fungsi base64 encoding ini, untuk lebih banyak contoh lihat di wiki. Panjang sekali soalnya kalau dijelasin di sini wkwkw.

Oke, terus gimana caranya untuk encode & decode file gambar ke dalam bentuk base64? Ehehehe, untuk itu gw pakai PHP sebagai contoh encoding dan decoding file gambar ke base64 (dan sebaliknya). Kebetulan waktu itu yang melakukan encoding dari sisi aplikasi front end (mobile), jadi gw tinggal decode aja encoded text yang dikirim oleh aplikasi ke dalam bentuk gambar lagi.

Untuk melakukan encoding base64 di PHP, cukup tambahkan baris berikut ke kode agar file gambar terkonversi menjadi file string base64 (source: stackoverflow):

$path = ‘myfolder/myimage.png’;

$type = pathinfo($path, PATHINFO_EXTENSION);

$data = file_get_contents($path);

$base64 = base64_encode($data);

$base64 akan berbentuk sebagai variabel string hasil dari konversi gambar. String hasil konversi ini panjang (besarannya) akan mengikuti dari besar file gambar yang dikirim, semakin besar ukuran file gambar, semakin panjang pula stringnya, jadi kemarin sebelum dikirim, aplikasi mobile terlebih dahulu melakukan kompresi dan resize agar ukuran file gambar yang dikirim tidak terlalu besar.

Ketika text yang dikirim sampai ke server, tugas dari service API adalah konversi lagi dari text ASCII ke bentuk file gambar kemudian menyimpannya ke dalam suatu folder. Untuk melakukannya dalam PHP dapat dilakukan dengan fungsi berikut (source: stackoverflow):

function base64_to_jpeg($base64_string, $output_file) {

// open the output file for writing

$ifp = fopen( $output_file, ‘wb’ );

// split the string on commas

// $data[ 0 ] == “data:image/png;base64”

// $data[ 1 ] == <actual base64 string>

$data = explode( ‘,’, $base64_string );

// we could add validation here with ensuring count( $data ) > 1

fwrite( $ifp, base64_decode( $data[ 1 ] ) );

// clean up the file resource

fclose( $ifp );

return $output_file;

}

$output_file merupakan nama file yang disimpan dan akan berbentuk jpeg. Masalah mengirimkan gambar lewat dengan JSON pun terselesaikan wkwkw.

Sekian dulu ya share dari Saya, semoga bermanfaat, salam.