CODEWITHSUNDEEP
javascriptjqueryajaximage
Hessius
Hessius

Reputation: 1394

image data response from jquery .ajax into new ajax call?

I'm trying to chain together the ImageOptim API with the OCR.space API. Both great API's by the way, I highly recommend them! The issue at hand though is that the OCR api does not accept images over 1 mb or 2600x2600 px in the free tier and thus many sources will need to be optimised before being sent.

Im running this jQuery ajax call to ImageOptim from a cordova wrapped html file:

var compress = function(image) {
console.log("starting compress");
$.ajax({
    url: "https://im2.io/eX4mp1E4pI/2600x2600,quality=low",
    method: "POST",
    data: {
        file: image
    },
    processData: false,
    contentType: false,
    crossDomain: true
}).done(function(res) {
    window.compressedImg = res;
    formData.append("file", res);
    runOCR();
}).fail(function(jqXHR, textStatus) {
    console.log("Request failed: " + textStatus);
});
};

Please note:

  1. this (in my experience), will fail in the browser due to cross domain calls being blocked in the browser but not from cordova.
  2. OCR compatible compression not added in yet (but would require a file size as well as dimension argument)

The output from this call is a raw png as a string, i.e. what you get when you open a .png file in a text editor. I've tried loads of ways to handle this but cannot understand how to use this data in the next ajax call (below), does it need to be saved to disk and then uploaded, if so - how? (because I tried writing it to localstorage but it would still be treated as a string).

The OCR.space call;

var formData = new FormData();
formData.append("language", "MYLANGUAGE");
formData.append("apikey", "MYAPIKEY");
formData.append("isOverlayRequired", false);
function runOCR2() {
jQuery.ajax({
    url: 'https://api.ocr.space/parse/image',
    data: formData,
    dataType: 'form/multipart',
    cache: false,
    contentType: false,
    processData: false,
    method: 'POST',
    success: function(ocrParsedResult) {
        console.log(ocrParsedResult);
    }
});
}

Please note; Vars are not set here but I keep them together in this question for clarity.

The response from this call is:

responseText: "{\"ParsedResults\":null,\"OCRExitCode\":99,\"IsErroredOnProcessing\":true,\"ErrorMessage\":\"No file uploaded or UR…"

i.e. the call works but the image parameter is not a valid image.

Any ideas on how to trea the returned string so that it is readable as an image for the next api call?

Upvotes: 0

Views: 756

Answers (1)

Vinay
Vinay

Reputation: 7674

Usually when you are uploading files using formData you just pass file reference like form.append('myfile',$("#fileInput").files[0]) and browser handles the encoding stuff behind the screens .It manually converts file to byte-stream and prepares appropriate boundary to help server distinguish where image begins and ends

but here scenario is different you don't have the file bound to any physical file control instead its created dynamically and you get a bytestream of that .To account for the above fact you need to tell browser explicitly that it's a independent raw binary stuff and should be treated as such

A Blob object represents a file-like object of immutable, raw data. Blobs represent data that isn't necessarily in a JavaScript-native format.

var blob = new Blob([res], {type : 'image/png'}); //res is the converted image ImageOptim API

var formData = new FormData();
var fileName = 'myimage.png';    //filename that server will see it as
formData.append('anything', blob, fileName);
formData.append("language", "MYLANGUAGE");
formData.append("apikey", "MYAPIKEY");
formData.append("isOverlayRequired", false);

function runOCR2() {
    $.ajax({
      url: "https://api.ocr.space/parse/image",
      type: "POST",
      cache: false,
      contentType: false,
      processData: false,
      data: formData,
      success: function(response){alert(response);}
    }); 
}

Upvotes: 1

Related Questions