django - 使用 Django 在 html 文件中绘制图表

Question

我正在使用 Django 做一个监控系统。在我的 View 文件中，我定义了一个名为 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")

但是，我需要在 html 文件中实现一些 javaScript 以添加更多应用程序。因此，我决定将图像保存在变量中并将其绘制在 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)，并具有指向 PNG URL 的 HTML 链接。

如果这太难了，还有另一种方法，但它有点hacky:data URLs 。它们允许您在 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,”，并将其设置为img src的URL。换句话说，将 Base64 编码的字符串传递给 Django 的模板引擎，并构建 URL 作为模板中 img 标签的一部分。