首页 > 解决方案 > javascript google ocr 文本检测与 php

问题描述

我是 Google Cloud Console 的新手。我已经能够创建我的 API 密钥和服务帐户,然后我下载了一个 json 文件。

我目前正在开发一个使用网络摄像头在网站上捕获图像的项目,我希望使用 Google OCR 来提取捕获图像上的文本。我尝试向 Goggle vision API URL 发出 ajax 发布请求:

<!Doctype html>
<html>
 <head>
   <script type="text/javascript" src="assets/js/jquery-1.11.1.min.js"></script>
<!--Bootstrap js-->
   <script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
   <script type="text/javascript" src="assets/js/ui/loader-preview.js"></script>
   <script>
     $(function () {
       $(document).ready( function () {
          var options = {
 "requests": [
   {
     "image": {
       //"content": "<?php echo $src;?>",
      "source":{
        "imageUri":"https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"
      },
     },
     "features": [
       {
         "type": "TEXT_DETECTION",
         "maxResults":1,
         "return":'text content',
         'rtype':'str'
       }
     ]
   }
 ]
};
         $.ajax({
           type: 'post',
           url: 'https://vision.googleapis.com/v1/images:annotate?key=MY_API_KEY',

           dataType:'JSON',
           data:JSON.stringify(options),
          // body:JSON.stringify(options),
           // data:options,
           // body:options,
           before: showLoader('Login in....'),
           success: function(response,status,xhr) {
               var msg=response;
             var p = $('<p></p>');
             var str = 'Response received <br />';
             var keys = [];
            for(var k in response) keys.push(k);

            alert("total " + keys.length + " keys: " + keys);
               str += response[k];

             p.html(str+status);

             $('body').append(p);
           },
           error: function(xhr,req,error) {
               hideLoader();
               var err =  xhr.responseText;
               var p = $('<p></p>');
               p.html("Error! "+err);
           $('body').append(p);
           },
             after: hideLoader()
         });
         return false;
       });
     });
   </script>
 </head>
 <body>

 </body>
 </html>

但我总是收到这个错误:

Error! { "error": { "code": 400, "message": "Invalid JSON payload received. Unknown name \"{\"requests\":[{\"image\":{\"source\":{\"imageUri\":\"https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png\"}},\"features\":[{\"type\":\"TEXT_DETECTION\",\"maxResults\":1,\"return\":\"text content\",\"rtype\":\"str\"}]}]}\": Cannot bind query parameter. Field '{\"requests\":[{\"image\":{\"source\":{\"imageUri\":\"https://www' could not be found in request message.", "status": "INVALID_ARGUMENT", "details": [ { "@type": "type.googleapis.com/google.rpc.BadRequest", "fieldViolations": [ { "description": "Invalid JSON payload received. Unknown name \"{\"requests\":[{\"image\":{\"source\":{\"imageUri\":\"https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png\"}},\"features\":[{\"type\":\"TEXT_DETECTION\",\"maxResults\":1,\"return\":\"text content\",\"rtype\":\"str\"}]}]}\": Cannot bind query parameter. Field '{\"requests\":[{\"image\":{\"source\":{\"imageUri\":\"https://www' could not be found in request message." } ] } ] } }

我试图改变这部分代码

 dataType:'JSON',
           //data:JSON.stringify(options),
          // body:JSON.stringify(options),
            data:options,
            body:options,

然后我得到这个错误:

Error! { "error": { "code": 400, "message": "Invalid JSON payload received. Unknown name \"requests[0][image][source][imageUri]\": Cannot bind query parameter. Field 'requests[0][image][source][imageUri]' could not be found in request message.\nInvalid JSON payload received. Unknown name \"requests[0][features][0][maxResults]\": Cannot bind query parameter. Field 'requests[0][features][0][maxResults]' could not be found in request message.\nInvalid JSON payload received. Unknown name \"requests[0][features][0][return]\": Cannot bind query parameter. Field 'requests[0][features][0][return]' could not be found in request message.\nInvalid JSON payload received. Unknown name \"requests[0][features][0][rtype]\": Cannot bind query parameter. Field 'requests[0][features][0][rtype]' could not be found in request message.\nInvalid JSON payload received. Unknown name \"requests[0][features][0][type]\": Cannot bind query parameter. Field 'requests[0][features][0][type]' could not be found in request message.", "status": "INVALID_ARGUMENT", "details": [ { "@type": "type.googleapis.com/google.rpc.BadRequest", "fieldViolations": [ { "description": "Invalid JSON payload received. Unknown name \"requests[0][image][source][imageUri]\": Cannot bind query parameter. Field 'requests[0][image][source][imageUri]' could not be found in request message." }, { "description": "Invalid JSON payload received. Unknown name \"requests[0][features][0][maxResults]\": Cannot bind query parameter. Field 'requests[0][features][0][maxResults]' could not be found in request message." }, { "description": "Invalid JSON payload received. Unknown name \"requests[0][features][0][return]\": Cannot bind query parameter. Field 'requests[0][features][0][return]' could not be found in request message." }, { "description": "Invalid JSON payload received. Unknown name \"requests[0][features][0][rtype]\": Cannot bind query parameter. Field 'requests[0][features][0][rtype]' could not be found in request message." }, { "description": "Invalid JSON payload received. Unknown name \"requests[0][features][0][type]\": Cannot bind query parameter. Field 'requests[0][features][0][type]' could not be found in request message." } ] } ] } }

我怎么解决这个问题?

标签: javascriptgoogle-cloud-vision

解决方案


您还需要指定您在请求中发送的数据是 JSON 格式:

// (...)
dataType: 'JSON',
contentType: 'application/json',
data: JSON.stringify(options),
// (...)

另外,请注意,您应该从功能中删除“return”和“rtype”键,否则会出现另一个错误。


推荐阅读