使用javascript从python CGI返回图像

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

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:

中的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
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

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,则前端代码只需更新所显示图像的src属性:

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;
}

img元素赋予新的src值时,浏览器将自动向该URL发出请求,并尝试检索图像,该图像将加载到您的页面上,以替换先前的图像。但是,您必须修改Python脚本,才能使用名为image的请求参数,该参数包含一个字符串。 CGI有一种简单的方法来访问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