從jquery .ajax到新的ajax調用的圖像數據響應？

Question

我正在嘗試將ImageOptim API與OCR.space API鏈接在一起。 順便提一下，這兩個很棒的API都非常值得推薦！ 但是，當前的問題是OCR api在免費層中不接受超過1 mb或2600x2600 px的圖像，因此在發送之前，許多源都需要進行優化。

我從科爾多瓦包裝的html文件運行對ImageOptim的jQuery ajax調用：

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);
});
}; 

請注意：

1. （以我的經驗），由於跨域調用在瀏覽器中被阻止，而不是在科爾多瓦，在瀏覽器中將失敗。
2. 尚未添加與OCR兼容的壓縮（但需要文件大小以及維度參數）

該調用的輸出是作為字符串的原始png，即在文本編輯器中打開.png文件時得到的結果。 我已經嘗試了許多方法來處理此問題，但無法理解如何在下一個ajax調用（如下）中使用此數據，是否需要將其保存到磁盤然后上傳，如果這樣-怎么做？ （因為我嘗試將其寫入localstorage，但仍將其視為字符串）。

OCR.space調用；

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);
    }
});
}

請注意; 此處未設置變量，但為了清楚起見，在此問題中將它們放在一起。

此調用的響應為：

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

也就是說，該調用有效，但是image參數不是有效的圖像。

關於如何處理返回的字符串，以便將其作為下一個api調用的圖像可讀的任何想法？

Answer 1

通常，當您使用formData上傳文件時，您只需傳遞諸如form.append('myfile',$("#fileInput").files[0])類的文件引用，瀏覽器就會處理屏幕后面的編碼內容。它會手動將文件轉換為字節流並准備適當的邊界以幫助服務器區分圖像的開始和結束位置

但是這里的情況有所不同，您沒有將文件綁定到任何物理文件控件，而是動態創建了該文件，並獲得了該字節流。要解決上述事實，您需要明確告訴瀏覽器這是一個獨立的原始二進制文件，應該這樣對待

Blob對象代表不可變的原始數據的類似文件的對象。 Blob表示的數據不一定是JavaScript原生格式。

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);}
    }); 
}