Що таке URL-адреса краплі та чому він використовується?

У мене дуже багато проблем з URL-адресою краплі.

Я шукав srcвідеотег на YouTube і виявив, що це відео srcвиглядає так:

src="blob:https://crap.crap"

Я відкрив URL-адресу краплі, яка була у srcвідео, і вона дала помилку. Я не можу відкрити посилання, але воно працювало з srcтегом. Як це можливо?

Вимоги:

• Що таке URL-адреса blob?
• Для чого він використовується?
• Чи можу я зробити власну URL-адресу блобу на сервері?
• Якщо у вас є якісь додаткові деталі

URL-адреси Blob (ref W3C , офіційна назва) або URL-адреси об'єктів (посилання MDN та назва методу) використовуються для об'єкта Blob або File .

src = "blob: https: //crap.crap " Я відкрив URL-адресу блобу, яка була у src відео, вона дала помилку, і я не можу відкрити, але працюю з тегом src, як це можливо?

URL-адреси Blob можна генерувати лише внутрішньо браузером. URL.createObjectURL()створить спеціальне посилання на об'єкт Blob або File, який згодом можна буде випустити за допомогою URL.revokeObjectURL(). Ці URL-адреси можуть використовуватися лише локально в одному екземплярі браузера та в одному сеансі (тобто термін служби сторінки / документа).

Що таке URL-адреса blob?
Для чого він використовується?

URL-адреса Blob / URL-об’єкт - це псевдопротокол, що дозволяє об'єктам Blob і File використовуватись як джерело URL-адреси для таких речей, як зображення, посилання для завантаження двійкових даних тощо.

Наприклад, ви не можете передавати необмеженим байтовим даним об'єкта Image, оскільки він би не знав, що з ним робити. Для цього потрібно, наприклад, завантажувати зображення (які є двійковими даними) через URL-адреси. Це стосується всього, що потребує URL-адреси як джерела. Замість того, щоб завантажувати двійкові дані, потім повертати їх за допомогою URL-адреси, краще скористатися додатковим місцевим кроком, щоб мати доступ до даних безпосередньо, не переходячи через сервер.

Це також краща альтернатива Data-URI - це рядки, кодовані як Base-64 . Проблема з Data-URI полягає в тому, що кожен char займає два байти в JavaScript. Крім того, 33% додається завдяки кодуванню Base-64. Краплі - це чисті бінарні масиви байтів, які не мають значних накладних витрат, як це робить Data-URI, що робить їх швидшими та меншими для обробки.

Чи можу я зробити власний URL-адресу блобу на сервері?

Ні, URL-адреси Blob / URL-адреси об'єктів можна вносити лише в браузері. Ви можете зробити Blobs і отримати об'єкт File через API 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може бути префіксом у веб-браузерах, тому використовуйте:

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') { // 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('out.json', jsonString);. Це створить ByteStream негайно розпізнаний браузером, який завантажить згенерований файл безпосередньо за допомогою API файлу URL.createObjectURL.

У програмі elseможна побачити той самий результат, отриманий за допомогою hrefелемента плюс API даних, але це має кілька обмежень, яких API API Blob не має.

Що таке URL-адреса blob? Для чого він використовується?

BLOB - це лише послідовність байтів. Браузер розпізнає його як байтовий потік. Він використовується для отримання потоку байтів від джерела.

Об'єкт Blob являє собою файлоподібний об'єкт незмінних, необроблених даних. Краплі представляють дані, які необов’язково в рідному JavaScript-форматі. Інтерфейс файлів заснований на Blob, успадковуючи функціональність блобу та розширюючи його для підтримки файлів у системі користувача.

Чи можу я зробити власний URL-адресу блобу на сервері?

Так, ви можете існувати серверні способи зробити це, наприклад, спробуйте http://php.net/manual/en/function.ibase-blob-echo.php

Детальніше читайте на

• https://developer.mozilla.org/pl/docs/Web/API/Blob
• http://www.w3.org/TR/FileAPI/#dfn-Blob
• https://url.spec.whatwg.org/#urls

Я змінив робоче рішення для обробки обох випадків .. коли завантажується відео і коли завантажується зображення .. сподіваюся, що це допоможе деяким.

HTML

<input type="file" id="fileInput">
<div> duration: <span id='sp'></span><div>

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('iamge');
                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

https://jsfiddle.net/PratapDessai/0sp3b159/