Javascript 将外部API的图像响应转换为页面上显示的正确格式

我正在调用一个外部API，该API会传回一个图像数据，然后将其呈现在页面上

但是，当我调用此API和console.log响应时，它看起来如下所示：

我对图像及其格式不太熟悉，所以我一直在用谷歌搜索，试图找出如何将此返回类型转换为相关格式，以便在我的页面上显示它，但没有效果

我的API调用如下：

 $.ajax({
        type: 'GET',
        beforeSend: function (xhr) {
            xhr.setRequestHeader('t', ts);
        },
        url: "https://someservice.com/DataService.svc/ConsumerMedia(guid'" + imageQuid + "')/$value",
        data: rBody,
        cache: true,
        contentType: "image/png",
        dataType: "text",
        success: function (data) {
            console.log(data);

            // Convert data to relevant format here
            // Then display image as below

            $('#photo').attr("src", "data:image/png;base64," + data + "");
        },
        error: function (request, error) {

        }
    });

---

如果有人能帮助我了解如何或如何格式化响应，以便在页面上显示，我将不胜感激。

编辑：我已经尝试过，但无法将其与jQuery ajax一起使用（要么它不支持二进制/arraybuffer响应类型，要么我找不到它），但以下使用XHR的代码有效：

var xhr = new XMLHttpRequest();
xhr.open("GET", "https://someservice.com/DataService.svc/ConsumerMedia(guid'" + imageQuid + "')/$value", true);
xhr.responseType = 'arraybuffer';

xhr.onload = function(e) {
    if (this.status == 200) {
        var blob = new Blob([this.response], {type: "image/png"});
        var reader = new FileReader();
        reader.readAsDataURL(blob);
        reader.onloadend = function() {
            $('#photo').attr("src", reader.result);
        }
    }
};

xhr.send();

---

当然，您必须对其进行一些调整，以获得与原始ajax请求相同的结果。

编辑：我已经尝试过，但无法将其与jQuery ajax一起使用（要么它不支持二进制/arraybuffer响应类型，要么我找不到），但是使用XHR的以下代码起到了作用：

var xhr = new XMLHttpRequest();
xhr.open("GET", "https://someservice.com/DataService.svc/ConsumerMedia(guid'" + imageQuid + "')/$value", true);
xhr.responseType = 'arraybuffer';

xhr.onload = function(e) {
    if (this.status == 200) {
        var blob = new Blob([this.response], {type: "image/png"});
        var reader = new FileReader();
        reader.readAsDataURL(blob);
        reader.onloadend = function() {
            $('#photo').attr("src", reader.result);
        }
    }
};

xhr.send();

---

当然，您必须对其进行一些调整，以获得与原始ajax请求相同的结果。

我尝试了您的建议，但我得到了一个错误InvalidCharacterError:String包含无效字符var base64image=window.btoa（数据）在尝试将数据转换为base64时，我尝试了您的建议，但我得到一个错误，它是InvalidCharacterError：当尝试将数据转换为base64时，字符串包含一个无效字符var base64image=window.btoa（数据）