Задать вопрос
@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 энкодить или еще как-то?
  • Вопрос задан
  • 1194 просмотра
Комментировать
Подписаться 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 FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
JavaScript Developer
AppsTrain.io
от 80 000 до 180 000 ₽
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Drupal. Перенос сайта с домена на поддомен
05 нояб. 2024, в 16:31
500 руб./за проект
Разработать макет для email рассылки
05 нояб. 2024, в 16:24
5000 руб./за проект
Виджет для OBS связанный с FaceIT
05 нояб. 2024, в 16:12
10000 руб./за проект
Ещё заказы