Question

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

Answer 1

您可以将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进行垃圾收集。

但是，当然，这些差异可能很小，具体取决于应用程序的实现和应用程序。

Answer 2

跳过FileReader部分。以您正在读取的文件或Blob为其创建对象URL。

img.src = URL.createObjectURL(file);

原生JS二进制渲染

2 个答案: