Как использовать данные изображения UTF-8 (png / jpeg / gif) из ajax вызова для рендеринга изображения пользователю? - PullRequest
Новая
       34

Как использовать данные изображения UTF-8 (png / jpeg / gif) из ajax вызова для рендеринга изображения пользователю?

0 голосов
/ 26 марта 2020

Я использую Bing Maps, где вы можете использовать вызов POST для получения данных изображения (png / jpeg / gif).

https://docs.microsoft.com/en-us/bingmaps/rest-services/imagery/get-a-static-map

Ни один не может Я передаю изображение пользователю и не могу загрузить файл и отобразить его при локальном открытии (загрузка работает, но файл изображения не показывает изображение).

Это код, который обрабатывает данные изображения из запроса POST к API карты Bing: 

// rsp contains UTF-8 image data (png)

let reader = new FileReader();
let file = new File([rsp], 'test.png');

// trying to render to user
reader.onloadend = function () {
    document.getElementById('img').src = 'data:image/png;base64,' + reader.result.substr(37); // substr(37) will get base 64 string in a quick and dirty way
};

reader.readAsDataURL(file);

// trying to make the image downloadable (just for testing purposes)

var a = document.createElement("a"),
    url = URL.createObjectURL(file);
a.href = url;
a.text = "Test";
a.download = 'test.png';
document.body.appendChild(a);

1 Ответ

0 голосов
/ 26 марта 2020

Решением было использование собственного XMLHttpRequest с responseType 'blob' или 'arraybuffer' для обработки ответа двоичного сервера ({ ссылка }). 

    var request = new XMLHttpRequest();
    request.open("POST", bingMapsPOSTEndpoint + '&' + queryParamsString, true);
    request.responseType = "blob";

    request.onload = function (e) {

        var dataURL = URL.createObjectURL(request.response);
        document.getElementById('img').src = dataURL;

    };

    request.send();
...