Membuat File Gambar menjadi Kode

3 Maret 2015

Dalam pembuatan sebuah aplikasi atau software seringkali kita ingin membuat software tersebut mudah di distribusikan. Seringkali kita melakukan kompresi atau pengelompokan ke dalam sebuah file seperti zip, tar, tar gz, rar dll. Adakalanya software yang kita buat memerlukan file tambahan seperti file gambar agar dapat membuat tampilan ataupun data menjadi jelas atau mudah dimengerti. 

Dalam dunia database, contohnya seperti MySQL. Kita dapat menyimpan file gambar dalam tipe blob. Sedangkan ketika kita bermain di dunia web adakalanya kita perlu membuat file gambar langsung terintegrasi dengan javascript. Bila kita membuat plugin, kita dapat menyertakan file gambar dalam path tambahan. Namun, seringkali cara seperti ini tidak praktis. Kita dapat menyertakan file gambar yang ikut dalam satu file tanpa terpisah dalam bentuk file sendiri. Keuntungannya salah satunya yaitu plugin yang kita buat tidak mudah diotak atik oleh orang lain. Keuntungan lainnya yaitu gambar yang kita sertakan akan selalu ikut serta dengan file plugin yang kita buat. Solusinya yaitu file gambar diubah menjadi kode. Bahkan plugin sekelas jquery seperti tinymce juga memanfaatkan encode base64. Andapun dapat mengubah gambar gambar emoji kesukaan anda menjadi kode untuk didistribusikan memenuhi berbagai kebutuhan. 

Perubahan file gambar menjadi kode ini, mempunyai format base64. Contohnya seperti gambar berikut ini:
gambar disamping adalah gambar berformat .gif yang akan diubah menjadi     kode. Anda dapat menggunakan format gif atau juga yang lain seperti jpg atau png.

Hasil kodenya adalah sebagai berikut:
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

Sedangkan untuk script javascript untuk decode dan encode salah satunya seperti berikut :
Sedangkan cara memanggilnya sebagai berikut:

<img src="data:image/gif;base64,R0lGODlhdgAwAOZ/ACorADExAfHx7k5OIv7+/MnJu/39+UFBEWlpROvr44WFZuTk3X59ZHd3VYWEbJybiDQ0Avr59TQ0AK2tmZSUfMLCtiIjAH59XdrZ0WtrTPr6+aSlkc3MwkJDGzk6FlFSLNHPx/Lx6jExBvf388XEuDMyA9LTxoyNdbGxnnZ3Wn59XzQ0C/3+/lRVMTk5DFxcOb6+reLi20tNKODf2oyKbr29q05QKlZYNUZEIS4vAv3+/CYoADQyBDU0BHJyVRcbALi3qvT17i8uAB8gADY0AygnAKCgiFxcM9bWzJKSd7u7qv///v7+/v7+///+/318Xn9+YH9+XdTUyEBAF//+/nV0VP79/kpHJDg1AtTTyWJlRCAdAEdIIP39/MDBtP79/aWjj/Pz7bS0o7i3pc3MvF9gPkdKIdDOv317X2BfTVhWMcjJwPz8+tPSyGlrVNPSzXl5WXh5XDg5DzY2AWRjP/7//f7//7u8rDM0ADMzBzU2ATU1AXN0UjMzAP///////yH/C05FVFNDQVBFMi4wAwEAAAAh+QQFyAB/ACwAAAAAdgAwAAAH/4B+goOEhYaHiImKi4yNjo+QkZKTlJWWl5iZmpucnZ6foKGio6SlpqeojE8XrK2urxdQrLKwrU8TqbmCIiW9vr/AEL3CEMLAvSJVurklxc7P0BASAQBFAAAB0cUlF8upzdrFEsV9OwAddFVVLx5F2Xviwk/eqODaPRA9AHkpXgmDS2ZQkANAT75x3OidshetR48iL6QMqkOAyRJBWWQAmOMsYaEFfRYc6lPAE8kCfRaBFCkJ3B4h2ODBK5IhiB8dOghUbPKFCQs/MXDkwCes2yOSlIwgQHQyJagA5gLIiNMhQA8iQmSEEETx4iESOfpsM1qoz4QCB470OSKyKZIJB//6HCiJAEGfPkb8LBhwd8JdknDXti2A0k+Su3P9GLmb1+ykFSkyrDjj58QOfABQEGKy2QkhH0UQkiVkFqURAQMaG5krwHGSAX4QDFiwWvGRQUr9CDiAxE+DJH6aEkrSILiSQY4lAdGwhIaHCiAAQBDCJczmQpwHrcmBp+jIs04RAGfsR8kBQSsR5EUpAKUCkblR/l0qHInaPksRHMkbHNckNwVw8AMcEXAhRBE++OGVH06EQUEaFLBByBIR2CBEMaMhB54gCCgQXAMDCGAeeiGp5wdKIi3QQEjxnUcaYSkdUVxuig3gYXKRMNDBAhQMcUUEaFRzgh91EOLAFgAMscH/IE5Q4YcDO+xRggrfFRbbjQU00ABIuCgAm4koCtKaEkbc1pp/ggi3nwBHLCVIErfhCMkPDARxQwcAmIBCEUUAt6ABLQiBBQAtaACQHzAAICWVhpQWHpa7GeFXHwP0BmZICty1FBJ3vfVXYzCeeNcACIAkV0mOlvTICjPoNsYOH7RAjQNEDkIAAgDwUEIeGCjYBGcJTBHAlAqZggMZYqTQQR8AWADTUgv68UCUexQBhh8ENOGHthkAQGyxpPSywxDOmsEAH0V0IMChUojQR7UZLOFERYJssAMEjIIrSgl9yPECBWusa0IOAFRwaAQfXBjAFP90sYQVfmCwQgD56guK/xAHgEAAISPIMAQNhBQJZTEA1FCrIGzcAAADFovCQw4c2KotA0OoIaEgG8NQRDFFeGgHIScUUXHLnfCww5CCMLExEEWI0KsgTgYrRAlC2DCCHQuSAECGaarKIX9EP8KDEGowtzGwU1hw7RK/LkFFBjvk0UcAbRBZBwtLhIBDcY16HRvYm9BICgR98IotIQgMEe/h9V5W7QPYFimID8o0eh9deQWW2KSUxnZXAWXy5abmBXDuNRJ8kWQfeaH3oYBdszUSwB47LJmdIEZYwDC2XmGQRzYAaDFIDCikMAUaIy2VxHnqnWkYbAdMsBuM6yo21wIHnOYabIILcgRw3nuoBP+LJI2/VGqNlLAHAIsv2O4Od/hhgFcpS9eHBzU8UIYcO+wgxNBd8wOnBKCeEeklJNHbjRJ2g4CS0KgBCjDgSrrXmt7opg8WHMAEcgOSkijAQ4xoxsL+sSCEDYFWePMKBaIEgbFZIxve6ZsA+0BAI0gwJPdxk2HM8sAk3JA2OrygBSsoCA1yECkfTJ80ABA/r1zEAUOwwc008IYHvCAH8OhBCfBBFI+URXlfMgKX/OCl1lSPEN9bTQGwN4Exesk2hRgA+PxgIz/4BYgH9CAIFwGOHdDKVn7Qmggq4AUFfEAE/iMCESCQRYeIZiRqSYyJJlUpNn1qUmwxwgDiMrpR9YarUxisy4niorrU4eKIelQiBHJgNUJ0oQAuCIALqiGEd4WjI1x7hJXgVIjuKaQZe+iD03RDghPcYAUivKU2vCgJS1LKb4oJ4i+LMbYqoAEHADBHH4ggFmVGg5lh24Q91reDsOxhHBI45zi8KQ0p5TKcl2AIO9m5hx7wIArw7AQvjsHPfvKTB3moXD41sYpaGPSgroiCCtA00IY69KEQjahEJ0rRilr0ohjFaCAAACH5BAXIAH8ALAYABwBpACIAAAf/gH6Cg4SFhoeIiYqLjI2Oj5CRkpOUlZaXmJmam5ydnp+gkxN9pAiCfQWPRqaOqI8KCqGMEwN+CwdKfq6Oq4+7spq0tgdIuqlJpEcLfgqkfbGCRgMDfazI1X4FB0d9C33cruDKzM4K0sCKo8nLqErEfkcKSN3aAoNGBwW3RgUDAgIDlBToY+SUqSQHCB0xMm9BvXPoEAnzg6CBsSQW/dBqONBeNFYNkhhxRnDgIFfzBEw4QIohvT4CIEY0NFEYKoyCaN1qSaiXn5BGMgoyeSpVSoIUjexEKnMmoYkVja1EIiCekiOH8Ok7MMFdsaF9Th70hwrJASNXe9ZyWkjdN3ap/5p9E2CWVL57R1iykouKqC5ud0f2GcCQZZ98TdlC8nkkySfGjhVTQkLt7SfK6yRr3sy5s+fPoEN/EuazEoKCjrxlvnSaE2lWplE38rYsHqbWm15TREAqCTdTRHELanaAsABnwLdZFkTbT69rybmN46vg2t3Tx0tlU96YVCpx7Hjf1Y1gwAJkSvuGTTrI3QKzso8jGWgEoGzaVZP0+xeQvn2OB3jkB07CyUffLcooABs8BWHTgEXkFTSKIANMEJxsPrV2jXqCIBCZLcjFRBI/63nIEUxIgGOKhs4UQBRhGtWyEk+uGIFVhBqtV+GF97BymhJ9FMMhRdCAuEw0QmVTooYCSxV0hEW9/BikMS9KSFZBrdUoYy1RSqjjBPMUAF97Bzh0ljsqDYlAkc0J4tUgwSmQ1iALVbUiWgGO4qKOVh4n5lnGOLelc3fmSOEE5AywECG8KYrlYfnEOUibw7UYZ12H7TlYoeJFymeMzpECo5aiNQJZqZ5hthyqrLbq6quwxirrrJ0FAgA7"/>

Bila anda tidak mau repot membuat script kode diatas, anda dapat memanfaatkan website encode base64 seperti misalkan http://www.base64-image.de/

Tidak ada komentar: