javascript - 通过 AJAX 调用生成图像时，图像大小 (.bin) 加倍

Question

我正在尝试从 AngularJS 用 Swing 编写的 REST API 生成 .bin 文件。以下是代码。

var options = {
  url: 'http://example.com/imageAPI',
  method: 'POST',
  headers: {
    'Authentication': headerAndPostParams[0],
    'Content-Type': 'application/json',
    'Accept': 'application/octet-stream'
  },
  responseType: 'arraybuffer',
  data: {
    uniqueId: headerAndPostParams[1],
    imageName: headerAndPostParams[2],
    clientMacAddress: headerAndPostParams[3]
  }
};
return $http(options).then(function(sucessResponse) {
  if (sucessResponse.data != "" && sucessResponse.data.responseCode === undefined) {
    download(sucessResponse.data, "image.bin", "application/octet-stream");
    return true;
  }
  return false;
});

这是响应 header
访问控制允许来源:http://localhost:8080
内容处置:附件；文件名=cns3xxx_md_2.6.9_ac_aa_33_dd_aa_35.bin
内容长度:7864320
内容类型:应用程序/八位字节流
日期:2017 年 4 月 18 日星期二 06:38:35 GMT
变化:起源
访问控制允许凭证:true
上面的代码工作正常。但问题是从 API 发送的图像大小为 7.5 MB，而从我的 UI 端生成的图像大小为 13.5 MB。在将其提供给下载功能之前，我们是否必须执行任何解码。
(注意:下载是来自 donwload.js 库的函数。)

Answer 1

找到了解决方案。实际上 $http 服务默认将响应更改为文本。这使得图像的大小加倍。为了避免它，我们需要添加以下参数。

响应类型:“blob”

$http({
  url: 'http://example.com',
  method: 'POST',
  responseType: "blob",
  headers: {
    'Authentication': headerAndPostParams[0],
    'Content-Type': 'application/json',
    'Accept': 'application/octet-stream'
  },
  data: {
    uniqueId: headerAndPostParams[1],
    imageName: headerAndPostParams[2],
    clientMacAddress: headerAndPostParams[3]
  }
}).then(function(sucessResponse) {
  if (sucessResponse.data != "" && sucessResponse.data.responseCode === undefined) {
    var blob = new Blob([sucessResponse.data], {
      type: "application/octet-stream"
    });
    download(blob, headerAndPostParams[2]);
    return true;
  }
  return false;
}, function(response) {
  return false;
});