Perkenalan
Base64 adalah metode representasi yang mewakili data biner berdasarkan 64 karakter yang dapat dicetak. Karena 2 sama dengan 64 dengan kekuatan 6, setiap 6 bit adalah unit, sesuai dengan karakter yang dapat dicetak. Tiga byte memiliki 24 bit, sesuai dengan 4 unit base64, yaitu, 3 byte perlu diwakili oleh 4 karakter yang dapat dicetak. Ini dapat digunakan sebagai pengkodean transmisi email. Karakter yang dapat dicetak di Base64 termasuk huruf AZ, AZ, dan angka 0-9, jadi ada 62 karakter secara total. Dua simbol lain yang dapat dicetak bervariasi dalam sistem yang berbeda, umumnya + dan /.
Prinsip Konversi
Sumber data langsung base64 adalah urutan biner. Tentu saja, Anda juga dapat mengonversi gambar, teks, dan audio dan video menjadi urutan biner dan kemudian mengubahnya menjadi pengkodean Base64. Apa yang sedang kita diskusikan di sini adalah cara mengonversi Binary ke Base64 encoding, dan nantikan cara mengonversi gambar, teks, dan audio dan video ke urutan biner.
Sebelum mengonversi, tentukan tabel indeks, yang menentukan cara mengonversi:
Saat mengkonversi, kami pertama -tama mengelompokkan urutan biner, dan masing -masing 6 bit adalah grup. Namun, jika jumlah byte yang dikodekan tidak dapat dibagi dengan 3, maka akan ada 1 atau dua byte pada akhirnya. Anda dapat menggunakan metode berikut untuk memprosesnya: Pertama gunakan nilai 0-byte untuk menebus di akhir sehingga dapat dibagi dengan 3, dan kemudian pengkodean base64. Tambahkan satu atau dua '=' Angka ke teks base64 yang dikodekan untuk mewakili jumlah byte yang akan diisi. Dengan kata lain, ketika ada oktet yang tersisa di blok basis basa 6-bit terakhir, ada empat bit nilai 0, dan dua tanda yang sama dilampirkan di ujungnya; Jika ada dua oktet yang tersisa di blok byte dasar 6-bit terakhir, ada dua bit bernilai 0, dan tanda yang sama dilampirkan di akhir. Lihat tabel berikut:
JavaScript mengimplementasikan base64
Setelah prinsip dipahami, akan mudah diimplementasikan.
define (function (membutuhkan, ekspor, modul) {var code = "abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz0123456789+/". split (""); // indeks tabel/** ** ** @aUxi/". Base64 Encoding * @param {String} * @Return {String} */ function bintobase64 (bitstring) {var result = ""; - ekor); kode [ParseInt (BitstringTemp2, 2)]; base64tobin (str) {var bitstring = ""; {tail ++;}} return bitstring.substr (0, bitstring.length - tail * 2); str.length; i ++) {var charcode = str.charcodeat (i) .toString (2); Bintostr (bin) {var result = ""; exports.decodebase64 = function (str) {return bintostr (base64tobin (str));Base64 Pengkodean Data Gambar
Untuk mengonversi data gambar ke Base64, Anda harus terlebih dahulu mendapatkan data biner gambar. Data biner gambar dapat diperoleh melalui antarmuka Canvas. Implementasi spesifiknya adalah:
fungsi getCanvas (w, h) {var c = document.createElement ('canvas'); c.width = w; c.height = h; return c;} function getPixels (img) {var c = getCanvas (img.width, img.height); var ctx = c.getContext ('2d'); ctx.drawimage (img, 0, 0); kembalikan ctx.getImagedata (0, 0, c.width, c.height);}Setelah mendapatkan data biner gambar, langkah selanjutnya adalah menyandikannya. Karena gambar tidak hanya berisi informasi piksel, tetapi juga informasi panjang dan lebar. Oleh karena itu, saat mengkode informasi piksel, informasi lebar dan tinggi juga harus dikodekan sesuai dengan perjanjian tertentu. Saya menanganinya seperti ini:
Konversi data numerik piksel dari gambar menjadi urutan biner; Gabungkan informasi lebar dan tinggi ke dalam $$width,height$$ untuk mengubahnya menjadi urutan biner; Gabungkan urutan biner dari informasi piksel gambar dan urutan biner dari lebar dan tinggi gambar, dan kemudian encode base64
Implementasi spesifiknya adalah:
fungsi img2base64 (img) {var imgdata = getPixels (img) .data; var imgwidth = getpixels (img) .width; var imgheight = getpixels (img) .height; var bin = ""; untuk (var i = 0; i <imgdata.length; i ++) {bin+= base.numtoString (imgdata [i]); } bin = bin + base.stringtobin ("$$" + imgwidth + "," + imgheight + "$$"); return base.bintobase64 (bin);}Mendekode data base64 gambar
Decoding adalah proses pengkodean terbalik. Prosesnya kira -kira:
Decode Informasi Base64 dari gambar untuk mendapatkan urutan biner yang berisi informasi piksel dari gambar dan informasi lebar dan tinggi; kemudian decode urutan biner menjadi string untuk mendapatkan informasi tinggi dan lebar; Hapus informasi tinggi dan lebar dalam urutan biner untuk mendapatkan informasi piksel; menghasilkan matriks piksel berdasarkan informasi piksel; Buat objek gambar Imagedata berdasarkan matriks piksel, lebar dan tinggi; Gunakan putimagedata untuk menggambar gambar.
Implementasi kode spesifik adalah:
function cat (imgdata) {var canvas = document.geteLementById ("myCanvas"); var ctx = canvas.getContext ("2d"); ctx.fillrect (0, 0, imgdata.width, imgdata.height); ctx.putimagedata (imgdata, 0, 0); } function base642img (data) {var str = base.bintostr (base.base64tobin (data)); var imgwidth = str.match (// $/$ (/d+), (/d+)/$/$$/, "") [1]; var imgheight = str.match (// $/$ (/d +), (/d +)/$/$$/, "") [2] var imgdata = base.base64tobin (data) .replace (base.stringtobin ("$$" + iMgwidth + "," + iMGHEIGHT +IGHTOBIN ("$$"); var ImagedataArray = uint8clampedArray baru (imgwidth * imgheight * 4); untuk (var i = 0; i <imagedataArray.length; i ++) {imagedataArray [i] = parseInt (imgdata.substr (i * 8, 8), 2); } return New Imagedata (ImagedataArray, imgwidth, imgheight); }