Read blob as data url in JavaScript

Question

I'm making a paste image from clipboard function then I need to convert blob data to base64 encoded data url, here's the code:

function handlepaste (event, e) { 
    var items = e.clipboardData.items;
    event.innerHTML = items[0].getAsFile();
    FileReader.readAsDataURL( event.innerHTML );

   if (event.childNodes && event.childNodes.length > 0) {
   $('body').append( event.innerHTML );
   }
    if (e.preventDefault) {
            e.stopPropagation();
            e.preventDefault();
    }
    return false;
}

but the code's not working for me, Chrome console log says:

Uncaught TypeError: Object function FileReader() { [native code] } has no method 'readAsDataURL'

How can I turn [object Blob] to data:image/png;base64,iVBORw...?

http://stackoverflow.com/questions/11850970/javascript-blob-object-to-base64 — Artyom Neustroev, Mar 06 '13 at 09:30

score 3 · Accepted Answer · edited Feb 07 '14 at 22:11

3

I think you haven't instantiated FileReader properly: var file_reader = new FileReader();

And then use file_reader.readAsDataURL(...)

edited Feb 07 '14 at 22:11

Cilan

13,101
3
34
51

answered Mar 06 '13 at 09:29

bgusach

14,527
14
51
68

Read blob as data url in JavaScript

1 Answers1