メモ

axios await/async で受信した画像を application/octet-stream でAzure Face APIに送るメモ

Posted on by seigo

axios await/async で受信した画像を application/octet-stream でAzure Face APIに送るメモです。

Azure Face API を Node.js axios await/async でやり取りするメモ

こちらは、JSONデータでURLを指定して送るやり方でした。

今回は Azure Face API で application/octet-stream で送る方法をやってみます。

使うであろうシチュエーション

以前の記事のAzure Face APIでURLの画像指定ができないもの。公開されていない画像がターゲットです。

たとえば、LINE BOTのメッセージ画像のような何かしらのサービス内や、画像の取得には一定の設定が必要でセキュアな場所に置かれた画像が想定されます。

今回のサンプルは、その辺は端折って、Gyazo APIで取得したものを使います。これだと、公開URLなので取得できちゃうんですけど、本来は、先ほどお伝えしたようにクローズドな画像と考えてください。

axios Request Config が大事だった

大事なのは、Request Configで受信データのタイプを設定できるところです。今回は arraybuffer が適切でした。

この設定を行って、画像を読んだときのそのままのデータをAzure Face APIに application/octet-stream で送ればすんなり送れました。

以下の axios の説明です。

axios の Request Config

image

他の設定も面白そう。

サンプルソース

実際のコードはこちらです。

今回は、Gyazo APIで取得したものを使います。

Azure Face APIの部分は、Azure Face APIに公開画像URLを知らせる以前の記事 と同じ対応をします。

ということで、 {{key}} の部分は Azure Face API キー と置き換えてください。

// axiosライブラリを呼び出す
const axios = require('axios');

// 実際にデータを取得する getRequest 関数
async function getRequest() {

  // 何かしらの画像ファイルをAPIから読み込む ///////////////////////////////////////////////////////////////////////

  // 例えば Gyazo の画像
  const IMAGE_URL = 'https://i.gyazo.com/~~~~~~~~~~~~~~~~~~~~~~~~~~~.png';

  let responseImageAPI;
  try {
    // axios はRequest Configで受信データのタイプを設定できる。今回は arraybuffer が適切。
    responseImageAPI = await axios.get(IMAGE_URL,{responseType: 'arraybuffer'});
    console.log('image data get');
  } catch (error) {
    console.log("post Error");
    console.error(error);
  }

  // Face API ///////////////////////////////////////////////////////////////////////

  // エンドポイント
  // 米国西部2の場合は West US 2 なので、 westus2.api.cognitive.microsoft.com
  //
  // 設定
  // returnFaceId true
  // recognitionModel detection_02
  // detectionModel detection_02
  const FACE_API_ENDPOINT_URL = 'https://westus2.api.cognitive.microsoft.com/face/v1.0/detect?returnFaceId=true&returnFaceLandmarks=false&recognitionModel=recognition_02&returnRecognitionModel=false&detectionModel=detection_02';
 
  // サブスクリプションをOcp-Apim-Subscription-Keyヘッダーに
  // JSONで送るのでContent-typeヘッダーにapplication/octet-stream指定

  const config = {
    url: FACE_API_ENDPOINT_URL,
    method: 'post',
    headers: {
      'Content-type': 'application/octet-stream',
      'Ocp-Apim-Subscription-Key':'{{ Key }}'
    },
    data: responseImageAPI.data
  };

  // axios
  try {
      // POSTリクエストで送る
      const responseAzure = await axios.request(config);
      console.log('post OK');
      // データ送信が成功するとレスポンスが来る
      console.log(responseAzure.data);
  } catch (error) {
      console.log('post Error');
      // ダメなときはエラー
      console.error(error);
  }

}

// getRequest を呼び出してデータを読み込む
getRequest();

こちらで、無事、判定が返ってきました。

image

、、
seigo