javaScriptでバイナリデータを画像に変換できない

###前提・実現したいこと
お世話になります。
現在、Line Messaging APIを利用してLineアプリで送信した画像を
Node.jsでバイナリデータで受け取り、HTMLファイルの画面に受け取ったデータを元に
画像を表示しようと試行錯誤しています。

結果、Node.jsでデータは下記のように受け取れました。

JSONに変換し配列を文字列に変換してHTMLでは下記のように受け取りました。

2552162552240167470737001100720720025522507669120105102007777042000802118030001010013 ...

しかしこのデータを画像に変換できません。
img要素のsrc属性にDataURL化した文字列を代入しても表示されませんでした。

###該当のソースコード

js
1// ejsでJSON文字列されたバイナリデータが入っている。
2<%= content %>
3    </div>
4    <script>
5        // バイナリ文字列(記号)
6        var doc = document.getElementById('binary');
7        // バイナリ配列
8        var json = JSON.parse(doc.innerHTML);
9        var string = "";
10        var toDataURL = "";
11        // バイナリ文字列
12        for (var i = 0; i < json.data.length; i++) {
13            string += String(json.data[i]).toString(16);
14        }
15   
16        var base64 = btoa(binary_file);
17        // DataURL化された文字列
18        var DataURL = 'data:image/jpeg;base64,' + base64;
19    </script>

###試したこと

試したことは上記ですべてです。
試行錯誤ですので、自分自身でもなにをすれば良いのか分かりませんでした。

どうかお知恵をお貸しください。

defghi1977

2017/12/05 02:46

JSON化で死んでる. ”Buffer”で空白区切りでバイト列を表しているんだから, それを連結したらわけわからんようになるよ

nobodytolove123

2017/12/05 02:51

ご回答ありがとうございます！なるほど、JSON変換したらおかしくなるんですね。

nobodytolove123

2017/12/05 02:52

ちなみにもとのBufferデータをどうすれば画像に変換できますか?

defghi1977

2017/12/05 02:55

せっかく「ff d8 ff e0」でJPEGと判る内容を10進変換して連結したから「255216255224」という意味不明な数値になっています. ここは素直にHTML側に”Buffer”の列をスルーして, 空白文字でsplitしてArray.mapでparseInt(str, 16)してUint8Array作ってBlob作ってURL.createObjectURLで, ハイ出来上がり

行動規範の内容に同意します

回答2件

普通にサーバー側でbase64エンコードしたデータを発行してもらって
テキストとして受け渡せばいいのでは？

投稿2017/12/05 02:51

yambejp

総合スコア114843

nobodytolove123

2017/12/05 02:53

ご回答ありがとうございます！早速やってみます。そのテキストデータをimg.src = base64とすれば表示できますか？

行動規範の内容に同意します

ベストアンサー

無理にJSON化などせず, そのまま画像データをHTMLに渡すのが良かろうと思います.
例えばHTMLに"Buffer"文字列が直接渡されたものとすれば次のようになりましょう.

JavaScript
1//元々のJPEGデータ文字列
2const bin = "ff d8 ff e0 00 10 4a 46 49 46 00 01 01 00 00・・・";
3//区切り文字で配列に分割
4const strs = bin.split(" ");
5//文字列の配列を数値の配列に変換
6const arr = strs.map(str => parseInt(str, 16));
7//数値の配列を型付き配列に変換
8const typedArr = new Uint8Array(arr);
9//型付き配列内のJPEGデータを元にBlob(≒ファイル)を生成
10const blob = new Blob([arr], {type: "image/jpeg"});
11//Blob画像をimg要素に読み込み可能とするためにURL化する
12const url = URL.createObjectURL(blob);
13//生成したURLをimg要素に設定する
14image.src = url;
15