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

Question

我正在调用一个外部 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) {

        }
    });

如果有人可以帮助阐明我需要如何或什么来格式化响应，以便我可以将其显示在页面上，我们将不胜感激。

Answer 1

编辑：我已经尝试过但无法让它与 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 请求相同的结果。