У меня очень Проблемы с URL-адрес Blob.
Я искал источник
в тег видео на YouTube и я нашел, что видео ГРЦ
было так:
src="blob:https://crap.crap"
Я открыл URL-адрес Blob, который был в ФОК
видео он выдавал ошибку. Я могу'т открыть ссылку, но она работала с тегом ГРЦ
. Как это возможно?
Требования:
URL для больших двоичных объектов (см. консорциума W3C, официальное название) или объектно-адресам (исх. Уведомление и название метода) используются с Клякса или файл Объект.
в src="по-клякса:с https://хрень.хрень" Я открыть URL-адрес Blob, которая была в СРЦ видео он дал ошибку и я могу'т открыть, но работал с КГД и GT; тег, как это возможно?
URL-адреса Blob-объект может быть создан только внутри браузера. URL-адрес.createObjectURL()
создаст специальную ссылку на Blob-объект или объект файл, который впоследствии может быть выпущен с помощью URL-адрес.revokeObjectURL()
. Эти URL-адреса могут быть использованы только локально в одном экземпляре браузера и в той же сессии (т. е. жизни страницу/документ).
что такое блоб URL-адрес? зачем он используется?
URL-адрес Blob-объект/адрес объект является псевдо протокола, чтобы позволить больших двоичных объектов и объектов файл, который будет использоваться как источник для таких вещей, как изображения, ссылки для загрузки двоичных данных и так далее.
Например, вы не можете передать объект изображения необработанных байтов данных, так как он не будет знать что с ней делать. Оно требует, например, образы (которые являются двоичные данные) должны быть загружены через URL. Это относится ко всему, что требует URL-адрес в качестве источника. Вместо того, чтобы загружать двоичные данные, а затем служить его обратно через URL-адрес лучше использовать дополнительный местный шаг, чтобы быть в состоянии получить доступ к данным напрямую без прохождения через сервер.
Это также лучший вариант в данных URI, который несколько строк, закодированных как base-64. Проблема с данными-Ури заключается в том, что каждая буква занимает два байта в JavaScript. На вершине, что на 33% добавляется благодаря кодировке base-64. Капли чисты двоичного байт-массивы, которые не имеют каких-либо значительных накладных расходов, так как данные URI еще, что делает их компактнее и быстрее обрабатывать.
я могу сделать мои собственные клякса URL-адресов на сервере?
Нет, URL-адреса Blob URL-адреса/объекта может быть произведена только внутри браузера. Вы можете сделать кляксы и получить объектный файл с помощью API чтения файла, хотя пятнышка, означает, больших двоичных объектов и хранится в виде байт-массива. Клиент может запросить данные, которые будут отправлены как буфер 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(...);
Что такое блоб URL-адрес? Почему он используется?
Blob-это просто последовательность байтов. Браузер распознает его как поток байтов. Он используется, чтобы получить поток байтов из источника.
объект-блоб представляет собой файл-как объект неизменяемым, необработанные данные. Капли представляют данные, что это'т обязательно в один JavaScript-родной формат. Файл интерфейс основан на Blob-объект, наследующий функциональность Blob и расширить его для поддержки файлов на пользователя's система.
Я могу сделать мой собственный URL-адрес Blob на сервере?
Да, вы можете есть несколько способов сделать это например попробовать http://php.net/manual/en/function.ibase-blob-echo.php
Подробнее о
Эта функция JavaScript направлено на то, чтобы показать разницу между блоб файл API и данных 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') { // Alternative 1: 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 { // Alternative 2: using Data
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
/* Example */
var jsonObject = {"name": "John", "age": 30, "car": null};
saveAsFile('out.json', JSON.stringify(jsonObject, null, 2));
в
Функция вызывается как saveAsFile('из.в JSON', jsonString);
. Это позволит создать байтового потока сразу распознается браузером, который будет загрузить сформированный файл непосредственно с помощью API файл URL-адрес.createObjectURL
.
В "еще", можно увидеть тот же результат получен через элемент Солар
плюс API данных, но имеет ряд ограничений, что блоб API не.
Я изменил рабочий раствор для обработки как дела.. когда видео загружается и когда картинка загрузится .. надеюсь, это поможет некоторым.
HTML-код в <тип входного=на"файл" ИД="и fileInput" и> <див> продолжительность: <Спан ИД='СП'></службы><див>
В 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
};
jsFiddle URL-адрес