使用javascript从python CGI返回图像答案

【问题标题】：Return Image from python CGI using javascript使用javascript从python CGI返回图像
【发布时间】：2014-02-10 21:33:20
【问题描述】：

我正在使用 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（我对此一无所知）。有人对我需要输入的代码块有什么建议吗？

谢谢！

编辑

根据下面的 cmets，我正在尝试实现这个 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 参数方法——不知道是怎么做到的。任何更多的建议将不胜感激！

【问题讨论】：

我认为最好的设计是创建一个纯 HTML 表单，允许用户指定图像参数（通过表单），然后使用 JavaScript 解析输入，将表单值打包成对象，并将其作为 POST 变量发送到单独的 Python 脚本。 Python 脚本的唯一职责是读取对象/参数并输出适当的标题和图像数据。当用户单击“提交”时，您的 Javascript 可以向 Python 发送 AJAX 请求，抓取图像，并使用它在 DOM 中创建一个新的img 元素。
最好将表示与逻辑分开。您的“后端”代码应该只需要接受参数并显示响应（图像）。也许最简单的方法是为您的脚本设计一个 URL 参数方案（例如/cgi-bin/myscript.py?option=1），并使用 FieldStorage 类访问 CGI 脚本中的参数值（请参阅docs.python.org/2/library/cgi.html#id1）。这种设计的价值在于前端的简单性。
在这种情况下，您的 JavaScript 代码的目标是读取表单值，构建 Python 脚本的自定义 URL（请参阅stackoverflow.com/questions/6566456），并设置 src 属性该 URL 的图像元素。
如果我在最后一条评论中使用了javascript方案，我如何触发主html文件中的python代码？如果我理解，我会选择一个下拉选项，然后触发 javascript 以创建一个 url——但是我该如何运行我的 python 脚本呢？另外，我在哪里设置 src 属性——在我的 python 脚本中？不知道我如何返回数据。谢谢！

标签： javascript python html matplotlib cgi

【解决方案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

【讨论】：