AJAX запрашивает изображение png / jpeg с сервера (NodeJS + Express) и показывает его в формате html

Question

В основном мне нужно получить изображение png или jpeg с моего сервера и показать его внутри тега img на моем сайте.

Моя архитектура выглядит так:

Клиент - Сервер1 (мой сервер) - Сервер2 (некоторый публичный сервер)

1. Клиент отправляет запрос Ajax на сервер 1.
2. Сервер1 отправляет запрос на Сервер2.
3. Сервер2 отправляет изображение обратно на Сервер1.
4. Сервер1 отправляет изображение обратно клиенту.

Код клиента:

$("#testButton").click(function() {
  $.ajax({
    method: "get",
    async: false,
    url: "/test"
  }).done(function (response){
    alert(response.imageData);
    $("#resultImage").attr("src", "data:image/png;base64," + response.imageData);
  });
});

Код сервера1:

router.get('/test', function(req, res, next){
  var url = 'https://ion.gemma.feri.um.si/ion/services/geoserver/demo1/wms?service=WMS&version=1.1.0&request=GetMap&layers=demo1%3Amaribor-dof25&bbox=546631.6237364038%2C156484.86830455417%2C550631.7865026393%2C160485.0310707898&width=767&height=768&srs=EPSG%3A3794&format=image%2Fjpeg';
  request(url, function (error, response, body) {
    console.log('error:', error);
    console.log('statusCode:', response && response.statusCode);
    console.log(response.headers['content-type']);
    console.log(body);
    return res.json({ imageData: body});
  });
});

Если я ввожу указанный выше URL-адрес непосредственно в img src, он отображается правильно. Изображение также отображается правильно при вводе URL-адреса непосредственно в браузер.

Когда я получаю данные изображения обратно на мой клиент с сервера1, данные выглядят так:

Есть идеи как это исправить?

Answer 1

Поскольку вы создаете кодированное изображение base64 на внешнем интерфейсе, серверная часть должна возвращать кодированное изображение base64.

Вы возвращаете изображение в формате utf8, что, конечно, не сработает. utf8 - кодировка по умолчанию при использовании пакета request.

Для этого вы можете использовать encoding свойство пакета request. Или передайте encoding: null и преобразуйте body в строку base64, используя .toString('base64')

request({ url, encoding: 'base64' }, function (error, response, body) {
    console.log('error:', error);
    console.log('statusCode:', response && response.statusCode);
    console.log(response.headers['content-type']);
    console.log(body);
    return res.json({ imageData: body});
});

Теперь response.imageData - это кодированная строка base64, которую можно использовать с: data:image/png;base64,

Имейте в виду, что вы пишете png на передней панели. Если вы собираетесь работать с различными расширениями, вы можете отправить полный src с сервера:

// 'content-type' must not be image/png or image/jpeg, improve the logic
// I'll leave that to you.
const src = `data:${response.headers['content-type']};base64,${body}`;

return res.json({ src });

Другой вариант - удалить ajax и отправить изображение напрямую, без base64.

передний

$("#resultImage").attr("src", "/test");

назад

app.get('/test', (req, res) => {
   let url = 'https://ion.gemma.feri.um.si/ion/services/geoserver/demo1/wms?service=WMS&version=1.1.0&request=GetMap&layers=demo1%3Amaribor-dof25&bbox=546631.6237364038%2C156484.86830455417%2C550631.7865026393%2C160485.0310707898&width=767&height=768&srs=EPSG%3A3794&format=image%2Fjpeg';

   request(url).pipe(res);
});