用javascript的google ocr文本检测

时间:2018-07-22 06:44:20

标签: javascript google-cloud-vision

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

我目前正在从事一个项目,该项目使用网络摄像头捕获网站上的图像,并且希望使用Google OCR在捕获的图像上提取文本。我尝试向Goggle视觉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." } ] } ] } }

我该如何解决这个问题?

1 个答案:

答案 0 :(得分:0)

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

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

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