如何用JavaScript/JQuery将PNG二进制字符串转Base64并正常显示？

问题核心在于你使用jQuery AJAX请求时，未正确配置响应类型，导致二进制图片数据被错误解析为UTF-8字符串，后续的Base64转换自然会得到损坏的结果。

修正步骤： #

1. 修改AJAX配置，获取正确的二进制数据
   在AJAX的settings中添加xhrFields: { responseType: 'blob' }，让jQuery直接返回Blob类型的响应，避免字符串解析破坏二进制数据：

   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,
     "contentType": false,
     "xhrFields": {
       responseType: 'blob' // 关键配置：指定响应为Blob类型
     },
     "data": form
   };
   
   $.ajax(settings).done(function (response) {
     // 现在response是正确的Blob对象，直接传入渲染函数
     renderImage(response);
   });
   

2. 将Blob转换为img的src属性
   推荐两种高效的实现方式：

   • 方式一：使用FileReader生成DataURL

     function renderImage(blob) {
       var reader = new FileReader();
       reader.onload = function (e) {
         $('#ml').attr('src', e.target.result);
       };
       reader.readAsDataURL(blob);
     }
     

   • 方式二：使用URL.createObjectURL（性能更优，无需读取整个文件）

     function renderImage(blob) {
       var objectUrl = URL.createObjectURL(blob);
       $('#ml').attr('src', objectUrl);
       // 图片加载完成后释放资源（可选但推荐）
       $('#ml').on('load', function() {
         URL.revokeObjectURL(objectUrl);
       });
     }
     

原方法失效原因说明： #

• 未指定responseType时，jQuery默认将响应按UTF-8字符串解析，但PNG图片包含大量不符合UTF-8编码的字节，这些字节会被替换为乱码，导致后续任何转换都无法还原出正确的图片数据。
• 直接调用btoa(response)报错，是因为被破坏的字符串包含无法被Base64编码的非ASCII控制字符。

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