показать изображение / JPEG в IMG с JavaScript

Question

показать изображение / JPEG в IMG с JavaScript

0

Скажем, http://example.com/image возвращает сгенерированные данные изображения как image/jpeg с некоторыми дополнительными данными в заголовках ответов. http://example.com/image возвращает сгенерированное изображение, отличающееся для каждого запроса. Генерация изображений несколько случайна (или, по крайней мере, независима от запроса). Ответ содержит дополнительные данные, такие как время создания (но не только).

Мне нужно сделать некоторые операции с данными из заголовков и отобразить изображение. Проблема, с которой я столкнулась, - показать изображение вместе с заголовками. Скажем, я хочу отобразить изображение и распечатать заголовки ответов чуть ниже изображения. Как я могу это сделать?

Я получаю изображение с помощью angularjs и $http. И тогда у меня есть

var imagedata = response.data
var someheader = response.header('some-header')

Отсюда, как мне отображать imagedata? Все, что я нашел, это преобразовать данные в base64. Есть ли способ избежать такого преобразования?

РЕДАКТИРОВАТЬ:

Я забыл упомянуть, что я ищу что-то, что будет работать для старых браузеров, таких как ie8/9. Я знаю, что есть URL.createObjectURL. Но это не похоже на совместимость.

Tuan Pham 30 март 2016, в 16:38

Источник

0

просто нет, вы должны конвертировать его; если вы можете поделиться ответом с заголовком, может быть;
itzmukeshy7 30 март 2016, в 14:08
1

Я не понимаю, что вы пытаетесь сделать. Какие данные поступают в заголовках? Что бы вы хотели сделать с данными? Как это влияет на то, как вы будете отображать изображение?
Martin 30 март 2016, в 14:08
0

@Martin example.com/image возвращает сгенерированное изображение, отличающееся для каждого запроса. Каждое изображение содержит метаданные, отправленные в заголовках. Из-за этого я не могу просто поместить URL в тег img, потому что тогда у меня не будет способа получить метаданные.
Tuan Pham 30 март 2016, в 17:46
0

Итак, если я понимаю, вы пытаетесь создать нечто похожее на placehold.it - где вы генерируете изображения на лету, используя данные, переданные в запрос? Разница в том, что вы специально не хотите, чтобы данные передавались в URL, а скорее через заголовки запроса, верно?
Martin 30 март 2016, в 17:47
0

@Martin Мартин почти. Генерация изображения несколько случайна (или, по крайней мере, не зависит от запроса). Ответ приходит с дополнительными данными, такими как время создания (но не только).
Tuan Pham 30 март 2016, в 17:52
0

Хорошо. Я чувствую, что это не внешний интерфейс, а проблема с бэкэндом. Обработка HTTP-запросов - это работа сервера, а не клиента. Можете ли вы проиллюстрировать вариант использования для меня?
Martin 30 март 2016, в 17:56
0

@Martin Запрос обрабатывается отлично. У меня проблема с отображением изображения вместе с заголовками. http://example.com/image возвращает разные изображения с разными заголовками для каждого запроса. Допустим, я хочу отобразить изображение и напечатать заголовки ответа чуть ниже изображения. Как я могу это сделать?
Tuan Pham 30 март 2016, в 18:01
0

Давайте продолжим эту дискуссию в чате .
Martin 30 март 2016, в 18:03

Показать ещё 6 комментариев

Теги:

javascript

html

angularjs

1 ответ

Ещё вопросы

просто нет, вы должны конвертировать его; если вы можете поделиться ответом с заголовком, может быть;
Я не понимаю, что вы пытаетесь сделать. Какие данные поступают в заголовках? Что бы вы хотели сделать с данными? Как это влияет на то, как вы будете отображать изображение?
@Martin example.com/image возвращает сгенерированное изображение, отличающееся для каждого запроса. Каждое изображение содержит метаданные, отправленные в заголовках. Из-за этого я не могу просто поместить URL в тег img, потому что тогда у меня не будет способа получить метаданные.
Итак, если я понимаю, вы пытаетесь создать нечто похожее на placehold.it - где вы генерируете изображения на лету, используя данные, переданные в запрос? Разница в том, что вы специально не хотите, чтобы данные передавались в URL, а скорее через заголовки запроса, верно?
@Martin Мартин почти. Генерация изображения несколько случайна (или, по крайней мере, не зависит от запроса). Ответ приходит с дополнительными данными, такими как время создания (но не только).
Хорошо. Я чувствую, что это не внешний интерфейс, а проблема с бэкэндом. Обработка HTTP-запросов - это работа сервера, а не клиента. Можете ли вы проиллюстрировать вариант использования для меня?
@Martin Запрос обрабатывается отлично. У меня проблема с отображением изображения вместе с заголовками. http://example.com/image возвращает разные изображения с разными заголовками для каждого запроса. Допустим, я хочу отобразить изображение и напечатать заголовки ответа чуть ниже изображения. Как я могу это сделать?
Давайте продолжим эту дискуссию в чате .

omnichad · Answer 1 · 2016-03-30T12-57-00.000Z

Если вы включили изображение, встроенное в тег IMG, вы должны преобразовать его в base64. Причиной этого является то, что данные двоичного изображения могут содержать любое количество символов и символов, которые недействительны в HTML.

Представьте, что любые данные изображения, которые вы вставляете, станут частью HTML/DOM страницы hte, включая любые кавычки, двойные кавычки, большие/меньшие, чем знаки, в двоичных данных изображения.

ДОПОЛНИТЕЛЬНАЯ ИНФОРМАЦИЯ: В Javascript это будет выглядеть так:

encodedImage = window.btoa(binaryimagedata);

newimg = Document.createElement('img')
newimg.src = "data:text/css;base64,"+encodedImage
document.body.appendChild

Как изображение с типом содержимого image / jpeg может содержать что-то еще, кроме двоичных данных? Можете показать пример?
Не будет Вы должны преобразовать его в Base64, прежде чем помещать его в HTML / DOM.
Хорошо, позвольте мне перефразировать вопрос. Есть ли другой способ отобразить изображение, кроме включения изображения в тег IMG ?
Вы делаете это на стороне клиента с Javascript, правильно? HTML-изображение может указывать только на внешний файл или встроить данные изображения в строку. Я обновил свой ответ кодом JS, чтобы показать, как это будет работать. Если вы выполняете работу на стороне сервера, вы можете просто указать на сгенерированное изображение напрямую (или на сценарий генерации изображения).
Я пытаюсь это сделать, но все еще не работает, однако мне пришлось изменить свой код на что-то вроде этого; var b64Response = btoa (unescape (encodeURIComponent (res.data))); this.setState ({imageContent: "data: image / jpeg; base64," + b64Response}); и мой img похож; <img src = {this.state.imageContent} />