js二進制數據及其互相轉化實現詳解

更新時間：2023年02月27日 09:53:36 作者：元子不圓呀

這篇文章主要為大家介紹了js二進制數據及其互相轉化實現詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

file

在js中有很多二進制數據，有file,base64,Blob,ArrayBuffer,FileReader。這些二進制數據在文件導出和下載的時候是經常會用到的，我們這篇文章就是介紹這些二進制數據以及它們之間的轉化。

文件（File）接口提供有關文件的信息，并允許網頁中的 JavaScript 訪問其內容。實際上，File 對象是特殊類型的 Blob，且可以用在任意的 Blob 類型的 context 中。Blob 的屬性和方法都可以用于 File 對象。

file文件

file文件一般有兩種來源

<input> 元素上選擇文件后返回的 FileList 對象；
文件拖放操作生成的 DataTransfer 對象；

每個 File 對象都包含以下屬性，這些屬性都繼承自 Blob 對象：

lastModified：引用文件最后修改日期，為自1970年1月1日0:00以來的毫秒數；
lastModifiedDate：引用文件的最后修改日期；
name：引用文件的文件名；
size：引用文件的文件大??；
type：文件的媒體類型（MIME）；
webkitRelativePath：文件的路徑或 URL。

base64

Base64 是一種基于64個可打印字符來表示二進制數據的表示方法。Base64 編碼普遍應用于需要通過被設計為處理文本數據的媒介上儲存和傳輸二進制數據而需要編碼該二進制數據的場景。這樣是為了保證數據的完整并且不用在傳輸過程中修改這些數據。

Blob

Blob 對象表示一個不可變、原始數據的類文件對象。它的數據可以按文本或二進制的格式進行讀取，也可以轉換成 ReadableStream 來用于數據操作。

也就是說blob對象是原始二進制數據對象，是不可修改的。

blob的用法

new Blob(array, options);

array：由 ArrayBuffer、ArrayBufferView、Blob、DOMString 等對象構成的，將會被放進 Blob；

options：可選的 BlobPropertyBag 字典，它可能會指定如下兩個屬性

type：默認值為 ""，表示將會被放入到 blob 中的數組內容的 MIME 類型。

endings：默認值為"transparent"，用于指定包含行結束符\n的字符串如何被寫入，不常用。

ArrayBuffer

ArrayBuffer 對象用來表示通用的、固定長度的原始二進制數據緩沖區(qū)。ArrayBuffer 的內容不能直接操作，只能通過 DataView 對象或 TypedArrray 對象來訪問。這些對象用于讀取和寫入緩沖區(qū)內容。

TypedArray：用來生成內存的視圖，通過9個構造函數，可以生成9種數據格式的視圖。

Int8Array
Uint8Array
Uint8ClampedArray
Int16Array
Unit16Array
Int32Array
Uint32Array
Float32Array
Float64Array

DataViews：用來生成內存的視圖，可以自定義格式和字節(jié)序。

ArrayBuffer的使用

new ArrayBuffer(bytelength)

FileReader

FileReader用于讀取文件并提取其內容, 可以將 Blob 讀取為不同的格式。

FileReader的使用

創(chuàng)建

const reader = new FileReader();

FileReader還有很多方法和事件，感興趣的可以去MDN上查看。

二進制類型數據的互相轉化

file轉base64

let reader = new FileReader();
reader.readAsDataURL(file[0])

base64轉blob

const base64toBlob = (base64Data, contentType, sliceSize) => {
  const byteCharacters = atob(base64Data);
  const byteArrays = [];
  for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
    const slice = byteCharacters.slice(offset, offset + sliceSize);
    const byteNumbers = new Array(slice.length);
    for (let i = 0; i < slice.length; i++) {
      byteNumbers[i] = slice.charCodeAt(i);
    }
    const byteArray = new Uint8Array(byteNumbers);
    byteArrays.push(byteArray);
  }
  const blob = new Blob(byteArrays, {type: contentType});
  return blob;
}

blob轉ArrayBuffer

function blobToArrayBuffer(blob) { 
  return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.onload = () => resolve(reader.result);
      reader.onerror = () => reject;
      reader.readAsArrayBuffer(blob);
  });
}

blob轉base64

function blobToBase64(blob) {
  return new Promise((resolve) => {
    const reader = new FileReader();
    reader.onloadend = () => resolve(reader.result);
    reader.readAsDataURL(blob);
  });
}

ArrayBuffer轉blob

const blob = new Blob([new Uint8Array(buffer, byteOffset, length)]);

ArrayBuffer轉base64

const base64 = btoa(String.fromCharCode.apply(null, new Uint8Array(arrayBuffer)));

base64轉file

const base64ConvertFile = function (urlData, filename) { // 64轉file
    if (typeof urlData != 'string') {
        return;
    }
    let arr = urlData.split(',')
    let type = arr[0].match(/:(.*?);/)[1]
    let fileExt = type.split('/')[1]
    let bstr = atob(arr[1])
    let n = bstr.length
    let u8arr = new Uint8Array(n)
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new File([u8arr], 'filename.' + fileExt, {
        type: type
    });
}

溫馨提示：由于文章篇幅有限，關于幾種二進制的詳細用法可以去MDN查看。

以上就是js二進制數據及其互相轉化實現詳解的詳細內容，更多關于js二進制數據互相轉化的資料請關注腳本之家其它相關文章！

您可能感興趣的文章: