本机 JS 二进制渲染

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()是不公平的，那就是"horribly inefficient"。毕竟，如果它在标准规范中，它就可以达到自己的目的。

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

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

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

Answer 2

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

img.src = URL.createObjectURL(file);

本机 JS 二进制渲染

Native JS Binary Render

javascript

image

filereader

google-chrome-extension