Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Converting Blob/File data to ImageData in javascript?

Tags:

I am using file input element to capture an image from android browser. Now I would like to convert the blob data into ImageData so that I can render it on a canvas using putImageData.

<!DOCTYPE html>
<html>

<body>
    <input type="file" id="file" />
</body>

<script>
    function handleFileSelect(evt) {

        var files = evt.target.files; // FileList object

        var selFile = files[0];
        var reader = new FileReader();
        reader.onload = function(e) {
        var blobData = e.target.result;    
            console.log(e.target.result);
        };

        reader.onerror = function(e) {
            console.log(e);
        };
        reader.readAsArrayBuffer(selFile);
    }


    document.getElementById('file').addEventListener('change',handleFileSelect, false);
</script>

</html>

In the above code, How can I convert blobData to ImageData? Thanks In advance.