国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

前端中的二進制以及相關操作與轉換

劉厚水 / 2100人閱讀

摘要:前端中的二進制以及相關操作與轉換最近工作中遇到了很多有關二進制的處理,如的生成,多個的打包,音頻的拼接。數據輸出或者叫數據展示或者下載,數據經二進制處理后可以由表示,然后通過等元素引用或者直接下載。

前端中的二進制以及相關操作與轉換

最近工作中遇到了很多有關二進制的處理,如PDF的生成,多個PDF的打包,音頻的拼接。為了數據的一致性,以及減少與后端通信的復雜度,工作量都在瀏覽器端。

瀏覽器,或者前端更多處理的是 View 層,即 UI = f(state),狀態至界面的轉化。但是也有很多關于二進制的處理,如

下載 Excel

文檔生成 PDF

對多個文件打包下載

圖片的亂碼問題

本篇文章總結了瀏覽器端的二進制以及有關數據之間的轉化,如 ArrayBuffer,TypedArray,Blob,DataURL,ObjectURL,Text 之間的互相轉換。為了更好的理解與方便以后的查詢,特意做了一張圖做總結。

原文鏈接見 http://shanyue.tech/post/binary-in-frontend/

二進制相關數據類型

在此之前,首先簡單介紹下幾種相關的數據類型,更多文檔請參考 MDN

ArrayBuffer && TypedArray

TypedArray 是 ES6+ 新增的描述二進制數據的類數組數據結構。但它本身不可以被實例化,甚至無法訪問,你可以把它理解為 Abstract Class 或者 Interface。而基于 TypedArray,有如下數據類型。

Uint8Array
Uint 代表數組的每一項是無符號整型
8 代表數據的每一項占 8 個比特位,即一個字節

Int8Array

Uint8Array

Int16Array

...

const array = new Int8Array([1, 2, 3])

// .length 代表數據大小
// 3
array.length

// .btyeLength 代表數據所占字節大小
array.byteLength

ArrayBuffer 代表二進制數據結構,只讀。需要轉化為 TypedArray 進行操作。

const array = new Int16Array([1, 2, 3])

// TypedArray -> ArrayBuffer
array.buffer

// ArrayBuffer -> TypedArray
new Int16Array(array.buffer)

// buffer.length 代表數據所占用字節大小
array.buffer.length === array.byteLength
連接多個 TypedArray

TypedArray 沒有像數組那樣的 Array.prototype.concat 方法用來連接多個 TypedArray。不過它提供了 TypedArray.prototype.set 可以用來間接連接字符串

可以參考 MDN 文檔:https://developer.mozilla.org...
// 在位移 offset 位置放置 typedarray
typedarray.set(typedarray, offset)

原理就是先分配一塊空間足以容納需要連接的 TypedArray,然后逐一在對應位置疊加

function concatenate(constructor, ...arrays) {
  let length = 0;
  for (let arr of arrays) {
    length += arr.length;
  }
  let result = new constructor(length);
  let offset = 0;
  for (let arr of arrays) {
    result.set(arr, offset);
    offset += arr.length;
  }
  return result;
}

concatenate(Uint8Array, new Uint8Array([1, 2, 3]), new Uint8Array([4, 5, 6]))

同時您還需要對資源的獲取有大致的了解,如 XHR,fetch,通過文件上傳。

Blob

Blob 是瀏覽器端的類文件對象。操作 Blob 需要使用數據類型 FileReader

FileReader 有以下方法,可以把 Blob 轉化為其它數據

FileReader.prototype.readAsArrayBuffer

FileReader.prototype.readAsText

FileReader.prototype.readAsDataURL

FileReader.prototype.readAsBinaryString

const blob = new Blob("hello".split(""))

// 表示文件的大小
blob.size

const array = new Uint8Array([128, 128, 128])
const blob2 = new Blob([array])

function readBlob (blob, type) {
  return new Promise(resolve => {
    const reader = new FileReader()
    reader.onload = function (e) {
      resolve(e.target.result)  
    }
    reader.readAsArrayBuffer(blob)
  })
}

readBlob(blob, "DataURL").then(url => console.log(url))
數據輸入

數據輸入或者叫資源的請求可以分為以下兩種途徑

通過 url 地址請求網絡資源

通過文件上傳請求本地資源

fetch

fetch 應該是大家比較熟悉的,但大多使用環境比較單一,一般用來請求 json 數據。其實, 它也可以設置返回數據格式為 Blob 或者 ArrayBuffer

fetch 返回一個包含 Response 對象的 Promise,Response 有以下方法

Response.prototype.arrayBuffer

Response.prototype.blob

Response.prototype.text

Response.prototype.json

詳情可以查看MDN文檔 https://developer.mozilla.org...
fetch("/api/ping").then(res => {
  // true
  console.log(res instanceof Response)
  // 最常見的使用
  return res.json()

  // 返回 Blob
  // return res.blob()

  // 返回 ArrayBuffer
  // return res.arrayBuffer()
})

另外,Response API 既可以可以使用 TypedArrayBlobText 作為輸入,又可以使用它們作為輸出。

這意味著關于這三種數據類型的轉換完全可以通過 Response

xhr

xhr 可以設置 responseType 接收合適的數據類型

const request = new XMLHttpRequest()
request.responseType = "arraybuffer"
request.responseType = "blob"
File

本地文件可以通過 input[type=file] 來上傳文件。

當上傳成功后,可以通過 document.getElementById("input").files[0] 獲取到上傳的文件,即一個 File 對象,它是 Blob 的子類,可以通過 FileReader 或者 Response 獲取文件內容。

數據輸出

或者叫數據展示或者下載,數據經二進制處理后可以由 url 表示,然后通過 image, video 等元素引用或者直接下載。

Data URL

Data URL 即 Data As URL。所以, 如果資源過大,地址便會很長。 使用以下形式表示。

data:[][;base64],

先來一個 hello, world。把以下地址粘入地址欄,會訪問到 hello, world

data:text/html,

Hello%2C%20World!

Base64 編碼與解碼

Base64 使用大小寫字母,數字,+ 和 / 64 個字符來編碼數據,所以稱為 Base64。經編碼后,文本體積會變大 1/3

在瀏覽器中,可以使用 atobbtoa 編碼解碼數據。

// aGVsbG8=
btoa("hello")
Object URL

可以使用瀏覽器新的API URL 對象生成一個地址來表示 Blob 數據。

// 粘貼生成的地址,可以訪問到 hello, world
// blob:http://host/27254c37-db7a-4f2f-8861-0cf9aec89a64
URL.createObjectURL(new Blob("hello, world".split("")))
下載

data:application/octet-stream;base64,5bGx5pyI

資源的下載可以利用 FileSaver 。

這里也簡單寫一個函數,用來下載一個鏈接

function download (url, name) {
  const a = document.createElement("a")
  a.download = name
  a.rel = "noopener"
  a.href = url
  // 觸發模擬點擊
  a.dispatchEvent(new MouseEvent("click"))
  // 或者 a.click(
}
二進制數據轉換

以上是二進制數據間的轉換圖,有一些轉換可以直接通過 API,有些則需要代碼,以下貼幾種常見轉換的代碼

String to TypedArray

根據上圖,由字符串到 TypedArray 的轉換,可以通過 String -> Blob -> ArrayBuffer -> TypedArray 的途徑。

關于代碼中的函數 readBlob 可以回翻環節 數據類型 - Blob

const name = "山月"
const blob = new Blob(name.split(""))

readBlob(blob, "ArrayBuffer").then(buffer => new Uint8Array(buffer))

也可以通過 Response API 直接轉換 String -> ArrayBuffer -> TypedArray

const name = "山月"

new Response(name).arrayBuffer(buffer => new Uint8Array(buffer))

這上邊兩種方法都是直接通過 API 來轉化,如果你更像了解如何手動轉換一個字符串和二進制的 TypedArray

String to TypedArray 2

使用 enodeURIComponent 把字符串轉化為 utf8,再進行構造 TypedArray。

function stringToTypedArray(s) {
  const str = encodeURIComponent(s)
  const binstr = str.replace(/%([0-9A-F]{2})/g, (_, p1) => {
    return String.fromCharCode("0x" + p1)
  })
  return new Uint8Array(binstr.split("").map(x => x.charCodeAt(0)))
}
實踐 1. 如何上傳本地圖片并在網頁上展示

由以上整理的轉換圖得出途徑

本地上傳圖片 -> Blob -> Object URL

2. 如何拼接兩個音頻文件

由以上整理的轉換圖得出途徑

fetch請求音頻資源 -> ArrayBuffer -> TypedArray -> 拼接成一個 TypedArray -> ArrayBuffer -> Blob -> Object URL

3. 如何把 json 數據轉化為 demo.json 并下載文件

json 視為字符串,由以上整理的轉換圖得出途徑

Text -> DataURL

除了使用 DataURL,還可以轉化為 Object URL 進行下載。關于下載的函數 download,可以參考以上環節 數據輸出-下載

Text -> Blob -> Object URL

可以把以下代碼直接粘貼到控制臺下載文件

const json = {
  a: 3,
  b: 4,
  c: 5
}
const str = JSON.stringify(json, null, 2)

const dataUrl = `data:,${str}`
const url = URL.createObjectURL(new Blob(str.split("")))

download(dataUrl, "demo.json")
download(url, "demo1.json")

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/109164.html

相關文章

  • WebSocket系列之如何建立和維護可靠的連接

    摘要:與此同時,后端服務的中也有相關的長連接維持時長設置。如何快速的恢復連接根據上面的操作方案,我們會在網絡異常時斷開連接。 概述 通過前四篇博客,相信讀者對于WebSocket的使用和數據(不論是ArrayBuffer還是String)傳輸都有了一個深刻的了解。現在我們來介紹下,我在使用WebSocket時,連接相關模塊遇到的一些共性問題,以及我們如何解決這些問題。 本文作為WebSock...

    BetaRabbit 評論0 收藏0
  • JavaScript中的數據類型

    摘要:八進制字面值的第一位必須是,然后是八進制數字序列。十六進制字面量的前兩位必須是,后跟任何十六進制數字以及。而自動創建的基本包裝類型的對象,則只存在于一行代碼的執行瞬間,然后立即銷毀。 前言 ECMAScript 迄今為止標準定義了 7 種數據類型:6 種原始類型-- String、Number、 Boolean、 Undefined、Null 和 Symbol;1 種引用類型-- O...

    szysky 評論0 收藏0
  • 前端開發中的字符編碼

    摘要:當然,也可自己寫一個轉換函數,按照一定規則便行為編碼的字節,如下例中國結果中國結果結果通過簡單的函數,就可以完成編碼到編碼的轉換,進而完成寬字節字符到編碼的轉換。 前端開發過程中會接觸各種各樣的編碼,比較常見的主要是 UTF-8 和 HTML 實體編碼,但是 web 前端的世界卻不止這兩種編碼,而且編碼的選擇也會造成一定的問題,如前后端開發過程中不同編碼的兼容、多字節編碼可能會造成的 ...

    Rindia 評論0 收藏0

發表評論

0條評論

劉厚水

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<