来自 jquery .ajax 的图像数据响应到新的 ajax 调用？

Question

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

我正在从一个 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. 这（根据我的经验）将在浏览器中失败，因为跨域调用在浏览器中被阻止但不是来自科尔多瓦。
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);}
    }); 
}