Как получить base64 картинки в javascript

Base64 - довольно полезная в некоторых ситуациях штука, которая обычно используется когда надо представить бинарные данные в текстовом виде для хранение или переноса. Так, например, если вы хотите сделать одиночный html файл с картинками, вполне можно использовать base64 в src картинки.

Вот как, например, эта картинка (inspect element):

Как получить base64 img картинки в javascript:

function getBase64Image(img) {
    // создаем канвас элемент
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;

    // Копируем изображение на канвас
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);

    // Получаем data-URL отформатированную строку
    // Firefox поддерживает PNG и JPEG. 
    var dataURL = canvas.toDataURL("image/png");

    return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}

function getBase64ImageById(id){
   return getBase64Image(document.getElementById(id));
}