Форум

Teamur · #1 (**permalink**) 09.03.2018, 13:52

<!doctype html><meta charset='utf-8'><title>BLOB</title>
<div id='BOX'></div>
<input id='FI' type='file' multiple>

<style>
	#BOX{display:flex;flex-wrap:wrap}
	img{width:300px;padding:10px}
</style>

<script>

	function getBlobFromSrc(e){
	  let img=e.target, strBlob=e.target.src;
	  console.log(strBlob);		// Что нужно сделать, чтобы снова отобразить blob а не строку
	};

	function Store(blob){ console.log(blob);
	  let img=new Image;
	  img.src=URL.createObjectURL(blob);
	  img.addEventListener('click',getBlobFromSrc);
	  BOX.append(img);
	};

	FI.onchange=e=>{
	  let i, n=e.target.files, r;
	  for(i of n){
	    r=new FileReader;
	    r.readAsDataURL(i);
	    r.onload=e=>fetch(e.target.result)
	     .then(i=>i.blob())
	     .then(i=>Store(i))
	  }
	};

</script>

Загрузите несколько картинок, откройте консоль и пройдитесь кликом по каждой из них.
Что делать не знаю. Неужели придется городить new Blob(...)?
Такое ощущение, что после вставки blob в src картинки, мы его теряем (

рони · #2 (**permalink**) 09.03.2018, 14:15

Teamur,

<!doctype html><meta charset='utf-8'><title>BLOB</title>
<div id='BOX'></div>
<input id='FI' type='file' multiple>

<style>
  #BOX{display:flex;flex-wrap:wrap}
  img{width:300px;padding:10px}
</style>

<script>
   "use strict"
  function getBlobFromSrc(blob){
   return function(e) {
    let img=e.target, strBlob=e.target.src;
    console.log(strBlob);
    console.log(blob);
    }

    		// Что нужно сделать, чтобы снова отобразить blob а не строку
  };

  function Store(blob){ console.log(blob);
    let img=new Image;
    img.src=URL.createObjectURL(blob);
    img.addEventListener('click',getBlobFromSrc(blob));
    BOX.append(img);
  };

  FI.onchange=e=>{
    let i, n=e.target.files, r;
    for(i of n){
      r=new FileReader;
      r.readAsDataURL(i);
      r.onload=e=>fetch(e.target.result)
       .then(i=>i.blob())
       .then(i=>Store(i))
    }
  };

</script>

Teamur · #3 (**permalink**) 09.03.2018, 14:22

рони,
это понятно ))

Но мне нужно, не передать blob, а именно получить его из img.src.

blob -> img.src
img.src -> blob?

img.src формата 'blob:......' -> blob

Alexandroppolus · #4 (**permalink**) 09.03.2018, 15:10

Сообщение от Teamur

img.src формата 'blob:......'

я так понимаю, в img.src находится результат URL.createObjectURL ?
тогда просто "скачай" данные по этой ссылке с помощью fetch, верни результат как 'blob'

Teamur · #5 (**permalink**) 09.03.2018, 15:15

Alexandroppolus,
да - результат URL.createObjectURL !

Правильно ли я понимаю, что в img.src строка, а не blob?
Просто ссылка на blob, который нужно скачать, по сути?

Попробую ...

Teamur · #6 (**permalink**) 09.03.2018, 15:26

<!doctype html><meta charset='utf-8'><title>BLOB</title>
<div id='BOX'></div>
<input id='FI' type='file' multiple>

<style>
  #BOX{display:flex;flex-wrap:wrap}
  img{width:300px;padding:10px}
</style>

<script>

	function getBlobFromSrc(e){
	  let img=e.target, strBlob=e.target.src;
	  console.log(strBlob);
	  fetch(strBlob)
	    .then(i=>i.blob())
	    .then(i=>console.log(i)) // -> blob
	};

	function Store(blob){ console.log(blob);
	  let img=new Image;
	  img.src=URL.createObjectURL(blob);
	  img.addEventListener('click',getBlobFromSrc);
	  BOX.append(img);
	};

	FI.onchange=e=>{
	  let i, n=e.target.files, r;
	  for(i of n){
	    r=new FileReader;
	    r.readAsDataURL(i);
	    r.onload=e=>fetch(e.target.result)
	      .then(i=>i.blob())
	      .then(i=>Store(i))
	  }
	};

</script>

Так работает!

Кстати использовать fetch в данном примере рационально?

Было бы круто все это обернуть в Promise да еще добавить async/await.
Но я не понимаю как это сделать.

Alexandroppolus · #7 (**permalink**) 09.03.2018, 16:32

Сообщение от Teamur

Правильно ли я понимаю, что в img.src строка, а не blob?
Просто ссылка на blob, который нужно скачать, по сути?

да, в src всегда строка

Сообщение от Teamur

Кстати использовать fetch в данном примере рационально?

Было бы круто все это обернуть в Promise да еще добавить async/await.
Но я не понимаю как это сделать.

не надо ничего оборачивать.
fetch и так возвращает промис. Просто используй async/await - это по сути синтаксическая надстройка над промисами. Всё уже есть.

Teamur · #8 (**permalink**) 09.03.2018, 16:41

Alexandroppolus,
спасибо за помощь и советы!

Teamur · #9 (**permalink**) 10.08.2018, 12:11

Продолжаю тему )
В indexedDB хранится BLOB string, взятый из img.src.
Каким образом мне превратить BLOB string в BLOB, если fetch лезет на сервер?

fetch(blobStringfromIndexedDB)

Неужели придется использовать методы canvas для получения BLOB?
Или можно каким-то образом сказать fetch 'Не лезь на сервер' )
Спасибо!

Alexandroppolus · #10 (**permalink**) 10.08.2018, 12:27

Сообщение от Teamur

В indexedDB хранится BLOB string

что за "BLOB string"?
если это результат URL.createObjectURL, то он бесполезен

или там что-то другое? вообще говоря, в indexedDB можно хранить блобы как есть

Форум

Справочник

Discord чат

Курсы javascript