Что такое base64 и зачем он нужен в WEB?

base64 представляет собой способ кодирования произвольных данных в ASCII символы. Кодирование достаточно простое. Соответственно каждые шесть бит данных на выходе кодируются в один из символов шестидесяти четырех буквенного алфавита. Под понятием «Стандартный алфавит» подразумевается набор символов A-Z, a-z, 0-9, +, / или = . Есть и другие вариации закодированных символов, но в WEB разработке вряд ли встретитесь.

А зачем это все?

Исторически сложилось так, что многие данные при передаче используют текст, но не бинарные коды. А если формат передачи данных текстовый? Да и еще передать нужно бинарный код. Вот тут вот на помощь приходят base64.

Типизированное использование в веб-разработке

1. data: URL схема для изображений
2. Можно получать бинарное представление canvas битмап.
3. Процесс передачи данных в XML.
4. Можно хранить картинки в базе данных.
5. Включение картинок в e-mail.

data: URL, а также base64: URL представляет собой определенную схему, которая позволяет включать элементы в строку.

Формат data: URL имеет следующий:

data:[<MIME-тип>][;charset=<кодировка>][;base64],<data>

Несколько типовых решений на определенных примерах

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAAsTAAALEwEAmpwYAAABNmlDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjarY6xSsNQFEDPi6LiUCsEcXB4kygotupgxqQtRRCs1SHJ1qShSmkSXl7VfoSjWwcXd7/AyVFwUPwC/0Bx6uAQIYODCJ7p3MPlcsGo2HWnYZRhEGvVbjrS9Xw5+8QMUwDQCbPUbrUOAOIkjvjB5ysC4HnTrjsN/sZ8mCoNTIDtbpSFICpA/0KnGsQYMIN+qkHcAaY6addAPAClXu4vQCnI/Q0oKdfzQXwAZs/1fDDmADPIfQUwdXSpAWpJOlJnvVMtq5ZlSbubBJE8HmU6GmRyPw4TlSaqo6MukP8HwGK+2G46cq1qWXvr/DOu58vc3o8QgFh6LFpBOFTn3yqMnd/n4sZ4GQ5vYXpStN0ruNmAheuirVahvAX34y/Axk/96FpPYgAAACBjSFJNAAB6JQAAgIMAAPn/AACA6AAAUggAARVYAAA6lwAAF2/XWh+QAAAAH0lEQVR42mJsvsz6n4EIwMRAJBhVSB2FAAAAAP//AwDPuwJuV7bCkgAAAABJRU5ErkJggg=="/>

Этот код даст нам зеленую картинку 10х10 пикселей.

А в CSS используется следующий код:

div.red_dotted {

    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAAsTAAALEwEAmpwYAAABNmlDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjarY6xSsNQFEDPi6LiUCsEcXB4kygotupgxqQtRRCs1SHJ1qShSmkSXl7VfoSjWwcXd7/AyVFwUPwC/0Bx6uAQIYODCJ7p3MPlcsGo2HWnYZRhEGvVbjrS9Xw5+8QMUwDQCbPUbrUOAOIkjvjB5ysC4HnTrjsN/sZ8mCoNTIDtbpSFICpA/0KnGsQYMIN+qkHcAaY6addAPAClXu4vQCnI/Q0oKdfzQXwAZs/1fDDmADPIfQUwdXSpAWpJOlJnvVMtq5ZlSbubBJE8HmU6GmRyPw4TlSaqo6MukP8HwGK+2G46cq1qWXvr/DOu58vc3o8QgFh6LFpBOFTn3yqMnd/n4sZ4GQ5vYXpStN0ruNmAheuirVahvAX34y/Axk/96FpPYgAAACBjSFJNAAB6JQAAgIMAAPn/AACA6AAAUggAARVYAAA6lwAAF2/XWh+QAAAAH0lEQVR42mJsvsz6n4EIwMRAJBhVSB2FAAAAAP//AwDPuwJuV7bCkgAAAABJRU5ErkJggg==") center center repeat-x;

    width:auto;

    height:10px;

}

Процесс получение данных в бинарном виде из canvas текстового base64 представления смотрится следующим образом:

<canvas id="canvase_element" width="600" height="600"></canvas>

// делаем нахождение canvas

var canvas = document.getElementById('canvase_element');

// получаем контекст данные

var cataloxy = canvas.getContext('2d');

// производим рисование

cataloxy.beginPath();

cataloxy.arc(100, 100, 50, 1.5 * Math.PI, 0.5 * Math.PI, false);

cataloxy.lineWidth = 10;

cataloxy.stroke();

// непосредственно делаем получение самого base64

console.log(canvas.toDataURL());

Категория: Web

Похожие статьи