使用Django在html文件中绘制图形 [英] Plot a graph in the html file using Django
问题描述
最初，我将图像存储在字符串缓冲区用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）
＃在HTTP响应中发送缓冲区使用mime类型的浏览器image / png set
return HttpResponse（buffer.getvalue（），mimetype =image / png）
但是，我需要在html文件中实现一些javaScript来添加更多的应用程序。因此，我决定将图像保存在一个变量中，并将其绘制在html文件中：
＃serialize to HTTP响应
response = HttpResponse（buffer.getvalue（），mimetype =image / png）
返回render_to_response（'eQL / dev / showImage.html'，{'response'：response}）
我的问题是，我不知道如何在html文件中表示它，因为我没有找到任何例子。任何人都知道答案？
提前感谢
您是否意味着在您的第一个实施中，您的回复是一个PNG文件，但现在您希望将响应作为HTML文件，包含该图像？
首先您需要将响应MIME类型从 image / png 更改为 text / html 或类似文件。
其次，我不知道为什么你传递一个HttpResponse对象（包含PNG数据）到模板中。模板甚至可以读了吗？当然你只是想传递原始的PNG数据，而不是一个HttpResponse对象。
最后，如何做到这一点。你可能知道，HTML在嵌入图像上并不是那么好。与普通网站一样，您可以在页面中添加文本，但如果您想要一个图像，则需要单独的文件，并使用< img src =.../> 元素。这是动作动作的：这意味着您需要设置两个单独的URL（一个用于PNG，一个用于HTML），它们彼此独立运行（您不能只有一个代码;您需要一个处理程序用于生成PNG，另一个用于生成HTML），并将HTML链接到PNG URL。
如果这太难了，还有另一种出路，但这有点黑客：数据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，，并将其设置为img src的URL。换句话说，将Base64编码的字符串传递给Django的模板引擎，并将该URL作为模板中img标签的一部分。
I am doing a monitoring system using Django. In my views file, I have defined one class called showImage which collects the information necessary to plot a graph using matplotlib.
At the beginning, I just stored the image in a string buffer to represent it with 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")
However, I need to implement some javaScript in the html file to add more applications. For that reason, I have decided to save the image in a variable and plot it in the html file:
# serialize to HTTP response
response = HttpResponse(buffer.getvalue(), mimetype="image/png")
return render_to_response('eQL/dev/showImage.html', {'response':response})
My question is that I don't really know how to represent it in the html file because I didn't find any example doing it. Any one knows the answer?
Thanks in advance!
Do you mean that in your first implementation, your response was a PNG file, but now you wish to make the response an HTML file instead, containing the image?
Well firstly, you need to change the response MIME type from image/png to text/html or similar.
Secondly, I'm not sure why you are passing a HttpResponse object (containing the PNG data) into the template. Can the template even read that? Surely you just want to be passing the raw PNG data, not a HttpResponse object.
Finally, how to do it. Well as you may know, HTML isn't so great at embedding images. As with normal websites, you can include text in the page, but if you want an image, you need a separate file and link to it using the <img src="..." /> element. This is tricky to do dynamically: it means you need to setup two separate URLs (one for the PNG and one for the HTML), which run independently of one another (you can't just have one piece of code; you need one handler for generating the PNG and the other for generating the HTML), and have the HTML link to the PNG URL.
If that is too hard, there is another way out, but it is a bit hacky: data URLs. They let you include image data in the HTML page itself, so you only need to produce one response. Unfortunately it is not well supported in Internet Explorer pre-9. IE8 supports images less than 32K, IE7 and below don't work. See the example on Wikipedia -- you are aiming to generate something like this:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />
Basically, take the PNG data, and Base64-encode it (use Python's base64 library). Then just put "data:image/png;base64," in front of it, and set that as the URL for the img src. In other words, pass the Base64-encoded string to Django's template engine, and construct the URL as part of the img tag in the template.
这篇关于使用Django在html文件中绘制图形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
