Как получить кодированные данные base64 из html-изображения

У меня есть форма регистрации, где пользователи могут выбрать аватар. У них есть 2 возможности:

Выберите аватар по умолчанию
Загрузите свой собственный аватар

На моей странице HTML у меня есть это.

<img id="preview" src="img/default_1.png">

Отображает выбранный аватар. Я использую File Api, чтобы пользователи могли загружать собственное изображение. Это делает src образа HTML чем-то вроде этого.

<img id="preview" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgA... />

Когда они публикуют регистрационную форму. Данные будут отправлены в службу REST. Я могу отправить данные с кодировкой base64, когда пользователь сам загрузил аватар. Но как мне обрабатывать аватар по умолчанию? Это url вместо данных, закодированных base64.

Ответ 1

Вы можете попробовать следующий образец http://jsfiddle.net/xKJB8/3/

<img id="preview" src="http://www.gravatar.com/avatar/0e39d18b89822d1d9871e0d1bc839d06?s=128&d=identicon&r=PG">
<canvas id="myCanvas" />

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("preview");
ctx.drawImage(img, 10, 10);
alert(c.toDataURL());

Ответ 2

Вы также можете использовать класс FileReader:

    var reader = new FileReader();
    reader.onload = function (e) {
        var data = this.result;
    }
    reader.readAsDataURL( file );