ビットデーターを効率良く保存する方法とは

Question

おたずねいたします。
以下のような、長さがバラバラなデーターを
javascript でひとつにまとめて書き出す方法を検討しています。

sample data

data(0) = 4d 54 
data(1) = 68 64 00 
data(2) = e0 4d 54 72 6b 00 00 15 
data(3) = d4 00 ff 03 00 00 
data(4) = ff 02 12 43 
data(5) = 6f 70 79 72 69 67
data(6) = 68 74 
data(7) = 20 28 
data(8) = 43 29 20 32 30 32 
data(9) = 30 00 ff 
data(10) = 58 04 01 03 18 

. . . 
. . .
. . .

とりあえず、すべてのデーターを
たった一つの文字列変数に次々と書き足す方法で
コードを作成するところまで行き着きました。

その後、色々な見本を調べて回って
Uint8Array などの方法が使えるかもしれないところまで
情報を集めました。

上述のデーターの例ですと、Uint8Array　の配列要素のひとつずつの容量を
超過してしまうのかどうか、など
基本的なことがどこにも書いてありません。

質問の目的

上述のビットデーターを最終的に１つの巨大データとしてつなげて
バイナリーコードとして javascript で
ひとつのファイルに書き出す方法を求めています。

よろしくお願いいたします。

これまで実行した方法

for loop を使って
文字列変数に　上記のビットデーターを
膨大な長さの文字列に書き加え続ける方法

for ( i=0; i< data.length; i++ )
str = str + data(i) ;

この方法では、ブラウザ上で実行すると
ものすごく処理速度が遅く
上に見本を示したようなわずか１０個ほどのテストデーターより
はるかに大量の情報を処理する際に
メモリー容量を超過する恐れを懸念しています。

求めている解決法

ブラウザ上で、２００個から５００個程度の入力データーを
１６進数に変換して読み込んで、そのうち
設定条件に合うものだけを関数処理して
計算結果が上のようなビットデーターとして得られます。

これらのビットデーターを上から順に空白文字を入れないで
javascript 上　(node.js の使用法を知りません）で
ひとかたまりに結合して
バイナリファイル形式で保存する方法を作ろうとしています。

Uint8Array などの使用方法が分からないため
どのようにコードを構築すればよいかご指導をお願いいたします。

Comments

[think49]

改行に意味はあるのですか。改行は復元対象ですか。

[think49]

それと質問内容が不明です。
「これまで実行した方法」で出来たのでしょうか。
できたなら何が問題だったのでしょう？

[Zuishin]

どこまで聞いているのかよくわかりませんが、回答者たちはデータ圧縮前提で回答しています。圧縮が必要でしょうか？
また実行環境はブラウザでしょうか？ それとも node.js でしょうか？

素直に読むなら、データの保持は ArrayBuffer が良いと思います。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer

これを文字列に変換する、または文字列から ArrayBuffer に戻すには BASE64 が簡単です。
https://developer.mozilla.org/ja/docs/Web/API/WindowBase64/Base64_encoding_and_decoding

ファイルを扱うには File API が使えそうです。
https://developer.mozilla.org/ja/docs/Web/API/File/Using_files_from_web_applications

リテラルからデータを作成するには、Uint8Array が使えますね。これは背後で ArrayBuffer を使用します。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array

[Zuishin]

> 計算結果が上のようなビットデーターとして得られます。

ここまではできているということですか？ それとも

> ブラウザ上で、２００個から５００個程度の入力データーを
> １６進数に変換して読み込んで

ここからまだですか？
また、データはどこから得られますか？
スクリプトの中に直書きするということですか？
なぜこれを聞くかというと、

> data(0) = 4d 54

これは文法エラーになります。つまり、データがどのような形で変数に入っているかわからないため、その先へ進めません。

[AkitoshiManabe]

> 入力データーを１６進数に変換して読み込んで、そのうち設定条件に合うものだけを関数処理
これが速度的なネックになっていそうです。
処理方法をコードで示すことはできますか？

Answer 1

上述のビットデーターを最終的に１つの巨大データとしてつなげ

「ビットデーター」をバイト配列と捉えるなら、ArrayBuffer を用いて結合する例も参考になるかもしれません。

let
  datalist = [
    new Uint8Array([0x4d, 0x54]),
    new Uint8Array([0x68, 0x64, 0x00]),
    new Uint8Array([0xe0, 0x4d, 0x54, 0x72, 0x6b, 0x00, 0x00, 0x15]),
    new Uint8Array([0xd4, 0x00, 0xff, 0x03, 0x00, 0x00]),
    new Uint8Array([0xff, 0x02, 0x12, 0x43]),
    new Uint8Array([0x6f, 0x70, 0x79, 0x72, 0x69, 0x67]),
    new Uint8Array([0x68, 0x74]),
    new Uint8Array([0x20, 0x28]),
    new Uint8Array([0x43, 0x29, 0x20, 0x32, 0x30, 0x32]),
    new Uint8Array([0x30, 0x00, 0xff]),
    new Uint8Array([0x58, 0x04, 0x01, 0x03, 0x18])
  ],

  totalLength = datalist.reduce( (acc,byt) => acc + byt.byteLength, 0 ),
  ab = new ArrayBuffer( totalLength ),
  dv = new DataView(ab),
  pt = 0
;

datalist.forEach( byt => {
  for (let i=0,l=byt.byteLength; i<l; i++, pt++) {
    dv.setUint8( pt, byt[i] );
  }
});
console.log( dv.buffer );
// => ArrayBuffer(47) {}

バイナリダンプして、正しく結合できたかを確認します

const dump = ( buf ) => {
  let
    len = buf.byteLength, // ArrayBuffer からバイト長を求める
    u = new Uint8Array( buf ), // TypedArray を介して ArrayBuffer を操作
    dump = [], tmp
  ;
  for( let i=0; i<len; ++i ) {
    if( i % 16 === 0 ) dump.push( tmp=[] );
    tmp.push( u[i].toString(16).padStart(2,"0") );
  }
  return dump.map( l=>l.join(" ") ).join("\n");
};

console.log( dump(dv.buffer) );
/*
 => 4d 54 68 64 00 e0 4d 54 72 6b 00 00 15 d4 00 ff
    03 00 00 ff 02 12 43 6f 70 79 72 69 67 68 74 20
    28 43 29 20 32 30 32 30 00 ff 58 04 01 03 18
 */

復元が必要なら、複合用の冗長なデータを持たせる必要があります。
PNG ファイルがチャンクという単位を持たせ、復元可能な内容にしています。

• qiita PNGを読む

Comments

[xmg]

初学者にとって極めて難解な問題を分かりやすくご解説いただき、ありがとうございました。
深くお礼を申し上げます。

Answer 2

昔よくあった方法ですが
保存は
バイト配列をRGBA変換して<canvas>タグに描写
あとは画像として保存(RGBAで情報が残るなら形式は何でも)。
サイズが可変の場合最初か最後のピクセルのRGBA(4バイト)に書きこんでおく

読込は
画像を<canvas>タグに読み込んで1ピクセル単位に読み込むだけ

※PGBAでなくPGBでも可

Comments

[AkitoshiManabe]

A値に 0,255以外の値を書き込むと ピクセルは半透明を表現するために合成されて RGB のデータが壊れます。RGB（3バイト）に書き込むのが正しい回答と思います。

[kuma_kuma_]

> RGBAで情報が残るなら形式は何でも
>※PGBAでなくPGBでも可
だからわざわざ上記の様に注意書きで書いているのですが？

3バイト配列(RGB)だと数値型に変換する時に都合が悪いので4バイト配列(PGBA)を
先に書きましたが保存方法によってはRGBAで残らないのでその場合PGBとして下さい。

ここまで書かないと理解できない？

[AkitoshiManabe]

> ここまで書かないと伝わらない？
申し訳ありません。追記されていたのですね（リロードせずに投稿していました）。

Answer 3

いろいろ方法はあると思いますが、
結局あなたの思ってるように、文字列で格納してくいのがいいかとおもいますよ。

んで、バイト間のスペースは削除して、

4d54 
686400 
e04d54726b000015
... 

でいいんじゃないでしょうか

Answer 4

基数変換

圧縮だけなら、基数変換という原始的な方法もあります。

• Number.prototype.toString で36進数に基数変換する
• String.fromCharCode() で255進数に基数変換する

sample dataで

e0 4d 54 72 6b 00 00 15 

この1行を一つの数字と見なせば、圧縮率は更に上がります。
改行に意味がないなら、全行を一つの数字と見なしてもよいかもしれません。

圧縮ライブラリ

zipの圧縮ライブラリを使えば、一つの書庫になります。
「zip + 基数変換」の重ねがけもよいかもしれません。

• zip javascript - Google 検索

Re: xmg さん