REST APIで取得したイメージをJavascriptで動的追加

目的

REST APIで応答された画像をJavascriptで動的に追加するサーバ側とクライアント側の実装のメモとなります。

条件としては以下のようになります。

• REST APIの応答ボディ部はJSONとする。
• 画像はPNG形式とする。
• 画像のデータはJSON中にBASE64文字列で返却する。
• REST APIはAuthorizationで独自に認証するのでimg src="URL"は利用しにくい

REST API側のコード抜粋

// 画像はファイルから取得
let img_buffer = fs.readFileSync("/tmp/test.png");

let ret;

if (img_buffer) {
  let mime = "image/png";
  // mimeはfile_typeなどを使って自動判定するのが理想
  ret = {
    result: 0,
    data: `data:${mime};base64,` + base64Encode(img_buffer),
  };
}else{
  ret = {
    result : -100,
    message : "FAILED",
  };
}
// JSONで返却
res.send(JSON.stringify(ret));

クライアントのJavascript側のコード抜粋

let id = "追加する親要素のid";
// 前後は省略しているが、REST APIのコールバックメソッド
function (json_res) {
  let img = new Image();
  img.onload = function () {
    // 子要素をクリア
    document.getElementById(id).innerHTML = "";
    // 画像の追加
    document.getElementById(id).appendChild(img);
  };
  if (json_res.result == 0) {
    // Base64エンコードされた画像をsrcに格納
    img.src = json_res.data;
  } else {
    console.error(json_res);
  }
}

感想

どういうわけかREST APIでの画像取得とimgタグ生成の手順を、何回も調査するので記録しておくことにしました。
src="URL"とするのであれば、もっと簡単ですが、画像取得リクエスト自体に別の認証ヘッダをつけたい場合、POSTにしたい場合、応答はJSONとしておきたいなどの場合です。
JSON中のBASE64の文字列であれば一回のリクエストで複数戻せるという事もあります。

※ブラウザ側のキャッシュは効かないので適用シーンは、ケースバイケースで考える必要はあります。