質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

91.37%

  • JavaScript

    11195questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Node.js

    1220questions

    Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

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

解決済

回答 2

投稿 2017/12/05 11:36

  • 評価
  • クリップ 2
  • VIEW 87

前提・実現したいこと

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

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

<Buffer ff d8 ff e0 00 10 4a 46 49 46 00 01 01 00 00 48 00 48 00 00 ff e1 00 4c 45 78 69 66 00 00 4d 4d 00 2a 00 00 00 08 00 02 01 12 00 03 00 00 00 01 00 01 ... >

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

2552162552240167470737001100720720025522507669120105102007777042000802118030001010013 ...

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

該当のソースコード

// ejsでJSON文字列されたバイナリデータが入っている。
<%= content %>
    </div>
    <script>
        // バイナリ文字列(記号)
        var doc = document.getElementById('binary');
        // バイナリ配列
        var json = JSON.parse(doc.innerHTML);
        var string = "";
        var toDataURL = "";
        // バイナリ文字列
        for (var i = 0; i < json.data.length; i++) {
            string += String(json.data[i]).toString(16);
        }

        var base64 = btoa(binary_file);
        // DataURL化された文字列
        var DataURL = 'data:image/jpeg;base64,' + base64;
    </script>

試したこと

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

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • defghi1977

    2017/12/05 11:46

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

    キャンセル

  • nobodytolove123

    2017/12/05 11:51

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

    キャンセル

  • nobodytolove123

    2017/12/05 11:52

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

    キャンセル

  • defghi1977

    2017/12/05 11:55

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

    キャンセル

回答 2

+3

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

投稿 2017/12/05 11:51

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/12/05 11:53

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

    キャンセル

checkベストアンサー

+2

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

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


通信効率等を踏まえるのであれば, この流れを壊さないようにNode側とHTML側とで処理を分割します.

投稿 2017/12/05 12:09

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/12/05 12:54

    ご回答ありがとうございます、ソースまで。。。ありがとうございます!!!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

ただいまの回答率

91.37%

関連した質問

同じタグがついた質問を見る

  • JavaScript

    11195questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Node.js

    1220questions

    Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。