Me di cuenta de que base64 generado desde FileReader ocupa muy poco espacio en la memoria.
<!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>Tomo una instantánea de la memoria y encuentro las tomas de memoria testArr y b64arr de manera diferente, incluso si llamo a splice en la cadena base64 en los resultados de FileReader: toma de tamaño de testArr , toma de tamaño de b64arr
El tamaño retenido de testArr parece normal, pero b64arr ocupa solo 296 bytes (en realidad, 4 imágenes de más de 11 millones) Entonces, ¿por qué sucede esto? ¿Y hay alguna referencia sobre este comportamiento?
