I noticed that base64 generated from FileReader takes vary few memory space.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="file" multiple>
<div id="img-container"></div>
<script>
b64arr = []
function blobToDataURL(blob) {
return new Promise((resolve, reject) => {
let reader = new FileReader();
reader.onload = function () {
resolve(reader.result);
}
reader.onerror = function () {
reject();
}
reader.readAsDataURL(blob);
})
}
function getObjectUrl(blob) {
return URL.createObjectURL(blob)
}
var fileEle = document.querySelector('input[type=file]');
fileEle.onchange = function (e) {
var files = e.target.files;
Array.from(files).forEach(blob => {
blobToDataURL(blob).then(b64 => {
b64arr.push(b64.replace(/^data:image\/\w+;base64,/, ""))
document.getElementById('img-container').innerHTML += `<img src="${b64}" style="height:200px" alt="">`
})
})
};
window.testArr = ['your long base64 string here']
</script>
</body>
</html>
I take a memory snapshot and find testArr and b64arr memory shots differently,even if i call splice on base64 string on FileReader results: size shot of testArr, size shot of b64arr
Retained Size of testArr looks normal, but b64arr takes only 296 bytes(Actually 4 images of 11M+) So why does this happen? And is there any reference about this behavior?
