Сохранение изображений в localStorage с использованием fetch () и blob ()

Question

К сожалению, нет никаких рабочих примеров кода, упомянутого в заголовке.
Все найденное вокруг было либо старомодным, как canvas, либо слишком длинным.

fetch('https://www.stevensegallery.com/320/240')
  .then(pic => pic.blob())
  .then(pic => localStorage['pic'] = pic);

Есть ли какой-нибудькраткий однострочный, чтобы сделать это без написания отдельной функции?

Answer 1

Наконец сделал это не слишком тяжелым.Также пришлось JSON.parse это до ввода в фактический источник.

fetch('https://source.unsplash.com/300x170/?girl')
  .then(pic => pic.blob())
  .then(pic => {
    const fr = new FileReader();
    fr.onload = () => { 
      const dataURL = fr.result;
      document.getElementById('pic').src = dataURL;
      localStorage['pic'] = JSON.stringify(dataURL);
    }
  fr.readAsDataURL(pic);
});

<img id='pic' />

Answer 2

Вы можете реализовать function, который сделает это за вас:

function storeImage(key, url) {
  fetch(url)
    .then(pic => pic.blob())
    .then(pic => {
      const fr = new FileReader();
      fr.readAsDataURL(pic);
    })
    .then(pic => localStorage[key] = pic);
}

, а затем назвать его так:

storeImage('pic', 'https://www.stevensegallery.com/320/240');