URL blob là gì và tại sao nó được sử dụng?

Tôi đang gặp nhiều vấn đề với URL blob.

Tôi đã tìm kiếm srcmột thẻ video trên YouTube và tôi thấy rằng video srcđó giống như:

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

Tôi đã mở URL blob trong srcvideo mà nó báo lỗi. Tôi không thể mở liên kết, nhưng nó đã hoạt động với srcthẻ. Sao có thể như thế được?

Yêu cầu:

• URL blob là gì?
• Tại sao nó được sử dụng?
• Tôi có thể tạo URL blob của riêng mình trên máy chủ không?
• Nếu bạn có bất kỳ chi tiết bổ sung

URL Blob (ref W3C , tên chính thức) hoặc URL đối tượng (ref. MDN và tên phương thức) được sử dụng với đối tượng Blob hoặc File .

src = "blob: https: //crap.crap " Tôi đã mở url blob trong src của video, nó bị lỗi và tôi không thể mở nhưng làm việc với thẻ src thì sao?

URL Blob chỉ có thể được tạo bởi nội bộ trình duyệt. URL.createObjectURL()sẽ tạo một tham chiếu đặc biệt đến đối tượng Blob hoặc File mà sau này có thể được phát hành bằng cách sử dụng URL.revokeObjectURL(). Các URL này chỉ có thể được sử dụng cục bộ trong một phiên bản duy nhất của trình duyệt và trong cùng một phiên (tức là tuổi thọ của trang / tài liệu).

Url blob là gì?
Tại sao nó được sử dụng?

URL / URL đối tượng Blob là một giao thức giả để cho phép các đối tượng Blob và File được sử dụng làm nguồn URL cho những thứ như hình ảnh, liên kết tải xuống cho dữ liệu nhị phân, v.v.

Ví dụ, bạn không thể xử lý dữ liệu byte thô của đối tượng hình ảnh vì nó sẽ không biết phải làm gì với nó. Nó đòi hỏi hình ảnh ví dụ (là dữ liệu nhị phân) phải được tải qua URL. Điều này áp dụng cho bất cứ điều gì yêu cầu URL là nguồn. Thay vì tải lên dữ liệu nhị phân, sau đó phân phát lại thông qua URL, tốt hơn là sử dụng một bước cục bộ bổ sung để có thể truy cập dữ liệu trực tiếp mà không cần thông qua máy chủ.

Nó cũng là một thay thế tốt hơn cho Data-URI, các chuỗi được mã hóa thành Base-64 . Vấn đề với Data-URI là mỗi char lấy hai byte trong JavaScript. Trên hết, 33% được thêm vào do mã hóa Base-64. Blobs là các mảng byte nhị phân thuần túy, không có bất kỳ chi phí đáng kể nào như Data-URI, điều này làm cho chúng nhanh hơn và nhỏ hơn để xử lý.

Tôi có thể tạo url blob của riêng mình trên máy chủ không?

Không, URL Blob / URL đối tượng chỉ có thể được tạo nội bộ trong trình duyệt. Bạn có thể tạo Blobs và nhận đối tượng Tệp thông qua API Trình đọc tệp, mặc dù BLOB chỉ có nghĩa là Đối tượng lớn nhị phân và được lưu trữ dưới dạng mảng byte. Một khách hàng có thể yêu cầu dữ liệu được gửi dưới dạng ArrayBuffer hoặc Blob. Máy chủ sẽ gửi dữ liệu dưới dạng dữ liệu nhị phân thuần túy. Cơ sở dữ liệu thường sử dụng Blob để mô tả các đối tượng nhị phân, và về bản chất chúng ta đang nói về cơ bản các mảng byte.

nếu bạn có thì chi tiết bổ sung

Bạn cần đóng gói dữ liệu nhị phân dưới dạng đối tượng BLOB, sau đó sử dụng URL.createObjectURL()để tạo URL cục bộ cho nó:

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

Lưu ý rằng URLcó thể có tiền tố trong trình duyệt webkit, vì vậy hãy sử dụng:

var url = (URL || webkitURL).createObjectURL(...);

Hàm Javascript này có nghĩa là hiển thị sự khác biệt giữa API tệp Blob và Dữ liệu API để tải xuống tệp JSON trong trình duyệt máy khách:

/**
 * 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));

Hàm được gọi là like saveAsFile('out.json', jsonString);. Nó sẽ tạo ra một ByteStream ngay lập tức được trình duyệt nhận ra sẽ tải xuống tệp được tạo trực tiếp bằng API tệp URL.createObjectURL.

Trong elseđó, có thể thấy kết quả tương tự thu được thông quahref phần tử cộng với API dữ liệu, nhưng điều này có một số hạn chế mà API Blob không có.

Url blob là gì? Tại sao nó được sử dụng?

BLOB chỉ là chuỗi byte. Trình duyệt nhận ra nó là luồng byte. Nó được sử dụng để lấy luồng byte từ nguồn.

Một đối tượng Blob đại diện cho một đối tượng giống như tệp của dữ liệu thô, bất biến. Blobs đại diện cho dữ liệu không nhất thiết phải ở định dạng gốc JavaScript. Giao diện Tệp dựa trên Blob, kế thừa chức năng blob và mở rộng nó để hỗ trợ các tệp trên hệ thống của người dùng.

Tôi có thể tạo url blob của riêng mình trên máy chủ không?

Có, bạn có thể có những cách máy chủ để làm như vậy, ví dụ như thử http://php.net/manual/en/feft.ibase-blob-echo.php

Đọc thêm về

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

Tôi đã sửa đổi giải pháp làm việc để xử lý cả trường hợp .. khi video được tải lên và khi hình ảnh được tải lên .. hy vọng nó sẽ giúp một số.

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

};

jsFiddle Url

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