Задать вопрос
@serf10
javascript

Как отобразить в теге img изображение возвращаемое Ajax запросом?

Есть такой запрос. Проходим авторизацию. В результате запроса получаем изображение image/png
$.ajax({
  url: MY_URL_,
  method: "GET",
  contentType: "image/png",
  headers: {
    "Authorization": "Basic YAZRt45aWDa25wDDdFND232YFmVmb23213ffWEa5OA=="
  }
}).then(response => {
	  console.log(response);
}).catch(error => {
   console.log(error);
})


и есть html код

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>ajax image demo</title>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<h1> Hello</h1>

<div id="frame">
<img id="canvas" />
</div>
 
 
</body>
</html>


consloe.log(response) выводит в консоль что-то такое:
605f87de3f20e366636260.png

Вопрос: как отобразить на странице и запихнуть в img то, что возвращает response ? можно ли это за base64 энкодить или еще как-то?
  • Вопрос задан
  • 1096 просмотров
Комментировать
Подписаться 2 Средний Комментировать
Решения вопроса 1
@Dmitriyq
Добавить в конфиг аякса и через URL.createObjectURL отобразить картинку
xhrFields:{ responseType: 'blob' }

$.ajax({
  url: MY_URL_,
  method: "GET",
  xhrFields: {
    responseType: 'blob'
  },
  headers: {
    "Authorization": "Basic YAZRt45aWDa25wDDdFND232YFmVmb23213ffWEa5OA=="
  }
}).then(response => {
    console.log(response);
    $('#canvas').attr('src', URL.createObjectURL(response));
}).catch(error => {
   console.log(error);
})
Ответ написан
2 комментария
2 комментария
Пригласить эксперта
Ответы на вопрос 1
@lolzqq
HTML,CSS,JS,PHP
- можете по get запросу с нужными вам параметрами каждый раз генерить картинку php скриптом библиотекой gd
- с помощью скрипта, который обрабатывает ajax - отдавать url на скрипт генерящий картинку
- получив в ответе этот url - вставляете его, как аттрибут src тега img - картинка прогружается с сервера

альтернативно, если у вас есть просто набор готовых картинок
- скрипт, который обрабатывает ваш ajax запрос - отдаёт url нужной картинки
- получив в ответе этот url - вставляете его, как аттрибут src тега img - картинка прогружается с сервера

На js добавление картинки в канвас проделать можно так:
var canvas=document.querySelector('#canvas');
var img = new Image();
img.src = "face.jpg";
img.onload = function() {canvas.drawImage(img, 10, 10);}
Ответ написан
3 комментария
3 комментария
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
SummerWeb • Ярославль
от 100 000 до 140 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
JavaScript Fullstack
OnClass
от 200 000 до 600 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Настроить перехват https-трафика для android-приложения
25 апр. 2024, в 01:02
10000 руб./за проект
Программа (скрипт) для автоматизации торговли Solana
25 апр. 2024, в 00:45
100 руб./в час
Телеграм-Бот для выдачи конфигов VPN (VLESS/Reality)
25 апр. 2024, в 00:32
10000 руб./за проект
Ещё заказы