Google Vision API で 400エラーがでたので実施した対応を書く

Google Vision API を使用してアプリを作成している時に、400エラーが返ってきて原因がわからずかなりはまったので、メモを残しておく。

使用している環境

• jQuery 2.2.4
• IDE Cloud9

Google Vision API とは

cloud.google.com
Googleが提供している画像分析のAPI。ラベルの検出や顔検出、OCRなどが可能。
上記サイトで画像をアップロードすることでAPIを試してみることが可能。
以下に、試してみたキャプチャを貼り付ける。

「cat」と判定されている。

「Tennis Racket」と判定されている。(Scoreの低さは絵によるものだと思われる。。)

request に使用するデータ構造

Google のリファレンスには以下の構造で書くと記載されている。

Cloud Vision API のリクエストとレスポンス  |  Google Cloud Vision API ドキュメント  |  Google Cloud Platform

var data ={
  "requests":[
    {
      "image":{
        "content":"/9j/7QBEUGhvdG9...image contents...eYxxxzj/Coa6Bax//Z"
      },
      "features":[
        {
          "type":"LABEL_DETECTION",
          "maxResults":1
        }
      ]
    }
  ]
}

しかし、単純にこの構造でPOSTすると以下のメッセージと400エラーが発生し、非常に悩まされた。

message:"Invalid JSON payload received. ~~~~~
status:"INVALID_ARGUMENT"

そのため、以下のやり方に変更。

var data = {
  requests:[
    {
      image:{
        content: dataURL
      },
      features:{
        type: "LABEL_DETECTION",maxResults: 100
      }
    }
  ]
}

var data_json = JSON.stringify(data);

この方法なら問題なくPOSTが可能となった。原因までちゃんと把握しきれていないが、一旦メモとして残しておく。