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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With