Получение urldata из изображения в виде BLOB-объекта

Question

Вот что я хочу сделать:

У меня есть блоб изображения, и мне нужно конвертировать его в URL данных изображения.

Так что это моя проблема:

<script> 
 document.body.onpaste = function(e) {
var items = e.clipboardData.items;
for (var i = 0; i < items.length; ++i) {
  if (items[i].kind == 'file' && items[i].type == 'image/png') {
    var blob = items[i].getAsFile();
    var reader = new FileReader();
    document.write(reader.readAsDataURL(blob));
  }
}
 };
</script>

Возвращает неопределенное значение.

Так что мой вопрос

Как мне получить URL-адрес данных из этого файла? Мои знания из javascript ОЧЕНЬ ограничены, и в отношении html5 ничего особо не требуется.

Любая помощь очень ценится.

Answer 1

Сам разобрался, кажется, причина, по которой я получаю неопределенную, в том, что изображение не загружается, когда вы звоните reader.readAsDataURL(blob). Я исправил это с помощью:

reader.onload = function (event) {
  document.write(event.target.result);
};

Answer 2

Вам просто нужно Base64 кодировать данные и отображать их так:

<img src="data:image/png;base64,[encoded data]">

http://en.wikipedia.org/wiki/Data_URI_scheme#HTML