使用javascript从python CGI返回图像

Question

我正在使用Python CGI创建一个显示标题，下拉菜单和图像的网页。 我希望能够从下拉菜单中选择一个选项（也希望摆脱“提交”并在选择选项时运行），触发我的python代码（runthis.py）并更新图像网页。 我想这样做没有打开新标签，希望没有刷新页面。 目前我运行此.py文件来获取我的html：

#!C:\Python27\python

print "Content-type: text/html"
print

print "<html>"
print "<head>"
print "<title>Tab Title</title>"

print "</head>"
print '''<body bgcolor="#ccffcc">'''

print '''<h1 align="center">Page Heading</h1>'''

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文件完成的：

#!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>
<title>Tab Title</title>

</head>
<body>
  <body bgcolor="#ccffcc">
  <h1 align="center">Page Heading</h1>

  <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文件：

<html>
<head>
<title>Tab Title</title>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>

</head>
<body>

<script>
  function changeImage(imgName)
{
     jQuery.get('/cgi-bin/dropdown.py', function(data) {
     image = document.getElementById('imgDisp');
     image.src = data;
    })

  }
</script>


  <body bgcolor="#ccffcc">
  <h1 align="center">Page Heading</h1>

  <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”代码现在看起来像：

#!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参数方法 - 不知道如何完成。 任何更多的建议将不胜感激！

Answer 1

为了回答您编辑的问题，解决方案实际上可以更简单：

function changeImage(imgName) {
     jQuery.get('/cgi-bin/dropdown.py', function(data) {
     image = document.getElementById('imgDisp');
     image.src = data;
    })
}

在这里，您要对Python脚本发出异步请求，并等待返回一些数据。 但是，您可以将Python脚本视为一个独立服务，可以为（动态生成的）图像映射一组唯一的参数。 这需要您的Python脚本将图像输出到浏览器，而不是通过CGI返回图像数据：

imgdata = StringIO.StringIO()
fig.savefig(imgdata, format='png')
imgdata.seek(0)

#Something along these lines
print "Content-Type: img/png\n"
imgdata.seek(0)
print imgdata.read()

一旦您确信对Python脚本的HTTP请求提供了有效的PNG，您的前端代码只需更新您正在显示的图像的src属性：

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中传递的这些参数值：

#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\n"
        print """<html><body>No image name was specified!</body></html>"""

这个页面是一个很好的资源，你可以查看： http ： //lost-theory.org/python/dynamicimg.html

使用javascript从python CGI返回图像

问题描述

1 个解决方案

解决方案1
3 已采纳 2014-02-11 18:31:55

使用javascript从python CGI返回图像

问题描述

1 个解决方案

解决方案1 3 已采纳 2014-02-11 18:31:55

解决方案1
3 已采纳 2014-02-11 18:31:55