Зачем использовать `URL.createObjectURL (blob)` вместо `image.src`? - PullRequest
Новая
       29

Зачем использовать `URL.createObjectURL (blob)` вместо `image.src`?

0 голосов
/ 19 апреля 2020

Q1. В контексте асинхронного JavaScript и необходимости «извлекать» данные из клиентской стороны , почему мы не можем просто отредактировать наши элементы изображения по его атрибуту src?

Q2. Почему процесс преобразования BLOB-объектов необходим для go сквозного?

Q3. Какова роль большого двоичного объекта?

Например, получение файла изображения из JSON. (Кстати, я извлек это из веб-страницы MDN, обратите внимание на комментарии) 


  function fetchBlob(product) {
    // construct the URL path to the image file from the product.image property
    let url = 'images/' + product.image;
    // Use fetch to fetch the image, and convert the resulting response to a blob
    // Again, if any errors occur we report them in the console.
    fetch(url).then(function(response) {
        return response.blob();
    }).then(function(blob) {
      // Convert the blob to an object URL — this is basically an temporary internal URL
      // that points to an object stored inside the browser
      let objectURL = URL.createObjectURL(blob);
      // invoke showProduct
      showProduct(objectURL, product);
    });
  }

1 Ответ

0 голосов
/ 19 апреля 2020

Если можете, тогда используйте URL-адрес непосредственно как src вашего <img>.

. Использование URL-адреса blob: полезно только в том случае, если у вас есть Blob, содержащий файл изображения, и вы необходимо отобразить его.

Один из распространенных случаев, когда это происходит, - когда вы позволяете пользователям выбирать файл со своего диска. Средство выбора файлов даст вам доступ к объекту File, который является BLOB-объектом и который вы можете загрузить в память. Однако у вас нет доступа к URI, который указывает на файл на диске, поэтому вы не можете установить src в этом случае.
Здесь вам нужно создать blob: URI, который будет указывать на Файловый объект. Внутренний механизм извлечения в браузере сможет извлекать данные на диске пользователя с этого URL и, таким образом, отображать это изображение: 

document.querySelector('input').onchange = e => {
  const file = e.target.files[0]; // this Object holds a reference to the file on disk
  const url = URL.createObjectURL(file); // this points to the File object we just created
  document.querySelector('img').src = url;
};
<input type="file" accepts="image/*">
<img>

В других случаях вы создали файл изображения из внешнего интерфейса (например, используя холст).

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

...