Return Image from python CGI using javascript
我正在使用Python CGI创建一个显示标题,下拉菜单和图像的网页。我希望能够从下拉菜单中选择一个选项(也希望摆脱"提交",只在选择了一个选项时运行),触发我的python代码(runthis.py)并更新图像该网页。我想要执行此操作而无需打开新标签,也希望不刷新页面。目前,我运行此.py文件来获取我的html:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | #!C:\\Python27\\python print"Content-type: text/html" print"<html>" print"<head>" print"Tab Title" print"</head>" print '''<body bgcolor="#ccffcc">''' print '''<h1 align="center">Page Heading''' print '''<form action="/cgi-bin/dropdown.py" method="post" target="_blank">''' print '''<select name="dropdown">''' print '''<option value="Option1" selected>Option1</option>''' print '''<option value="Option2" selected>Option2</option>''' print"</select>" print '''<input type="submit" value="Submit"/>''' print"</form>" print"<img src = /test.png>" print"</body>" print"</html>" |
当我单击"提交"时,将打开一个新标签,显示相同的页面布局,只是一个不同的图像(例如,相同的图像)。这是通过cgi-bin:
中的
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | #!C:\\Python27\\python import cgi,cgitb,os cgitb.enable() os.environ['HOME']='C:\\python_cgi' import matplotlib matplotlib.use('Agg') form = cgi.FieldStorage() if form.getvalue('dropdown'): subject = form.getvalue('dropdown') else: subject ="Not Entered" from matplotlib.figure import Figure from matplotlib.backends.backend_agg import FigureCanvasAgg import StringIO import msvcrt,sys, urllib, base64 fig = Figure(figsize=[4,4]) ax = fig.add_axes([.1,.1,.8,.8]) ax.scatter([1,2],[3,4]) canvas = FigureCanvasAgg(fig) imgdata = StringIO.StringIO() fig.savefig(imgdata, format='png') imgdata.seek(0) uri = 'data:image/png;base64,' + urllib.quote(base64.b64encode(imgdata.buf)) print"Content-Type: text/html" print"""\\ <html> <head> Tab Title </head> <body> <body bgcolor="#ccffcc"> <h1 align="center">Page Heading <form action="/cgi-bin/dropdown.py" method="post" target="_blank"> <select name="dropdown"> <option value="Option1" selected>Option1</option> <option value="Option2" selected>Option2</option> </select> <input type="submit" value="Submit"/> </form> <img src = %s/> </body> </html>""" % uri |
回顾一下-我只想更改当前页面上的图片/图像,而不是打开一个全新的页面。我的直觉告诉我使用javascript(我一无所知)。有没有人对我需要输入的代码块提出建议以进行此类操作?
谢谢!
编辑
根据下面的评论,我正在尝试实现此html文件:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <html> <head> Tab Title <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </head> <body> function changeImage(imgName) { jQuery.get('/cgi-bin/dropdown.py', function(data) { image = document.getElementById('imgDisp'); image.src = data; }) } <body bgcolor="#ccffcc"> <h1 align="center">Page Heading <select name="dropdown" onchange="changeImage(this.value)"> <option value="Option1">Option1</option> <option value="Option2">Option2</option> </select> <img id="imgDisp" src="/test.png" /> </body> </html> |
这可以正确加载我的页面,但是当我从下拉列表中进行选择时什么也没有发生。我希望图像会改变。我的" dropdown.py"代码现在看起来像:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | #!C:\\Python27\\python import cgi,cgitb,os cgitb.enable() os.environ['HOME']='C:\\python_cgi' import matplotlib matplotlib.use('Agg') from matplotlib.figure import Figure from matplotlib.backends.backend_agg import FigureCanvasAgg import StringIO import msvcrt,sys, urllib, base64 fig = Figure(figsize=[4,4]) ax = fig.add_axes([.1,.1,.8,.8]) ax.scatter([1,2],[3,4]) canvas = FigureCanvasAgg(fig) imgdata = StringIO.StringIO() fig.savefig(imgdata, format='png') imgdata.seek(0) uri = 'data:image/png;base64,' + urllib.quote(base64.b64encode(imgdata.buf)) return uri |
我还没有使用url参数方法-不确定如何完成。任何其他建议将不胜感激!
针对您所编辑的问题,解决方案实际上可以更简单:
1 2 3 4 5 6 | function changeImage(imgName) { jQuery.get('/cgi-bin/dropdown.py', function(data) { image = document.getElementById('imgDisp'); image.src = data; }) } |
在这里,您正在向Python脚本发出异步请求,并等待返回一些数据。但是,您可以将Python脚本视为一个独立的服务,可以说将一组唯一的参数映射到(动态生成的)图像。这需要您的Python脚本将图像输出到浏览器,而不是通过CGI返回图像数据:
1 2 3 4 5 6 7 8 9 | imgdata = StringIO.StringIO() fig.savefig(imgdata, format='png') imgdata.seek(0) #Something along these lines print"Content-Type: img/png\ " imgdata.seek(0) print imgdata.read() |
一旦您确信对Python脚本的HTTP请求提供了有效的PNG,则前端代码只需更新所显示图像的
1 2 3 4 5 | function changeImage(imgName) { var url ="http://localhost:8000/cgi-bin/dropdown.py?image=" + imgName; var img = jQuery('#imgDisp'); img.src = url; } |
为
1 2 3 4 5 6 7 8 9 10 11 | #Example CGI script if __name__ =="__main__": params = cgi.FieldStorage() if"image" in params: img = params['image'] #Generate the image and output it with the correct headers else: #Exception handling print"Content-Type: text/html\ " print"""<html><body>No image name was specified!</body></html>""" |
此页面是您可以检阅的重要资源:http://lost-theory.org/python/dynamicimg.html