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