Hướng dẫn blob javascript la gì

349

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(...);

— Bakudan
nguồn

10

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:

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ó.— loretoparisi
nguồn

3

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.

Объект Blob представляет собой файловый объект необработанных неизменяемых данных. BLOB-объекты представляют данные, которые явно не в родном формате JavaScript. Интерфейс File основан на 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

— Роберт
источник

2

Я изменил рабочее решение для обработки обоих случаев… когда загружается видео и когда загружается изображение… надеюсь, что это кому-то поможет.

HTML

 duration: 

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" + " 
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/ — источник Дапай

Каково определение большого двоичного объекта (BLOB)?

Большой двоичный объект (BLOB) — это большой двоичный объект (BLOB). Это  вьетнамское значение  термина «Большой двоичный объект» (BLOB) — термина, принадлежащего к группе  технологических терминов  — информационных технологий. Рейтинг фактора: 5/10

Двоичный большой объект (BLOB) — это тип данных, который может хранить двоичные объекты или данные. Двоичные большие объекты используются в базах данных для хранения двоичных данных, таких как изображения, мультимедийные файлы и исполняемый программный код.

Смотрите также: АЗ. технологическая терминология

Объясните значение

Большие двоичные объекты в основном используются во всех программах баз данных. В целом программное обеспечение для двоичных баз данных больших объектов можно разделить на две категории: полуструктурированные данные и неструктурированные данные. XML-файлы классифицируются как полуструктурированные данные, а изображения и мультимедийные данные — как структурированные типы данных. Оба больших двоичных объекта обычно не интерпретируются базой данных. Что такое большой двоичный объект (BLOB)? – Определение

Двоичный большой объект (BLOB) — это тип данных, который может хранить двоичные объекты или данные. Двоичные большие объекты используются в базах данных для хранения двоичных данных, таких как изображения, мультимедийные файлы и исполняемый программный код. Общие сведения о больших двоичных объектах (BLOB)

Двоичные большие объекты используются во всех программах баз данных. Как правило, программное обеспечение базы данных классифицирует большие двоичные объекты на два типа: частично структурированные данные и неструктурированные данные. XML-файлы классифицируются как частично структурированные данные, тогда как изображения и мультимедийные данные относятся к неструктурированным типам данных. Оба этих больших двоичных объекта обычно не интерпретируются базой данных. Связанные термины

• Мультимедиа
• Программное обеспечение базы данных
• Двоичные файлы
• Символьный большой объект (CLOB)
• Компьютерные изображения (CGI)
• Конструктор
• Затмение
• Переходный
• Автоматизированная судебная поддержка (ALS)
• Полутона

Источник  : что такое большой двоичный объект (BLOB)? Технологический словарь — Filegi — Techtopedia — Techterm

Что такое URL-адрес большого двоичного объекта и почему он используется?

348

У меня много проблем с URL-адресами больших двоичных объектов.

Я искал  srcтег видео на YouTube и обнаружил, что  srcон выглядит так:

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

Я открыл URL-адрес большого двоичного объекта в  srcвидео, и он выдал мне ошибку. Я не мог открыть ссылку, но она работала с  srcтегом. Как это может быть?

Запрос:

• Что такое URL-адрес большого двоичного объекта?
• Почему это используется?
• Могу ли я создать свой собственный URL-адрес большого двоичного объекта на сервере?
• Если у вас есть дополнительная информация

– Источник Вакас Тахир

Отвечать:

349

URL-адрес BLOB-объекта (ссылка W3C, официальное имя) или URL-адрес объекта (ссылка MDN и имя метода), используемый с объектами Blob или File.

src=”blob:https://crap.crap” Я открыл URL-адрес большого двоичного объекта в src видео, он разбился, и я не могу его открыть, но как насчет работы с тегом src?

URL-адреса больших двоичных объектов могут создаваться только внутри браузера. URL.createObjectURL()создаст специальную ссылку на объект Blob или File, который впоследствии можно будет освободить с помощью  URL.revokeObjectURL(). Эти URL-адреса можно использовать только локально в одном экземпляре браузера и в рамках одного и того же сеанса (т. е. в течение срока действия страницы/документа).

Что такое URL-адрес BLOB-объекта?
Почему это используется?

URL/URL объекта Blob — это псевдопротокол, позволяющий использовать объекты Blob и File в качестве источников URL для таких вещей, как изображения, ссылки для скачивания двоичных данных и т. д.

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(...);

— Bakudan
nguồn

10

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:

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(...);

— Bakudan
nguồn

10

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:

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ó.— loretoparisi
nguồn

3

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.

A Blob object represents a file-like object of raw, immutable data. Blobs represent data that is not necessarily in the native JavaScript format. The File interface is based on Blob, which inherits the blob functionality and extends it to support files on the user’s system.

Can I generate my own blob url on the server?

Yes you can have server ways to do so eg try http://php.net/manual/en/function.ibase-blob-echo.php

Read more about

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

— Robert
the source

2

I have modified working solution to handle both case.. when video is uploaded and when image is uploaded.. hope it helps some.

HTML

 duration: 

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" + " 
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/— Dapai
the source

Binary Large Object (BLOB)

What is the definition of Binary Large Object (BLOB)?

A Binary Large Object (BLOB) is a Binary Large Object ( BLOB) . This is the Vietnamese meaning of the term Binary Large Object (BLOB) – a term belonging to the group of Technology Terms – Information Technology.Factor rating: 5/10

A Binary Large Object (BLOB) is a data type that can store binary objects or data. Binary large objects are used in databases to store binary data such as images, multimedia files, and executable software code.

See also: AZ . technology terminology

Explain the meaning

Large binary objects are mainly used in all database software. In general, large object binary database software can be classified into two categories: semi-structured data and unstructured data. XML files are classified as semi-structured data, while image and multimedia data are structured data types. Both blobs are generally not interpretable by the database.What is the Binary Large Object (BLOB)? – Definition

A binary large object (BLOB) is a data type that can store binary objects or data. Binary large objects are used in databases to store binary data such as images, multimedia files and executable software code.Understanding the Binary Large Object (BLOB)

Binary large objects are preeminent in all database software. Generally, database software classifies binary large objects into two types: semi-structured data and unstructured data. XML files are categorized as semi-structured data, whereas images and multimedia data are unstructured data types. Both of these BLOBs are generally not interpretable by the database.Related terms

• Multimedia
• Database Software
• Binary Files
• Character Large Object (CLOB)
• Computer Generated Imagery (CGI)
• Constructor
• Eclipse
• Transient
• Automated Litigation Support (ALS)
• Halftone

Source : What is Binary Large Object (BLOB) ? Technology Dictionary – Filegi – Techtopedia – Techterm

What is a blob URL and why is it used?

348

I’m having a lot of problems with blob URLs.

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

— Waqas Tahir
nguồn

Câu trả lời:

349

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(...);

— Bakudan
nguồn

10

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:

10

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:

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(...);

— Bakudan
nguồn

10

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: