Native JS Binary Render

Question

Так что мне нужно сделать способ импортировать файл и показать его на экране пользователя.Я не могу использовать PHP, так как это для расширения Chrome.Я использую fileReader() API и использую его для чтения двоичного файла.Есть ли способ визуализации изображения непосредственно от пользователя?

Answer 1

Пропустить часть FileReader.Возьмите файл или BLOB-объект, который вы читаете, и создайте для него URL-адрес объекта.

img.src = URL.createObjectURL(file);

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

EDIT - для будущих читателей

Несправедливо судить FileReader.readAsDataURL() только по одному аргументу, что он "ужасно неэффективен".В конце концов, если он входит в стандартную спецификацию, он служит своей цели.

Хотя FileReader.readAsDataURL() действительно менее эффективен, чем URL.createObjectURL(), в этом случае есть разница:

1. .readAsDataURL - асинхронный, .createObjectURL() - нет.
2. .readAsDataURL может автоматически собирать мусор, .createObjectURL не может .

Но, конечно, эти различия могут быть тривиальными, в зависимости от реализации и приложения вашего приложения.