Внутри моего HTML-кода у меня есть следующий тег IMG:
<img src="picture.png" id="picture" />
Я хотел бы создать в образе объект Blob (https://developer.mozilla.org/en-US/docs/Web/API/Blob) (чтобы использовать его в дальнейшем в веб-активности FirefoxOS), имеющий свой uri ("picture.png"). Думаю, мне нужен метод, который работает противоположно URL.createObjectURL:
https://developer.mozilla.org/en-US/docs/Web/API/URL.createObjectURL
Fetch API теперь подходит, как используется в документах:
Using_Fetch#Checking_that_the_fetch_was_successful
https://developer.mozilla.org/en-US/docs/Web/API/Body/blob
Просто:
fetch("picture.png")
.then(res => res.blob())
.then(blob => {
// use blob...
});
Если вам не нужна побайтовая копия изображения (например, если вы не возражаете, что jpg преобразуется в png), вы можете нарисовать изображение на <canvas> и использовать .toBlob(), чтобы получить blob для Это.
Если вам нужны исходные данные в виде большого двоичного объекта или если изображение размещено в другом источнике, вы можете использовать код по адресу https://stackoverflow.com/a/21136980 (для запросов с одинаковым источником просто используйте x.open('GET', 'picture.png');).
