[Серия интерфейсных знаний] Объекты ArrayBuffer и Blob

JavaScript

ArrayBufferAndBlob.png

Эта статья была впервые опубликована в моем [личный блог】
Для получения более подробных учебных материалов по внешнему интерфейсу вы можете просмотреть мойGithub: "Лео-JavaScript", который охватываетСтруктуры данных и алгоритмы,HTTP,Hybrid,вопросы интервью,React,Angular,TypeScriptа такжеWebpackи т.п.
Нажмите на звездочку, чтобы не потеряться~

ArrayBufferобъект сBlobВозможно, это менее знакомые объекты, общие в обработке операции загрузки файлов (например, предварительный просмотр загрузки изображения обработки и т. Д.).

Итак, эта статья подробно познакомит вас обоих.

1. Объект ArrayBuffer

ArrayBufferОбъект ES6 до того, как он был включен в официальную спецификацию ECMAScript, это JavaScript.Манипулировать двоичными даннымиинтерфейс .ArrayBufferОбъекты обрабатывают двоичные данные в синтаксисе массива, также известного как двоичный массив.

представлятьArrayBufferОбъект должен быть представленTypedArrayвид иDataViewПосмотрите, в этой статье это не представлено подробно, вы можете узнать подробности у учителя Руань Ифэн.Начало работы с ECMAScript 6 ArrayBufferглава.

1. Введение концепции

ArrayBufferОбъект представляет собой кусок памяти, в котором хранятся бинарные данные, он не может быть прочитан или записан напрямую, только через представление (TypedArrayвид иDataViewView) для чтения и записи, роль представления заключается в интерпретации двоичных данных в указанном формате.

оTypedArrayвид иDataViewПросмотр, вы можете просмотреть учителя Руан ИфэнНачало работы с ECMAScript 6 ArrayBufferВведение главы.

2. Использование объекта

Браузер изначально предоставляетArrayBuffer()Конструктор, используемый для создания экземпляра.

параметр:

  • Целое число, представляющее длину в байтах, занимаемую двоичными данными.

возвращаемое значение:

  • заданный размерArrayBufferОбъект, содержимое которого инициализировано до 0.
const buffer = new ArrayBuffer(32);

Приведенный выше код представляет объект экземпляраbufferЗанимает 32 байта.

3. Свойства и методы экземпляра

ArrayBufferОбъекты имеют свойства экземпляраbyteLength, представляющий текущий экземплярДлина занимаемой памяти в байтах(единичный байт),Неизменяемый после создания (только для чтения):

const buffer = new ArrayBuffer(32);
buffer.byteLength; // 32

ArrayBufferОбъекты имеют методы экземпляраslice(), используемый для копирования части памяти.

Параметры следующие:

  • start, целочисленный тип, указывающий позицию для начала копирования. По умолчанию начинается с 0.

  • Конец, целочисленный тип, указывающий положение для завершения копирования (исключая конечное положение). Если оно опущено, это означает копию до конца.

const buffer = new ArrayBuffer(32);
const buffer2 = buffer.slice(0);

4. Совместимость

Изображение через MDN

2. Объект блоба

1. Введение концепции

BlobПолное имя:Binary Large Object(Большой двоичный объект).

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

а такжеArrayBufferразница:

  • Blobдля работыбинарный файл
  • ArrayBufferдля работыОЗУ

2. Использование объекта

Браузер изначально предоставляетBlob()Конструктор, используемый для создания экземпляра.

BlobСодержимое состоит из конкатенации значений, заданных в массиве аргументов.

const leoBlob = new Blob(array [, options]);

параметр:

  • array, обязательно, член представляет собой строку или двоичный объект, указывающий содержимое вновь созданного объекта экземпляра Blob;

Член может бытьArrayBuffer , ArrayBufferView , Blob , DOMStringсостоит из объектовArray, или другую смесь подобных объектов, которые будут помещены вBlob.DOMStringsбудет закодирован какUTF-8.

  • options, необязательный, это объект конфигурации, вот часто используемые свойстваtype, указывающий MIME-тип данных, по умолчанию — пустая строка;

optionsВ настоящее время возможны два свойства:typeа такжеendings.

endingsИспользуется для указания окончания строки, включающей\nкак пишется строка, значение по умолчаниюtransparent. Он имеет только эти два значения:native(представляющий символ конца строки, который заменяется символом новой строки, подходящим для файловой системы основной операционной системы) иtransparent(Представитель сохранит терминатор, сохраненный в большом двоичном объекте, без изменений).

Случаи применения:

const leoHtmlFragment = ['<a id="a"><b id="b">hey leo！</b></a>']; // 一个包含 DOMString 的数组
const leoBlob = new Blob(leoHtmlFragment, {type : 'text/html'});   // 得到 blob

Код, экземпляр объектаleoBlobСодержит строки. При создании экземпляра укажите тип данных какtext/html.

Вы также можете использовать большие двоичные объекты для сохранения данных JSON:

const obj = { hello: 'leo' };
const blob = new Blob([ JSON.stringify(obj) ], {type : 'application/json'});

3. Свойства и методы экземпляра

BlobИмеет два свойства экземпляра:

  • size: размер файла в байтах.

  • type: MIME-тип файла. Если тип не может быть определен, возвращается пустая строка.

const leoHtmlFragment = ['<a id="a"><b id="b">hey leo！</b></a>']; // 一个包含 DOMString 的数组
const leoBlob = new Blob(leoHtmlFragment, {type : 'text/html'});   // 得到 blob

leoBlob.size; // 38
leoBlob.type; // "text/html"

BlobМетод экземпляра:

  • clice: Метод, используемый для создания содержащего источникаBlobНовые данные в указанном диапазоне байтовBlobобъект.
const newBlob = oldBlob.slice([start [, end [, contentType]]])

Содержит три параметра:

start, необязательно, начальная позиция байта, по умолчанию 0;

end, необязательно, позиция конечного байта, по умолчаниюsizeСтоимость имущества без учета местоположения;

contentType, необязательно, тип данных нового экземпляра (по умолчанию для пустой строки);

4. Совместимость

Изображение через MDN

5. Практические кейсы

5.1 Получить информацию о файле

средство выбора файлов<input type="file">Используется, чтобы позволить пользователю выбрать файл. Из соображений безопасности браузеры не позволяют сценариям устанавливатьvalueИмущество, а именноФайл должен быть выбран пользователем вручную и не может быть указан сценарием.. Как только пользователь выбирает файл, сценарий может прочитать файл.

средство выбора файлов возвращаетFileListобъект, который представляет собой объект, подобный массиву, каждый элемент которого являетсяFileобъект экземпляра.FileЭто особый экземпляр объектаBlobПример, увеличенныйnameа такжеlastModifiedDateАтрибуты.

также включаютПеретащите APIизdataTransfer.filesтакже возвращаетFileListобъекты, члены такжеFileобъект экземпляра.

// HTML 代码如下
// <input type="file" accept="image/*" multiple onchange="fileinfo(this.files)"/>

function fileinfo(files) {
  for (let i = 0; i < files.length; i++) {
    let f = files[i];
    console.log(
      f.name, // 文件名，不含路径
      f.size, // 文件大小，Blob 实例属性
      f.type, // 文件类型，Blob 实例属性
      f.lastModifiedDate // 文件的最后修改时间
    );
  }
}

5.2 Загрузка файлов

В запросе AJAX укажитеresponseTypeсобственностьblob, вы можете загрузить объект Blob.

function getBlob(url, callback) {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', url);
  xhr.responseType = 'blob';
  xhr.onload = function () {
    callback(xhr.response);
  }
  xhr.send(null);
}

Потом,xhr.responseесть одинBlobобъект.

5.3 Создание URL-адресов

Браузер позволяет использоватьURL.createObjectURL()метод дляBlobобъект создает временныйURL, так что некоторыеAPIиспользовать.

Например, URL-адрес в качестве предварительного просмотра изображения.

Этот URL-адрес начинается сblob://в начале, указывая на то, что соответствующийBlobObject, за заголовком протокола следует идентификатор, который используется для уникального соответствия объекту Blob в памяти. Это сdata://URL(URL-адрес содержит фактические данные) иfile://URL(локальная файловая система внутри файла) не совпадают.

const droptarget = document.getElementById('droptarget');

droptarget.ondrop = function (e) {
  const files = e.dataTransfer.files;
  for (let i = 0; i < files.length; i++) {
    let type = files[i].type;
    if (type.substring(0,6) !== 'image/')
      continue;
    let img = document.createElement('img');
    img.src = URL.createObjectURL(files[i]);
    img.onload = function () {
      this.width = 100;
      document.body.appendChild(this);
      URL.revokeObjectURL(this.src);
    }
  }
}

В коде URL-адрес генерируются для затапленного и сброшенного файла изображения в виде миниатюр предварительного просмотра.

Браузеры обрабатывают URL-адреса BLOB-объектов так же, как обычные URL-адреса, еслиBlobЕсли объект не существует, возвращается код состояния 404; если сделан междоменный запрос, возвращается код состояния 403. Только URL-адрес большого двоичного объектаGETЗапрос действителен. Если запрос выполнен успешно, возвращается код состояния 200. Поскольку URL-адрес BLOB-объекта является обычным URL-адресом, его можно загрузить.

5.4 Чтение файлов

получатьBlobПосле объекта можно пройтиFileReaderобъект, читатьBlobСодержимое объекта, то есть содержимое файла.

FileReaderОбъекты предоставляют четыре метода. Передайте объект Blob в качестве параметра и верните его в указанном формате.

  • FileReader.readAsText(): Возвращает текст, нужно указать кодировку текста, по умолчанию UTF-8.
  • FileReader.readAsArrayBuffer(): возвращает объект ArrayBuffer.
  • FileReader.readAsDataURL(): возвращает URL-адрес данных.
  • FileReader.readAsBinaryString(): возвращает исходную двоичную строку.

НижеFileReader.readAsText()Примеры метода чтения текстовых файлов:

// HTML 代码如下
// <input type='file' onchange='readfile(this.files[0])'></input>
// <pre id='output'></pre>
function readfile(f) {
  let reader = new FileReader();
  reader.readAsText(f);
  reader.onload = function () {
    let text = reader.result;
    let out = document.getElementById('output');
    out.innerHTML = '';
    out.appendChild(document.createTextNode(text));
  }
  reader.onerror = function(e) {
    console.log('Error', e);
  };
}

НижеFileReader.readAsArrayBuffer()Примеры методов чтения бинарных файлов:

// HTML 代码如下
// <input type="file" onchange="typefile(this.files[0])"></input>
function typefile(file) {
  // 文件开头的四个字节，生成一个 Blob 对象
  let slice = file.slice(0, 4);
  let reader = new FileReader();
  // 读取这四个字节
  reader.readAsArrayBuffer(slice);
  reader.onload = function (e) {
    let buffer = reader.result;
    // 将这四个字节的内容，视作一个32位整数
    let view = new DataView(buffer);
    let magic = view.getUint32(0, false);
    // 根据文件的前四个字节，判断它的类型
    switch(magic) {
      case 0x89504E47: file.verified_type = 'image/png'; break;
      case 0x47494638: file.verified_type = 'image/gif'; break;
      case 0x25504446: file.verified_type = 'application/pdf'; break;
      case 0x504b0304: file.verified_type = 'application/zip'; break;
    }
    console.log(file.name, file.verified_type);
  };
}

3. Ссылки

  1. «Объект ArrayBuffer, объект Blob»
  2. Начало работы с ECMAScript 6 ArrayBuffer

4. Обо мне

Эта статья впервые появилась вpingan8787 личный блог, если вам нужно перепечатать, пожалуйста, сохраните свое личное введение.

Author Ван Пинъань
E-mail pingan8787@qq.com
Блог www.pingan8787.com
WeChat pingan8787
Рекомендуемая ежедневная статья GitHub.com/ Пинг 8787/...
Брошюра ЕС js.pingan8787.com

bg

Категории