ответ данных изображения от jquery .ajax в новый вызов ajax?

Question

Я пытаюсь связать ImageOptim API с OCR.space API. Оба отличных API, кстати, я их очень рекомендую! Проблема заключается в том, что OCR api не принимает изображения более 1 мб или 2600x2600 пикселей на свободном уровне, и поэтому многие источники должны быть оптимизированы перед отправкой.

Im работает этот JQuery Ajax вызов ImageOptim из Кордовы завернутых HTML файл:

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

Обратите внимание: Вары здесь не установлены, но я держу их вместе в этом вопросе для ясности.

Ответ от этого вызова:

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

то есть работа вызова, а параметр изображения не является допустимым изображением.

Любые идеи о том, как передать возвращенную строку, чтобы она читалась как изображение для следующего вызова api?

Answer 1

Обычно, когда вы загружаете файлы с помощью FormData вы просто передать ссылку на файл, как form.append('myfile',$("#fileInput").files[0]) и браузер обрабатывает кодирование вещи за экранами .Это вручную преобразует файл в байт-поток и готовит соответствующие границы, чтобы помочь серверу определить, где начинается и изображения заканчивается

но вот сценарий отличается у вас нет файла, связанный с каким-либо физическим контролем файла вместо ИТСОВ созданного динамически, и вы получите потоковый этот счет .TO для вышеприведенного факта нужно сказать браузеру явно что это независимый сырой бинарный материал и должен рассматриваться как таковой

Объект 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);} 
    }); 
}