Что такое URL-адрес блоба и почему он используется?
У меня очень большая проблема с URL-адресом блоба.
я искала src видео тега на YouTube, и я обнаружил, что видео src было похоже на:
src="blob:https://crap.crap"
Я открыл URL-адрес блоба, который был в src видео выдало ошибку, и я не могу открыть, но работал с src тег. Как это возможно?
Требования:
- Что такое BLOB-URL?
- Почему это используется?
- Могу ли я создать свой собственный URL-адрес BLOB-объекта на сервере?
- Если у вас есть какие-либо дополнительные детали
6 ответов
URL-адреса BLOB-объектов (ref W3C, официальное имя) или URL-адреса объектов (ref. MDN и имя метода) используются с объектами Blob или File.
src = "blob: https://crap.crap/ " Я открыл URL-адрес блоба, который был в src видео, он выдал ошибку, и я не могу открыть, но работал с тегом src, как это возможно?
URL-адреса BLOB-объектов могут создаваться только внутри браузера. URL.createObjectURL() создаст специальную ссылку на объект Blob или File, который позже может быть освобожден с помощью URL.revokeObjectURL(), Эти URL-адреса могут использоваться только локально в одном экземпляре браузера и в одном сеансе (т. Е. В жизни страницы / документа).
Что такое URL-адрес блоба?
Почему это используется?
Blob URL / Object URL - это псевдопротокол, позволяющий использовать объекты Blob и File в качестве источника URL для таких вещей, как изображения, ссылки для загрузки двоичных данных и т. Д.
Например, вы не можете передать необработанные байтовые данные объекта Image, поскольку он не знает, что с ним делать. Это требует, например, изображения (которые являются двоичными данными) для загрузки через URL-адреса. Это относится ко всему, что требует URL в качестве источника. Вместо того, чтобы загружать двоичные данные, а затем отправлять их обратно через URL, лучше использовать дополнительный локальный шаг, чтобы иметь возможность доступа к данным напрямую, без прохождения через сервер.
Это также лучшая альтернатива Data-URI, которые представляют собой строки, закодированные как Base-64. Проблема с Data-URI состоит в том, что каждый символ занимает два байта в JavaScript. Кроме того, добавляется 33% из-за кодировки Base-64. BLOB-объекты - это чистые двоичные байтовые массивы, которые не несут значительных издержек, как Data-URI, что делает их более быстрыми и меньшими для обработки.
Могу ли я сделать свой собственный URL-адрес BLOB-объекта на сервере?
Нет, URL-адреса BLOB-объектов / URL-адреса объектов могут создаваться только внутри браузера. Вы можете создавать BLOB-объекты и получать объект File с помощью API-интерфейса File Reader, хотя BLOB просто означает Binary Large OBject и хранится в виде байтовых массивов. Клиент может запросить отправку данных в виде ArrayBuffer или в виде BLOB-объекта. Сервер должен отправлять данные в виде чистых двоичных данных. Базы данных часто используют Blob для описания двоичных объектов, и по сути мы говорим в основном о байтовых массивах.
Если у вас есть, то Дополнительные детали
Вы должны инкапсулировать двоичные данные как объект BLOB, а затем использовать URL.createObjectURL() создать для него локальный URL:
var blob = new Blob([arrayBufferWithPNG], {type: "image/png"}),
url = URL.createObjectURL(blob),
img = new Image();
img.onload = function() {
URL.revokeObjectURL(this.src); // clean-up memory
document.body.appendChild(this); // add image to DOM
}
img.src = url; // can now "stream" the bytes
Обратите внимание, что URL может иметь префикс в браузерах webkit, поэтому используйте:
var url = (URL || webkitURL).createObjectURL(...);
Эта функция JavaScript хочет показать разницу между API-файлом Blob- файла и API-интерфейсом данных для загрузки файла JSON в браузере клиента:
/**
* Save a text as file using HTML <a> temporary element and Blob
* @author Loreto Parisi
*/
var saveAsFile = function(fileName,fileContents) {
if(typeof(Blob)!='undefined') { // using Blob
var textFileAsBlob = new Blob([fileContents], { type: 'text/plain' });
var downloadLink = document.createElement("a");
downloadLink.download = fileName;
if (window.webkitURL != null) {
downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);
}
else {
downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
downloadLink.onclick = document.body.removeChild(event.target);
downloadLink.style.display = "none";
document.body.appendChild(downloadLink);
}
downloadLink.click();
} else {
var pp = document.createElement('a');
pp.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(fileContents));
pp.setAttribute('download', fileName);
pp.onclick = document.body.removeChild(event.target);
pp.click();
}
}//saveAsFile
называется как saveAsFile('out.json',jsonString); создаст ByteStream, немедленно распознаваемый браузером, который загрузит сгенерированный файл напрямую, используя FileAPI URL.createObjectURL, в else можно увидеть тот же результат, полученный с помощью href элемент плюс данные API, но это имеет несколько ограничений, которые Blob API не имеет.
/**
* Save a text as file using HTML <a> temporary element and Blob
* @author Loreto Parisi
*/
var saveAsFile = function(fileName, fileContents) {
if (typeof(Blob) != 'undefined') { // using Blob
var textFileAsBlob = new Blob([fileContents], {
type: 'text/plain'
});
var downloadLink = document.createElement("a");
downloadLink.download = fileName;
if (window.webkitURL != null) {
downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);
} else {
downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
downloadLink.onclick = document.body.removeChild(event.target);
downloadLink.style.display = "none";
document.body.appendChild(downloadLink);
}
downloadLink.click();
} else {
var pp = document.createElement('a');
pp.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(fileContents));
pp.setAttribute('download', fileName);
pp.onclick = document.body.removeChild(event.target);
pp.click();
}
} //saveAsFile
var jsonObject = {
"name": "John",
"age": 30,
"car": null
};
saveAsFile('out.json', JSON.stringify(jsonObject, null, 2));Я изменил рабочее решение для обработки как случая... когда видео загружается, так и когда изображение загружается... надеюсь, это поможет некоторым.
продолжительность HTML:
Javascript
var fileEl = document.querySelector("input");
fileEl.onchange = function(e) {
var file = e.target.files[0]; // selected file
if (!file) {
console.log("nothing here");
return;
}
console.log(file);
console.log('file.size-' + file.size);
console.log('file.type-' + file.type);
console.log('file.acutalName-' + file.name);
let start = performance.now();
var mime = file.type, // store mime for later
rd = new FileReader(); // create a FileReader
if (/video/.test(mime)) {
rd.onload = function(e) { // when file has read:
var blob = new Blob([e.target.result], {
type: mime
}), // create a blob of buffer
url = (URL || webkitURL).createObjectURL(blob), // create o-URL of blob
video = document.createElement("video"); // create video element
//console.log(blob);
video.preload = "metadata"; // preload setting
video.addEventListener("loadedmetadata", function() { // when enough data loads
console.log('video.duration-' + video.duration);
console.log('video.videoHeight-' + video.videoHeight);
console.log('video.videoWidth-' + video.videoWidth);
//document.querySelector("div")
// .innerHTML = "Duration: " + video.duration + "s" + " <br>Height: " + video.videoHeight; // show duration
(URL || webkitURL).revokeObjectURL(url); // clean up
console.log(start - performance.now());
// ... continue from here ...
});
video.src = url; // start video load
};
} else if (/image/.test(mime)) {
rd.onload = function(e) {
var blob = new Blob([e.target.result], {type: mime}),
url = URL.createObjectURL(blob),
img = new Image();
img.onload = function() {
console.log('image');
console.dir('this.height-' + this.height);
console.dir('this.width-' + this.width);
URL.revokeObjectURL(this.src); // clean-up memory
console.log(start - performance.now());// add image to DOM
}
img.src = url;
};
}
var chunk = file.slice(0, 1024 * 1024 * 10); // .5MB
rd.readAsArrayBuffer(chunk); // read file object
};
URL-адрес jsFiddle
Что такое URL-адрес блоба? Почему это используется?
BLOB - это просто последовательность байтов. Браузер распознает его как поток байтов. Используется для получения потока байтов из источника.
Объект Blob представляет собой файлоподобный объект неизменяемых необработанных данных. BLOB-объекты представляют данные, которые не обязательно имеют собственный формат JavaScript. Интерфейс File основан на Blob, наследуя функциональность blob и расширяя его для поддержки файлов в системе пользователя.
Могу ли я сделать свой собственный URL-адрес BLOB-объекта на сервере?
Да, вы можете сделать это несколькими способами, например попробуйте http://php.net/manual/en/function.ibase-blob-echo.php
Читать дальше на
Другой вариант использования URL-адресов больших двоичных объектов — загрузка ресурсов с сервера, применение хаков, а затем указание браузеру интерпретировать их.
Одним из таких примеров может быть загрузка файлов шаблонов или даже файлов scss.
Вот пример scss:
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.11.1/sass.sync.min.js"></script>
function loadCSS(text) {
const head = document.getElementsByTagName('head')[0]
const style = document.createElement('link')
const css = new Blob([text], {type: 'text/css'})
style.href = window.URL.createObjectURL(css)
style.type = 'text/css'
style.rel = 'stylesheet'
head.append(style)
}
fetch('/style.scss').then(res => res.text()).then(sass => {
Sass.compile(sass, ({text}) => loadCSS(text))
})
Теперь вы можете поменять местами
Таким образом, URL-адреса BLOB-объектов сохраняют структуру DOM в чистоте.
Я уверен, что у вас уже есть ответы, так что это еще одна вещь, которую вы можете с ним сделать.
URL-адреса больших двоичных объектов используются для отображения файлов, загруженных пользователем, но они служат и для многих других целей, например, их можно использовать для безопасного показа файлов, например, как немного сложно получить видео на YouTube без загрузки расширения. Но они, вероятно, больше ответов. Мои исследования в основном заключаются в том, что я использую Inspect, чтобы попытаться получить видео на YouTube и онлайн-статью.