I've managed to successfully convert my base64 (DATA_URI) image into a blob, but I'm facing issues with reverting it back.
Here's what my base64 to blob code looks like for better understanding. Check out this link.
b64toBlob(b64Data, contentType, sliceSize) {
contentType = contentType || '';
sliceSize = sliceSize || 512;
var byteCharacters = atob(b64Data);
var byteArrays = [];
for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
var slice = byteCharacters.slice(offset, offset + sliceSize);
var byteNumbers = new Array(slice.length);
for (var i = 0; i < slice.length; i++) {
byteNumbers[i] = slice.charCodeAt(i);
}
var byteArray = new Uint8Array(byteNumbers);
byteArrays.push(byteArray);
}
var blob = new Blob(byteArrays, {type: contentType});
return blob;
}
However, when I try to convert my blob back to base64, I encounter an error:
ERROR TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'.
For the response related to getting my blob image back, check https://i.stack.imgur.com/UlPCW.png.
Despite invoking the success callback, I'm struggling to comprehend the issue at hand.
The following is the code snippet where I attempt to convert blob to base64:
if(window.FileReader) {
var reader = new FileReader();
reader.readAsDataURL(blob);
reader.onloadend = () => {
var base64data = reader.result;
console.log(base64data);
}
}
During debugging, I notice that reader.onloadend appears to be null, preventing me from calling it. Any suggestions?