Im trying to convert an image file to Int8Array. I have something like this:
public onFileChange(event) {
const reader = new FileReader();
reader.onload = () => {
this.productImage = new Int8Array(reader.result);
};
reader.readAsArrayBuffer(event.target.files[0]);
}
Where event is the uploaded image file. So how to put it in:
productImage: Int8Array;
I would use some help, thanks.
You can use Dataview and iterate over it using an iterable
/**** Make Iterable ****/
//@arrayBuffer is the file arrayBuffer
var MakeMeIterable = function(arrayBuffer) {
this.dataview = new DataView(arrayBuffer, 0);
this.size = arrayBuffer.byteLength;
this.index = 0;
}
// 1. Iterating construct like ... , for..of loop initially calls this
MakeMeIterable.prototype[Symbol.iterator] = function() {
// 2. Afterwards iterating construct utilises this object only for getting further values
return {
dataview: this.dataview,
size: this.size,
index: this.index,
current: this.from,
last: this.to,
// 3. next() is called on each iteration by the other iterating constructs like ... , for..of loop
next() {
// 4. it should return the value as an object {done:.., value :...}
if (this.index < this.size) {
var result = this.dataview.getInt8(this.index);
this.index += 1;
return {
done: false,
value: result
};
} else {
return {
done: true
};
}
}
};
};
/**********************/<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="input" type="file"></input>
<script>
function readFile(f) {
var reader = new FileReader();
reader.onload = function() {
var cursor = new MakeMeIterable(reader.result);
this.productImage = cursor; //cursor <--iterable!
/*
//uncomment to have some fun in console
for (let num of cursor) {
console.log(num);
}
*/
};
reader.onerror = function(e) {
alert('Some error!');
console.log("Error:", e);
};
reader.readAsArrayBuffer(f);
}
$(function() {
$('#input').on("change", function(e) {
var file = e.currentTarget.files[0];
readFile(file);
});
});
</script>