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

Question

我正在调用一个外部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（要么它不支持二进制/数组缓冲响应类型，要么我找不到它），但是以下代码使用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请求相同的结果。