Как вернуть 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 картинки, мы его теряем ( |
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>
|
рони,
это понятно )) Но мне нужно, не передать blob, а именно получить его из img.src. blob -> img.src img.src -> blob? img.src формата 'blob:......' -> blob |
Цитата:
тогда просто "скачай" данные по этой ссылке с помощью fetch, верни результат как 'blob' |
Alexandroppolus,
да - результат URL.createObjectURL ! Правильно ли я понимаю, что в img.src строка, а не blob? Просто ссылка на blob, который нужно скачать, по сути? Попробую ... |
<!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. Но я не понимаю как это сделать. |
Цитата:
Цитата:
fetch и так возвращает промис. Просто используй async/await - это по сути синтаксическая надстройка над промисами. Всё уже есть. |
Alexandroppolus,
спасибо за помощь и советы! |
Продолжаю тему )
В indexedDB хранится BLOB string, взятый из img.src. Каким образом мне превратить BLOB string в BLOB, если fetch лезет на сервер? fetch(blobStringfromIndexedDB) Неужели придется использовать методы canvas для получения BLOB? Или можно каким-то образом сказать fetch 'Не лезь на сервер' ) Спасибо! |
Цитата:
если это результат URL.createObjectURL, то он бесполезен или там что-то другое? вообще говоря, в indexedDB можно хранить блобы как есть |
Alexandroppolus,
В этой теме речь шла о том, что на странице есть кнопочка с <input type='file'>. Картинку отображаем на странице. Затем я взял src из картинки и сохранил ее в indexedDB |
Я с инпута получил файл, обработал его через URL.createObjectURL и сохранил в IDB
|
Наверное придется в IDB сделать хранилище 'TEMP', куда будут сохранятся объекты типа FILE, получаемых с инпута и тогда проблем с преобразованиями после перезагрузки страницы не будет!
Но все же |
Цитата:
|
Alexandroppolus,
Но до перезагрузки страницы, я нажимаю кнопочку SAVE, которая сохраняет то что дает URL.createObjectURL |
Alexandroppolus,
А вот оно что, понятно. Как тогда люди сохраняют загруженное через input? |
Teamur,
можно просто сохранять блоб как есть, без превращения в строку https://developer.mozilla.org/en-US/...sing_IndexedDB - раскури эту статью |
Alexandroppolus,
спасибо почитаю, но я ведь превращал в строку, чтобы можно было сначала посмотреть, что сохраняешь, ведь в проводнике устройства надо еще включить отображение эскизов. А тут например, кликнул по инпуту, в списке по названию выбрал картинку, посмотрел на нее в браузере и уже потом загромождать IndexedDB |
Alexandroppolus,
вот вы использовали ли бы хранилище TEMP в IDB или сохраняли бы сразу в хранилище IMAGES ? |
Цитата:
если хочешь глянуть что за картинка в блобе, то без URL.createObjectURL не обойтись. Получится ссылка, которую можно сиюминутно показать через <img> или стиль background, но не сложить на постоянное хранение |
Цитата:
по ссылке есть здоровенный пример, там функция addPublication сохраняет 4 значение, одно из которых блоб |
Alexandroppolus,
СПАСИБО за ответы, как хорошо, что есть форумы. Всего доброго! |
| Часовой пояс GMT +3, время: 21:38. |