javascript - 图像数据从 jquery .ajax 响应到新的 ajax 调用？

Question

我正在尝试将 ImageOptim API 链接在一起与 OCR.space API 。 顺便说一句，这两个 API 都很棒，我强烈推荐它们!但目前的问题是，OCR api 在免费层中不接受超过 1 mb 或 2600x2600 像素的图像，因此许多源在发送之前需要进行优化。

我正在从 cordova 包装的 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. 这(根据我的经验)在浏览器中会失败，因为跨域调用在浏览器中被阻止，但来自 cordova 的调用未被阻止。
2. 尚未添加 OCR 兼容压缩(但需要文件大小和维度参数)

此调用的输出是作为字符串的原始 png，即在文本编辑器中打开 .png 文件时得到的内容。我已经尝试了很多方法来处理这个问题，但无法理解如何在下一个 ajax 调用中使用这些数据(如下)，是否需要将其保存到磁盘然后上传，如果是这样 - 如何？ (因为我尝试将其写入本地存储，但它仍然会被视为字符串)。

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…"

即调用有效，但图像参数不是有效图像。

关于如何处理返回的字符串，以便它可以作为下一个 api 调用的图像读取，有什么想法吗？

Answer 1

通常，当您使用 formData 上传文件时，您只需传递文件引用，例如 form.append('myfile',$("#fileInput").files[0])浏览器处理屏幕后面的编码内容。它手动将文件转换为字节流并准备适当的边界以帮助服务器区分图像的开始和结束位置

但这里的情况有所不同，您没有将文件绑定(bind)到任何物理文件控件，而是动态创建文件，并且您获得该文件的字节流。为了解释上述事实，您需要明确地告诉浏览器它是一个独立的原始二进制文件，应该这样对待

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