Base 64 Image to ocr.space API Ionic 2 [英] Base 64 Image to ocr.space API Ionic 2

问题描述

我正在尝试将基础64 Jpeg发送到API以进行OCR分析。

可以在此处找到API文档

但是，as在此SO答案中说明，

当我们想要将值作为FORM帖子发布时，我们需要更改
序列化算法并使用内容类型发布数据，
application / x-www-form-urlencoded 。

所以这段代码应该有效：

  var headers = {
'Content-Type'：'application / x-www-form-urlencoded'，
'apikey'：'hel loworld'
}; 
 var data = {
'base64image'：'data：image / png; base64，iVBORw0KGgoAAAANS ...'
} 
 
 $ http（{
方法：'POST'，
 url：'http：//api.ocr.space/parse/image'，
 header：headers，
 data：data，
 transformRequest ：function（obj）{
 var str = []; 
 for（var p in obj）
 str.push（encodeURIComponent（p）+=+ encodeURIComponent（obj [p] ））; 
返回str.join（&）; 
}，
}）
  

工作演示： http://plnkr.co/edit/aPO4UGng7uaMbIqrzc7J

I am trying to send a base 64 Jpeg to an API for OCR analysis.

The API docs can be found here https://ocr.space/ocrapi

The code to save the Image is here:

takePicture() {
    Camera.getPicture({
        destinationType: Camera.DestinationType.DATA_URL,
        targetWidth: 1000,
        targetHeight: 1000,
        encodingType: Camera.EncodingType.JPEG,
        sourceType: Camera.PictureSourceType.CAMERA,
        allowEdit:true }).then((imageData)=>{
        this.base64Image = "data:image/jpeg;base64," + imageData;
    });
 }

However I'm sure this is all fine as copying the base 64 string and sending via postman works fine.

This is how I send the string to the API.

post(val) {
    let headers = new Headers();
    headers.append('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
    headers.append('apikey', 'APIKEY');

    let data = 'base64Image=' + val;
    console.log(data);
    return this.http.post('http://api.ocr.space/parse/image', data, {headers: headers})
        .map(response => response.json());
}

The base 64 string is passed to the val variable.

The given error is : "Not a valid base64 image. The accepted base64 image format is 'data:image/;base64,'."

Odd that it works fine in postman.... can anyone spot what i'm doing wrong?

解决方案

The problem is how you're sending over the data. If you look at the Postman collection with API call examples, you'll see that the base64image is being sent as form-data.

But, as stated in this SO answer,

When we want to post the value as a FORM post, we need to change the serialization algorithm and post the data with the content-type, "application/x-www-form-urlencoded".

So this code should work:

var headers = {
  'Content-Type': 'application/x-www-form-urlencoded',
  'apikey': 'helloworld'
};
var data = {
  'base64image': 'data:image/png;base64,iVBORw0KGgoAAAANS...'
}

$http({
    method: 'POST',
    url: 'http://api.ocr.space/parse/image',
    headers: headers,
    data: data,
    transformRequest: function(obj) {
      var str = [];
      for (var p in obj)
        str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
      return str.join("&");
    },
  })

Working demo: http://plnkr.co/edit/aPO4UGng7uaMbIqrzc7J

这篇关于Base 64 Image to ocr.space API Ionic 2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！