Clipboard Image to Data URI

by dswitzer

HTML

<div contenteditable></div>

CSS

div {
    height: 200px;
    border: solid;
}

JavaScript

$('div[contenteditable]').bind('paste', function(e) {
    var data = e.originalEvent.clipboardData.items[0].getAsFile();
    
    var fr = new FileReader;
    
    fr.onloadend = function() {
        alert(fr.result.substring(0, 100)); // fr.result is all data
    };
    
    fr.readAsDataURL(data);
});