问题

我正在使用这个AI服务的API，允许我编辑图像。我上传一张图像，然后通过该API服务提供的编辑进行处理，最后将结果下载，这是代码：

var form = new FormData();
form.append("api_token", "XXXXXXX1234AAAAAA");
form.append("trans_id", "XXXXBBBBVVVVVVVV"); //处理后的图像ID

var settings = {
  "url": "https://api-service.vanceai.com/web_api/v1/download?api_token=XXXXXXX1234AAAAAA",
  "method": "POST",
  "timeout": 0,
  "processData": false,
  "mimeType": "multipart/form-data",
  "contentType": false,
  "data": form
};

$.ajax(settings).done(function (response) {
        console.log(response); // 二进制结果
});

这是不是Blob的二进制结果。

我想在img标签中显示这个结果：

<img id="ml" src="">

我尝试了以下方法：

$("#ml").attr("src", 'data:image/png;base64,' + btoa(response));

$("#ml").attr("src", 'data:image/png;base64,' + btoa(encodeURIComponent(response)));

$("#ml").attr("src", 'data:image/png;base64,' + btoa(unescape(encodeURIComponent(response))));

但是我得到了以下错误：

或者

其中base64代码未正确显示。

我还尝试将其转换为Blob：

var blob = new Blob([response], {type: 'image/png'});
var reader = new FileReader();

reader.onload = function (e) {
   $('#ml').attr('src', e.target.result);
};

reader.readAsDataURL(blob);

但是我得到了相同的错误：

我使用了一个库：https://github.com/dankogai/js-base64

var emk = Base64.encode(response);
$("#ml").attr("src", 'data:image/png;base64,' + emk);

但结果仍然相同。

最后，我还尝试将此结果转换为Arraybuffer：

var ab = new ArrayBuffer(response.length);
var bb = new Blob([ab],{type: "image/png"});

var reader = new FileReader();
reader.readAsDataURL(bb); 
reader.onloadend = function() {
  var base64data = reader.result;                
  $("#ml").attr("src",base64data);
}

但是仍然出现相同的错误：

我希望能够得到您的帮助。

var form = new FormData();
form.append("api_token", "XXXXXXX1234AAAAAA");
form.append("trans_id", "XXXXBBBBVVVVVVVV"); //processed image ID

var settings = {
  "url": "https://api-service.vanceai.com/web_api/v1/download?api_token=XXXXXXX1234AAAAAA",
  "method": "POST",
  "timeout": 0,
  "processData": false,
  "mimeType": "multipart/form-data",
  "contentType": false,
  "data": form
};

$.ajax(settings).done(function (response) {
        console.log(response); // binary result
});

<img id="ml" src="">

$("#ml").attr("src",'data:image/png;base64,'+ btoa(response) );

$("#ml").attr("src",'data:image/png;base64,'+ btoa(encodeURIComponent(response)) );

$("#ml").attr("src",'data:image/png;base64,'+ btoa(unescape(encodeURIComponent(response))) );

var blob = new Blob([response], {type: 'image/png'});
		var reader = new FileReader();

		reader.onload = function (e) {
		   $('#ml').attr('src', e.target.result);
		};

		reader.readAsDataURL(blob);

var emk = Base64.encode(response);
$("#ml").attr("src",'data:image/png;base64,'+ emk );

  var ab = new ArrayBuffer(response.length);
  var bb = new Blob([ab],{type: "image/png"});

  var reader = new FileReader();
	  reader.readAsDataURL(bb); 
	  reader.onloadend = function() {
	  var base64data = reader.result;                
		  //console.log(base64data);

		  $("#ml").attr("src",base64data);
	  }

答案1

得分: 2

以下是您要的代码翻译部分：

你想将响应作为二进制数据来处理，而不是作为UTF-8文本。
为此，由于您使用jQuery的 [`ajax()`][1] 方法，您需要在`settings`对象中添加一个新字段：

```js
var settings = {
  "url": "https://api-service.vanceai.com/web_api/v1/download?api_token=XXXXXXX1234AAAAAA",
  "method": "POST",
  "timeout": 0,
  "processData": false,
  "mimeType": "multipart/form-data",
  "contentType": false,
  "data": form,
  // 添加这个新字段以将响应作为二进制数据来处理
  xhrFields: {
    responseType: "blob"
  }
};

然后在您的 done 回调函数中，response 将是一个 Blob 对象。您可以使用 URL.createObjectURL() 方法创建一个指向该 Blob 数据的符号链接。如果在显示图像后您不再需要 Blob 数据，可以撤销该符号链接。

$.ajax(settings).then((response) => {
  const url = URL.createObjectURL(response);
  $("#ml")
    .prop("src", url)
    .one("load", () => URL.revokeObjectURL(url));
});

<details>
<summary>英文:</summary>

You want to consume that response as binary data, not as UTF-8 text.  
To do so, since you use jQuery&#39;s [`ajax()`][1] method, you need to pass a new field in the `settings` object:

```js
var settings = {
  &quot;url&quot;: &quot;https://api-service.vanceai.com/web_api/v1/download?api_token=XXXXXXX1234AAAAAA&quot;,
  &quot;method&quot;: &quot;POST&quot;,
  &quot;timeout&quot;: 0,
  &quot;processData&quot;: false,
  &quot;mimeType&quot;: &quot;multipart/form-data&quot;,
  &quot;contentType&quot;: false,
  &quot;data&quot;: form,
  // Add this new field to consume the response a binary data
  xhrFields: {
    responseType: &quot;blob&quot;
  }
};

Then in your done callback, response will be a Blob object. You will be able to create a symlink to that Blob's data with the URL.createObjectURL() method. If after displaying that image you don't need the Blob data anymore, you can revoke the symlink.

$.ajax(settings).then((response) => {
  const url = URL.createObjectURL(response);
  $("#ml")
    .prop("src", url)
    .one("load", () => URL.revokeObjectURL(url));
});