ArrayBufferとTypedArray,Blob等相互変換

最もプリミティブなバイト列ArrayBufferをTypedArray(Uint8Array等)、Blob、Base64、Data URL、Hexと相互変換するコードのメモです。

以下のコードはブラウザで動作します。外部ライブラリも不要です。

目次

• ArrayBuffer と TypedArray (Uint8Array)
  • ArrayBuffer => TypedArray
  • TypedArray => ArrayBuffer
• ArrayBuffer と Blob
  • ArrayBuffer => Blob
  • Blob => ArrayBuffer
• ArrayBuffer と Base64
  • ArrayBuffer => Base64
  • Base64 => ArrayBuffer
• ArrayBuffer と Data URL
  • ArrayBuffer => Data URL
  • Data URL => ArrayBuffer
• ArrayBuffer と Hex
  • ArrayBuffer => Hex
  • Hex => ArrayBuffer

ArrayBuffer と TypedArray (Uint8Array)

ArrayBuffer => TypedArray

const typedArray = new Uint8Array(arrayBuffer);

TypedArray => ArrayBuffer

const arrayBuffer = uint8Array.buffer;

ArrayBuffer と Blob

ArrayBuffer => Blob

const blob = new Blob([arrayBuffer]);

Blob => ArrayBuffer

blob.arrayBuffer().then(arrayBuffer => { ... });
// or:
const arrayBuffer = await blob.arrayBuffer();

ArrayBuffer と Base64

ArrayBuffer => Base64

function arrayBufferToBase64(buffer) {
  let binary = '';
  const bytes = new Uint8Array(buffer);
  const len = bytes.byteLength;
  for (let i = 0; i < len; i++) {
    binary += String.fromCharCode(bytes[i]);
  }
  return window.btoa(binary);
}

// ArrayBuffer(4) => "/////w=="
const base64 = arrayBufferToBase64(arrayBuffer);

Base64 => ArrayBuffer

function base64ToArrayBuffer(base64) {
  const binary_string = window.atob(base64);
  const len = binary_string.length;
  let bytes = new Uint8Array(len);
  for (let i = 0; i < len; i++) {
    bytes[i] = binary_string.charCodeAt(i);
  }
  return bytes.buffer;
}

// "/////w==" => ArrayBuffer(4)
const arrayBuffer = base64ToArrayBuffer(base64);

ArrayBuffer と Data URL

ArrayBuffer => Data URL

function arrayBufferToBase64(buffer) {
  let binary = '';
  const bytes = new Uint8Array(buffer);
  const len = bytes.byteLength;
  for (let i = 0; i < len; i++) {
    binary += String.fromCharCode(bytes[i]);
  }
  return window.btoa(binary);
}

// ArrayBuffer(4) => "data:image/jpeg;base64,/////w=="
const dataUrl = `data:image/jpeg;base64,${arrayBufferToBase64(arrayBuffer)}`;

Data URL => ArrayBuffer

function base64ToArrayBuffer(base64) {
  const binary_string = window.atob(base64);
  const len = binary_string.length;
  let bytes = new Uint8Array(len);
  for (let i = 0; i < len; i++) {
    bytes[i] = binary_string.charCodeAt(i);
  }
  return bytes.buffer;
}

// "data:image/jpeg;base64,/////w==" => ArrayBuffer(4)
const arrayBuffer = base64ToArrayBuffer(dataUrl.split(";base64,")[1])

ArrayBuffer と Hex

ArrayBuffer => Hex

function arrayBufferToHex(buffer) {
  return Array.prototype.map.call(new Uint8Array(buffer), x => ('00' + x.toString(16)).slice(-2)).join('');
}

// ArrayBuffer(4) => "ffffffff"
const hex = arrayBufferToHex(arrayBuffer);

Hex => ArrayBuffer

function hexToArrayBuffer(hex) {
  return new Uint8Array(hex.match(/[\da-f]{2}/gi).map(function(h) {
    return parseInt(h, 16)
  })).buffer;
}

// "ffffffff" => ArrayBuffer(4)
const arrayBuffer = hexToArrayBuffer(hex);

以上です。