文章/答案/技术大牛

发布

社区首页 >问答首页 >FileReader readAsDataURL创建大型base64图像

问FileReader readAsDataURL创建大型base64图像
EN

Stack Overflow用户

提问于 2019-07-04 15:01:04

回答 1查看 6.3K关注 0票数 1

我需要将输入图像(blob)转换为base64图像。我知道这个尺寸会增加大约1.37。

但是，我注意到在使用firereader.readAsDataUrl时，与在macOS上使用的内置base64命令行工具相比，图像的大小非常大。

https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL

复制步骤：

下载这个免费的示例图像https://wall.alphacoders.com/big.php?i=685897，确保点击下载按钮(Downlaod原始8000x600)。不要使用右键保存，因为图像将被压缩。
使用jsfiddle来选择上面下载的映像，并检查控制台日志中基本64的大小。https://jsfiddle.net/b7nkw8j9/您可以看到大小是11.2mb。
现在，如果您的on使用base64命令行工具将上面下载的映像转换为base64并检查文件大小。您将看到base64的大小在这里。5.9mb.base64 -w 0 downloaded_image.jpg > downloaded_image.base64

这是我在代码中使用的函数，用于将输入文件映像转换为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使图像base64输出非常大。

我怎样才能让这个更有效率？

base64

filereader

javascript

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-07-04 15:19:28

我有5,882,455字节用于FileReader，5,882,433字节用于base64输出，如果将来自data:image/png;base64,的22字节相加，我们就不会太远了。

然而，对于这个问题，我如何使它更有效？，只是不要在这里使用一个数据URL。无论你被告知你也需要它，它是一个谎言(我百分之九十九肯定)。

相反，您应该总是更喜欢直接使用Blob。

要显示它，请使用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/*">

要将其发送到您的服务器，直接送布洛布可以通过FormData，也可以直接从xhr.send()或者作为获取请求的主体发送。

唯一能想到在前端需要二进制文件的数据URL版本的情况是生成一个独立的文档，该文档需要嵌入该二进制文件。在我职业生涯中遇到的所有其他用例中，布洛布( Blob )更适合我。

对于在Chrome工具提示中打印的消息，这是浏览器必须保存在内存中的USVString的大小。它是磁盘上文件大小的两倍，因为USVStrings是用UTF-16编码的，尽管这个字符串只包含ASCII字符。

但是，要将其发送到您的服务器，或者保存为文本文件，通常会以8位编码重新编码，并检索其正常大小。

所以，不要把这个工具提示作为告诉您的数据有多大的手段，它只是浏览器分配的内存中的大小，但在外部，它将完全不同。

如果您想检查这里生成的二进制数据的大小，这是一个更好的方法，它可以将USVStrings转换为UTF-8，并将二进制数据保持为二进制数据(例如，如果您将一个ArrayBuffer传递给它)：

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...">

票数 5

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/56890549

复制

相似问题

问FileReader readAsDataURL创建大型base64图像
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问FileReader readAsDataURL创建大型base64图像EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问FileReader readAsDataURL创建大型base64图像
EN