如何基于Django中的表单输入向用户显示生成的图像? [英] How to display generated image to user based on form input in Django?

问题描述

我目前正在使用对象的属性通过matplotlib生成图像，并且能够创建一个在HttpResponse中显示该图像的视图.我使用以下代码片段来做到这一点: http://wiki.scipy.org/Cookbook/Matplotlib/Django .当我导航到domain.com/objectID.png

I'm currently generating an image via matplotlib using the properties of an object, and am able to create a view that displays said image in a HttpResponse. I used the following snippet to do so: http://wiki.scipy.org/Cookbook/Matplotlib/Django. I've also configured my URLs to both generate and display the image successfully when I navigate to domain.com/objectID.png

现在，我想创建一个表单，该表单的输入将用于从matplotlib生成图像.然后，我想在表单的同一页面上将生成的图像显示给用户.

Right now I want to create a form, whose inputs will be used to generate an image from matplotlib. Then I want to display this generated image back to the user on the same page of the form.

我应该如何将表单的输入提供给我的matplotlib图像生成器，然后将生成的图像显示给用户?

How should I feed the inputs of the form to my matplotlib image generator, and then display the resulting image back to the user?

非常感谢您的帮助.

最诚挚的问候

我一直在寻找解决方案，我相信我会在模板中按如下所示显示图像.不确定如何输入变量'img':

EDIT 1: I was looking for a solution, and I believe I would display the image as follows in my template. Not sure how to feed the variable 'img' though:

{% if img %} <img border="0" alt="My Generated Image" src="{{ img }}" /> {% endif %}

推荐答案

假设您要在用户输入x和y坐标后生成一个简单的图形/图像.

Let's say you want to generate a simple graph/image after a user enters the x and y co-ordinates.

要求:

1. jQuery
2. jQuery表单插件

1. jQuery
2. jQuery Form Plugin

HTML:

<form method="POST" action="/generate-image/" id="GenImgForm">
    <input type="text" name="x-coordinate" />
    <input type="text" name="y-coordinate" />
</form>

<!-- Make an empty div where the returned image will be shown -->
<div id="ShowImage"></div>

<script type="text/javascript" src="/static/path/to/jquery.js"></script>
<script type="text/javascript" src="/static/path/to/jquery.form.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        var options = { 
            target: '#ShowImage',
        };        
        $("#GenImgForm").ajaxForm(options);
            return false;
        });
</script>

views.py:

现在，在您的views中，您将必须遵循以下方法:

Now, in your views, you will have to follow this approach:

1. 使用matplotlib生成图像.
2. 将其另存为StringIO对象.
3. 将StringIO对象编码为base64.
4. 将其发送回客户端.

1. Generate an image using matplotlib.
2. Save it as a StringIO object.
3. Encode the StringIO object to base64.
4. Send it back to the client.

看看这个问题.

Take a look at this question.

import cStringIO # use import io in Python 3x
# import base64 Use this in Python 3x

def generate_image(request):
    if request.method == 'POST':
        x_coord = request.POST['x-coordinate']
        y_coord = request.POST['y-coordinate']

        # generate a matplotlib image, (I don't know how to do that)

        sio = cStringIO.StringIO() # use io.StringIO() in Python 3x
        pyplot.savefig(sio, format="PNG")

        encoded_img = sio.getvalue().encode('Base64') # On Python 3x, use base64.b64encode(sio.getvalue())

        return HttpResponse('<img src="data:image/png;base64,%s" />' %encoded_img)
    else:
        # Do something ...

这篇关于如何基于Django中的表单输入向用户显示生成的图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！