フロントエンドのバイナリ
24057 ワード
ArayBuffer TypedArayData ViewとType Arayは全部内部的にブザーを引用していますので、全部あります.ブザー BlobBlobは、可変ではないオリジナルデータの種類のファイルオブジェクト BlobはFileReaderを介して他の形に変換できる Blobダウンロード画像表示 Base 64は、radix-64の表現形式と解釈したバイナリデータをASCII文字列のフォーマットで表すことができるように、同じバイナリからテキスト(binary-to-text)までの符号化ルールである. 2つのよく使われる方法
ArrayBuffer
共通の、固定長さを表すオリジナルのバイナリデータバッファ.バイト配列で、通常は他の言語ではbyte array
TypedArray
特定の要素タイプ(Int 8 Aray)を指定する総称であり、詳細はMDNlet buffer = new ArrayBuffer(8); // 8 ArrayBuffer
console.log(buffer.byteLength); // 8
const int8Array = new Int8Array(buffer);
console.log(int8Array.length); // 1 8
console.log(int8Array.buffer===buffer); // true
let int16Array = new Int16Array(buffer);
console.log(int16Array.length); // 4
DataViewDataView
:複数の数値タイプが書かれた底のインターフェースを読んで使用することができるので、プラットフォームのバイト順(大きさの端)を考慮しなくてもいいlet buffer = new ArrayBuffer(2); //2 ArrayBuffer
console.log(buffer.byteLength); //2
let dataView = new DataView(buffer);
console.log(dataView.buffer === buffer); // true
dataView.setInt8(0, 1);
dataView.setInt8(1, 2);
console.log(dataView.getInt8(0)); //1
console.log(dataView.getInt8(1)); //2
console.log(dataView.getInt16(0)); // (16 ) [0,0,0,0,0,0,0,1,0,0,0,0,0,0,1,0] = 258
let debug = {name:'limy'};
let str = JSON.stringify(debug);
console.log(str); // {"name":"limy"}
let blob = new Blob([str],{type:'application/json'});
console.log('blob.size',blob.size); // 15
// blob
function readBlob(blob,type){
return new Promise(function(resolve){
let reader = new FileReader();
reader.onload = function(event){
resolve(event.target.result);
}
switch(type){
case 'ArrayBuffer':
reader.readAsArrayBuffer(blob);
break;
case 'DataURL':// base64
reader.readAsDataURL(blob);
break;
case 'Text':
reader.readAsText(blob,'utf-8');
break;
default:
break;
}
});
}
readBlob(blob,'ArrayBuffer').then(result=>{
console.log(result); // arraybuffer ,
});
readBlob(blob,'DataURL').then(result=>{
console.log(result); // base64 data:application/json;base64,eyJuYW1lIjoibGlteSJ9
});
readBlob(blob,'Text').then(result=>{
console.log(result); // {"name":"limy"}
});
const a = document.createElement('a')
a.href = window.URL.createObjectURL(blob) // url src
a.target = '_blank'
a.download = fileName
document.body.appendChild(a)
a.click()
document.body.removeChild(a)
Base 64let encodedData = window.btoa("Hello, world"); // "SGVsbG8sIHdvcmxk"
let decodedData = window.atob(encodedData); // "Hello, world"
常用変換function bufferToBlob(buffer){
return new Blob([buffer])
}
function blobToBuffer(blob) {
const reader = new FileReader();
reader.onload = function(e) { //
console.log(reader.result)
}
reader.readAsArrayBuffer(blob);
}
function blobToDataURL(blob){
return window.URL.createObjectURL(blob)
}
function dataURLtoBlob(dataurl) {
var arr = dataurl.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], {
type: mime
});
}
function arrayBufferToBase64(bytes) {
let binary = ''
const len = bytes.byteLength
for (var i = 0; i < len; i++) {
binary += String.fromCharCode(bytes[ i ])
}
return window.btoa(binary)
}