FileReader readAsDataURL创建大型base64图像 [英] FileReader readAsDataURL creating large base64 images
问题描述
我需要将输入图像(blob)转换为base64图像.我知道大小会增加大约1.37.
I have a requirement to convert an input image (blob) to base64 image. Im aware the size will increase by approx 1.37.
但是，我注意到使用firereader.readAsDataUrl时，与macOS上内置的base64命令行工具相比，图像的大小非常大.
However i have noticed when using the firereader.readAsDataUrl the size of the image is extremely large when compared to the built in base64 command line tool you have on macOS.
https://developer.mozilla.org/en -US/docs/Web/API/FileReader/readAsDataURL
复制步骤:
-
下载此免费示例图片 https://wall.alphacoders.com/big.php?i=685897 请确保单击下载"按钮(Downlaod Original 8000x600).不要使用右键单击另存为，因为图像将被压缩
Download this free sample image https://wall.alphacoders.com/big.php?i=685897 make sure to click the Download button (Downlaod Original 8000x600). Do not use right click save as because the image will be compressed
使用jsfiddle选择上面下载的图像，并检查控制台日志中基本64的大小. https://jsfiddle.net/b7nkw8j9/，您可以看到大小为 11.2mb .
Use the jsfiddle to pick the above downloaded image and check the console log for the size of the base 64. https://jsfiddle.net/b7nkw8j9/ you can see the size is 11.2mb.
现在，如果您在Mac上使用base64命令行工具将上面下载的图像转换为base64，并在那里检查文件大小.您将看到这里的base64大小. 5.9mb . base64 -w 0 downloaded_image.jpg > downloaded_image.base64
Now if your on mac use the base64 command line tool to convert the above downloaded image to base64 and check the file size there. You will see the base64 size here is. 5.9mb. base64 -w 0 downloaded_image.jpg > downloaded_image.base64
这是我在代码中使用的将输入文件图像转换为base64的功能.
This is the function i am using in my code to convert an input file image to base64.
async convertToBase64(file) {
if (file === undefined) {
throw new Error("File could not be found");
}
const fileReader = new FileReader();
return new Promise((resolve, reject) => {
fileReader.readAsDataURL(file);
fileReader.onerror = (error) => {
reject("Input: File could not be read:" + error);
};
fileReader.onloadend = () => {
resolve(fileReader.result);
};
});
}
为什么filereader.readAsDataURL会使image64的图像输出极大.
Why does the filereader.readAsDataURL make the image base64 output extremely large.
我该如何提高效率?
推荐答案
对于FileReader，我有5,882,455字节，对于base64输出，我有5,882,433字节，如果您从data:image/png;base64,中添加22字节，我们就不会太远.
I have 5,882,455 bytes for the FileReader vs 5,882,433 bytes for base64 output, if you add the 22 bytes from data:image/png;base64,, we're not too far.
但是问题我该如何提高效率?，只是不要在此处使用数据URL.无论您被告知是否也需要它，这都是一个谎言(我敢肯定，百分之九十九).
However to the question How can i make this more efficient?, just don't use a data URL here. Whatever you've been told you need it too, it was a lie (I'm 99% percent sure).
相反，您应该始终喜欢直接使用Blob.
Instead you should always prefer to work with the Blob directly.
要显示它，请使用Blob URL:
To display it, use a blob URL:
inp.onchange = e => {
img.src = URL.createObjectURL(inp.files[0]);
};
<input type="file" id="inp">
<img id="img" src="" height="200" alt="Image preview..." accept="image/*">
要将其发送到您的服务器，请直接发送Blob ，可以通过FormData或直接从xhr.send()获得，也可以作为获取请求的正文.
To send it to your server, send the Blob directly, either through a FormData or, directly from xhr.send() or as the body of a fetch request.
唯一可以想到的是，您在前端需要二进制文件的数据URL版本的地方是生成一个独立文档，该文档需要嵌入该二进制文件.对于我职业生涯中遇到的所有其他用例，Blob都更适合.
The only case can think of where you would need a data URL version of a binary file on the front end is to generate a standalone document which would need to embed that binary file. For all other use cases I met in my career, Blob where far better suited.
For the message that gets printed in the Chrome's tooltip, that's the size of the USVString that the browser has to hold in memory. It's twice the size of the file you have on disk, because USVStrings are encoded in UTF-16, even though this string holds only ASCII characters.
However, to be sent to your server, or to be saved as a text file, it will generally be reencoded in an 8 bit encoding, and retrieve it's normal size.
因此，请勿将此工具提示当作告诉您数据有多大的手段，它只是在浏览器分配的内存中占用的大小，而在外部，则根本不一样.
So don't take this tooltip as a mean to tell you how big your data is, it's only the size it does take in the browser's allocated memory, but outside, it won't be the same at all.
如果您想检查此处生成的二进制数据的大小，这是一个更好的选择，它将把USVStrings转换为UTF-8并将二进制保持为二进制(例如，如果将ArrayBuffer传递给它):
If you wanna check the size of binary data generated here is a better fiddle, which will convert USVStrings to UTF-8 and keep binary as binary (e.g if you pass an ArrayBuffer to it):
function previewFile() {
var preview = document.querySelector('img');
var file = document.querySelector('input[type=file]').files[0];
var reader = new FileReader();
reader.addEventListener("load", function () {
console.log(new Blob([reader.result]).size);
preview.src = reader.result;
}, false);
if (file) {
reader.readAsDataURL(file);
}
}
<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL -->
<input type="file" onchange="previewFile()"><br>
<img src="" height="200" alt="Image preview...">
这篇关于FileReader readAsDataURL创建大型base64图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
