使用Django在html文件中绘制一个图形

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），并具有指向PNG URL的HTML链接。

如果这太难了，还有另一种出路，但它有点不好：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标记的一部分。