Постройте график в html-файле, используя Django

Question

Я делаю систему мониторинга с использованием Django. В моем файле представлений я определил один класс с именем showImage, который собирает информацию, необходимую для построения графика с использованием matplotlib.

В начале я просто сохранил изображение в строковом буфере, чтобы представить его с помощью HttpResponse:

buffer = StringIO.StringIO()
canvas = pylab.get_current_fig_manager().canvas
canvas.draw()
pilImage = PIL.Image.fromstring("RGB", canvas.get_width_height(), canvas.tostring_rgb())
pilImage.save(buffer, "PNG")

# Send buffer in a http response the the browser with the mime type image/png set
return HttpResponse(buffer.getvalue(), mimetype="image/png")

Однако мне нужно реализовать некоторый javaScript в html-файле, чтобы добавить больше приложений. По этой причине я решил сохранить изображение в переменной и отобразить его в html-файле:

# serialize to HTTP response
response = HttpResponse(buffer.getvalue(), mimetype="image/png")   
return render_to_response('eQL/dev/showImage.html', {'response':response})

Мой вопрос в том, что я действительно не знаю, как представить это в html-файле, потому что я не нашел ни одного примера, делающего это. Кто-нибудь знает ответ?

Заранее спасибо!

Answer 1

Вы имеете в виду, что в вашей первой реализации ваш ответ был PNG-файлом, но теперь вы хотите вместо него сделать HTML-файл, содержащий изображение?

Ну, во-первых, вам нужно изменитьответ MIME-типа от image/png до text/html или аналогичный.

Во-вторых, я не уверен, почему вы передаете объект HttpResponse (содержащий данные PNG) в шаблон.Может шаблон даже прочитать это?Конечно, вы просто хотите передавать необработанные данные PNG, а не объект HttpResponse.

Наконец, как это сделать.Как вы, наверное, знаете, HTML не так хорош для встраивания изображений.Как и в случае с обычными веб-сайтами, вы можете добавить текст на страницу, но если вам нужно изображение, вам нужен отдельный файл и ссылка на него с использованием элемента <img src="..." />.Это сложно сделать динамически: это означает, что вам нужно настроить два отдельных URL-адреса (один для PNG и один для HTML), которые работают независимо друг от друга (вы не можете просто иметь один кусок кода; вам нужен один обработчикдля генерации PNG и другой для генерации HTML), и имейте HTML-ссылку на URL PNG.

Если это слишком сложно, есть другой выход, но он немного хакерский: URL-адреса данных .Они позволяют вам включать данные изображения в саму HTML-страницу , поэтому вам нужно получить только один ответ.К сожалению, это не очень хорошо поддерживается в Internet Explorer до 9.IE8 поддерживает изображения размером менее 32K, IE7 и ниже не работают.Посмотрите пример в Википедии - вы стремитесь сгенерировать что-то вроде этого:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />

По сути, возьмите данные PNG и закодируйте их Base64 (используйте библиотеку Python base64 ).Затем просто поместите перед ним «data:image/png;base64,» и укажите его в качестве URL-адреса для img src.Другими словами, передайте строку в кодировке Base64 механизму шаблонов Django и создайте URL как часть тега img в шаблоне.