Search code examples
javascriptjqueryhtmlclipboarddata-uri

Read blob as data url in JavaScript

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...?

Solution

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

    And then use file_reader.readAsDataURL(...)