09.03.2018, 13:52
|
|
Профессор
|
|
Регистрация: 08.06.2015
Сообщений: 206
|
|
|
Как вернуть blob из img.src?
<!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 картинки, мы его теряем (
|
|
09.03.2018, 14:15
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,108
|
|
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>
|
|
09.03.2018, 14:22
|
|
Профессор
|
|
Регистрация: 08.06.2015
Сообщений: 206
|
|
|
рони,
это понятно ))
Но мне нужно, не передать blob, а именно получить его из img.src.
blob -> img.src
img.src -> blob?
img.src формата 'blob:......' -> blob
Последний раз редактировалось Teamur, 09.03.2018 в 14:25.
|
|
09.03.2018, 15:10
|
 |
Профессор
|
|
Регистрация: 25.10.2016
Сообщений: 1,012
|
|
|
Сообщение от Teamur
|
|
img.src формата 'blob:......'
|
я так понимаю, в img.src находится результат URL.createObjectURL ?
тогда просто "скачай" данные по этой ссылке с помощью fetch, верни результат как 'blob' |
|
09.03.2018, 15:15
|
|
Профессор
|
|
Регистрация: 08.06.2015
Сообщений: 206
|
|
|
Alexandroppolus,
да - результат URL.createObjectURL !
Правильно ли я понимаю, что в img.src строка, а не blob?
Просто ссылка на blob, который нужно скачать, по сути?
Попробую ...
|
|
09.03.2018, 15:26
|
|
Профессор
|
|
Регистрация: 08.06.2015
Сообщений: 206
|
|
<!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.
Но я не понимаю как это сделать.
Последний раз редактировалось Teamur, 09.03.2018 в 15:35.
|
|
09.03.2018, 16:32
|
|
Профессор
|
|
Регистрация: 25.10.2016
Сообщений: 1,012
|
|
|
Сообщение от Teamur
|
Правильно ли я понимаю, что в img.src строка, а не blob?
Просто ссылка на blob, который нужно скачать, по сути?
|
да, в src всегда строка
|
Сообщение от Teamur
|
Кстати использовать fetch в данном примере рационально?
Было бы круто все это обернуть в Promise да еще добавить async/await.
Но я не понимаю как это сделать.
|
не надо ничего оборачивать.
fetch и так возвращает промис. Просто используй async/await - это по сути синтаксическая надстройка над промисами. Всё уже есть. |
|
09.03.2018, 16:41
|
|
Профессор
|
|
Регистрация: 08.06.2015
Сообщений: 206
|
|
|
Alexandroppolus,
спасибо за помощь и советы!
|
|
10.08.2018, 12:11
|
|
Профессор
|
|
Регистрация: 08.06.2015
Сообщений: 206
|
|
Продолжаю тему )
В indexedDB хранится BLOB string, взятый из img.src.
Каким образом мне превратить BLOB string в BLOB, если fetch лезет на сервер?
fetch(blobStringfromIndexedDB)
Неужели придется использовать методы canvas для получения BLOB?
Или можно каким-то образом сказать fetch 'Не лезь на сервер' )
Спасибо!
Последний раз редактировалось Teamur, 10.08.2018 в 12:28.
|
|
10.08.2018, 12:27
|
|
Профессор
|
|
Регистрация: 25.10.2016
Сообщений: 1,012
|
|
|
Сообщение от Teamur
|
|
В indexedDB хранится BLOB string
|
что за "BLOB string"?
если это результат URL.createObjectURL, то он бесполезен
или там что-то другое? вообще говоря, в indexedDB можно хранить блобы как есть |
|
|
|
