如何用JavaScript/JQuery在HTML中展示PNG二进制结果为图片

核心问题在于你当前的AJAX请求默认把二进制响应解析成了UTF-8字符串，导致图片数据被损坏，后续所有转码操作都基于错误的数据，自然无法生成有效的图片URL。

解决方案：指定AJAX响应类型为Blob #

修改你的AJAX配置，添加xhrFields参数指定响应类型为blob，让浏览器直接返回原始的二进制Blob对象，而非字符串。

完整代码示例：

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,
  // 关键配置：让响应以Blob类型返回
  "xhrFields": {
    "responseType": "blob"
  }
};

$.ajax(settings).done(function (response) {
  // 方式1：用URL.createObjectURL生成临时URL（性能更优）
  const imageUrl = URL.createObjectURL(response);
  $('#ml').attr('src', imageUrl);

  // 方式2：用FileReader转成DataURL（适合需要持久化base64的场景）
  // const reader = new FileReader();
  // reader.onload = function(e) {
  //   $('#ml').attr('src', e.target.result);
  // };
  // reader.readAsDataURL(response);
});

为什么之前的方法无效？ #

默认情况下，jQuery的AJAX会将响应按照UTF-8编码解析为字符串，但图片的二进制数据包含大量无法被UTF-8正确编码的字节，这些字节会被替换为无效的占位符（比如�）。此时无论你用btoa、第三方Base64库还是转ArrayBuffer，都是基于已经损坏的字符串数据，无法还原出正确的图片内容。

额外提示 #

使用URL.createObjectURL生成的临时URL不需要手动编码，性能比FileReader转DataURL更高。如果不需要持久化base64字符串，优先使用这种方式。

内容的提问来源于stack exchange，提问作者NekoLopez