<!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.
Но я не понимаю как это сделать.