原生 JS 二进制渲染答案

【问题标题】：Native JS Binary Render原生 JS 二进制渲染
【发布时间】：2018-11-28 02:43:50
【问题描述】：

所以我需要找到一种方法来导入文件并将其显示在用户的屏幕上。我不能使用 PHP，因为它是用于 chrome 扩展的。我正在使用fileReader() API，并使用它来读取二进制文件。有没有办法直接从用户那里渲染图像？

【问题讨论】：

标签： javascript image google-chrome-extension filereader

【解决方案1】：

跳过 FileReader 部分。获取您正在阅读的文件或 Blob 并为其创建一个对象 URL。

img.src = URL.createObjectURL(file);

【讨论】：

我需要从用户的电脑上获取。
@bluninja1234 是的，您仍然可以这样做。此创建的 URL 不是服务器端 URL，而是引用本地文件数据的 blob: URL。在此处使用与使用 FileReader 时相同的文件对象。
那么在这种情况下file 是什么？
@bluninja1234 文件实例。 developer.mozilla.org/en-US/docs/Web/API/File 如果你想展示你使用 FileReader 的代码，我可以给你一个上下文示例。同样，无论您传递给 FileReader 的任何文件引用，您都可以在此处使用该引用。
@bluninja1234 请注意，如果您的扩展程序占用大量内存，则需要manually release its memory。

【解决方案2】：

您可以将FileReader.readAsDataURL() 用于图像。

只需阅读文档。

自己试试吧：

const input = document.getElementById('input');
const img = document.getElementById('img');

const reader = new FileReader();

reader.addEventListener('load', showImage);
input.addEventListener('change', readImage);

function readImage(){
  if (!this.files) return;
  reader.readAsDataURL(this.files[0]);
}

function showImage(){
  img.src = this.result;
}

<input id="input" type="file" onchange="showImage()">
<img id="img">

阅读更多关于FileReader API的信息。

编辑 - 供未来读者使用

仅凭一个论点来判断FileReader.readAsDataURL() 是不公平的，它“效率极低”。毕竟，如果它在标准规范中，它就有自己的用途。

虽然在这种情况下FileReader.readAsDataURL() 的效率确实低于URL.createObjectURL()，但还是有区别的：

.readAsDataURL 是异步的，.createObjectURL() 不是。
.readAsDataURL 可以自动进行垃圾回收，.createObjectURL cannot。

当然，这些差异可能微不足道，具体取决于您的应用的实现和应用。

【讨论】：

这是非常低效的。它需要读取整个对象、base64 编码，并将其推入 DOM。
".readAsDataURL 是异步的，.createObjectURL() 不是。" 它不必是异步的，因为它会立即向您返回一个 blob URL。没有真正的工作完成！在您的情况下，您正在读取和编码整个资源！这是一个巨大的开销，所以函数需要是异步的。你在提出一个多么荒谬的论点。 ".readAsDataURL 可以自动被垃圾回收" 你仍然需要从 DOM 中删除它并清理所有引用！