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

Posted: 5 декабря 2012


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

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

base64 example

Как получить 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));
}

If you find the post helpful you can share it


Ваше мнение:

Имя

;' : 2014-04-14 10:32:31

kk,

hi : 2014-04-14 10:32:55

hmmm hmmm :)

Денис : 2014-10-03 16:44:03

Что-то не выходит 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)); } alert(getBase64ImageById(test)); Ни алерт не срабатывает

Алексей : 2015-01-30 17:08:15

Работает только на страницах с .

Алексей : 2015-01-30 17:09:26

!DOCTYPE html (HTML5)

Имя : 2015-07-31 11:30:47

Спасибо, работает. Но размер должен быть на треть больше оригинального файла, а пулучается больше в разы. Хреново.

ке : 2016-03-19 07:35:33

пр

marran : 2018-11-19 11:12:21

Не мешало бы обьяснить что такое за img в getBase64Image(img). Ссылка юрл на изображение? src? Обьект image? ........
   other with JavaScript
drcreazy © 2008-2012 all rights reserved