Question

我正在使用JCrop在正在开发的Flask应用中裁剪图像。我正在尝试获取裁剪工具生成的坐标。但是，当我使用request.form.get获取值时，它只返回None。在浏览器中检查HTML代码时，即使已显示，它现在也会显示所包含的值。我很确定我缺少一些关键信息，说明这些信息是如何在后台运行的。所以我希望有人能启发我。

这是我应用中的相关代码。如果需要，我可以轻松提供更多信息：

编辑：从routes.py添加烧瓶代码

编辑＃2：我知道发生了什么，但是我仍然不太明白为什么。所有这些都与我放置保存坐标元素的HTML代码块的位置有关。我最初在页面上拥有的其他表格以外的其他地方都有coord表格。由于进行了一些测试，我发现我没有从coord表单中返回任何数据，但是我使用了另一个表单。因此，一旦我将coord放入上述表格中，我便开始获取数据。我不确定为什么会这样，因为我对HTML的了解有限。

def index():
    form = UploadForm()
    if form.validate_on_submit():
        display = DisplayForm()
        x1 = request.form.get('outX1')
        y1 = request.form.get('outY1')
        return render_template('display.html', title=('Preview'), display=display, x1=x1, y1=y1)
    return render_template('index.html', title=('Home'), form=form)

{% extends "base.html" %}
{% import 'bootstrap/wtf.html' as wtf %}

{% block app_content %}
    <h1>{{ ('Test Bed') }}</h1>
    <p id="demo"></p>
    <div class="row">          
        <form class="form-inline center-block" action="/" method="POST" enctype="multipart/form-data">
            {{ form.hidden_tag() }}
            <div class="input-group">
                <label id="browsebutton" class="btn btn-default input-group-addon" for="my-file-selector">
                    {{ form.input_file(id="my-file-selector") }}
                    Browse...
                </label>
                {{ form.test_input(id="test_input", readonly="readonly")}}
            </div>
            {{ form.submit(class_="btn btn-primary") }}
            <br>
            <br>
            <form id="coords" class="coords">
                <div class="inline-labels">
                    <label>X1 {{ form.outX1(id="outX1", size="4")}}</label>
                    <label>Y1 {{ form.outY1(id="outY1", size="4")}}</label>
                    <label>X2 {{ form.outX2(size="4")}}</label>
                    <label>Y2 {{ form.outY2(size="4")}}</label>
                    <label>H {{ form.outW(size="4")}}</label>
                    <label>W {{ form.outH(size="4")}}</label>
                    <br>
                </div>
            </form>
        </form>
        <br>
        <div class="col-md-4">
            <img id="output_image"/>
        </div>        
    </div>
    <br>
{% endblock %}

$(document).on('change', '#browsebutton :file', function() {
    var input = $(this),
    numFiles = input.get(0).files ? input.get(0).files.length : 1,
    filename = input.val().replace(/\\/g, '/').replace(/.*\//, '');
    input.trigger('fileselect', [numFiles, filename]);
});

$(document).ready( function() {
    $('#browsebutton :file').on('fileselect', function(event, numFiles, filename) {
        var input = $(this).parents('.input-group').find('.text'),
        fileName = numFiles > 1 ? numFiles + ' files selected' : filename;
        if( input.length ) {
            } else {
                if( fileName ) {
                    document.getElementById("test_input").value = fileName;
                }
        }
        var input2 = event.target;
        var reader = new FileReader();
        reader.onload = function(){
            var dataURL = reader.result;
            var output = document.getElementById('output_image');
            output.src = dataURL;

            var jcrop_api;

            $('#output_image').Jcrop({
                aspectRatio: 2/2.25,
                onChange:   showCoords,
                onSelect:   showCoords,
                onRelease:  clearCoords
                },function(){                    
                    jcrop_api = this;}
                );

            $('#coords').on('change','input',function(e){                
                var x1 = $('#outX1').val(),
                    x2 = $('#outX2').val(),
                    y1 = $('#outY1').val(),
                    y2 = $('#outY2').val();
                jcrop_api.setSelect([x1,y1,x2,y2]);
              });

            function showCoords(c){                
                $('#outX1').val(c.x);
                $('#outY1').val(c.y);
                $('#outX2').val(c.x2);
                $('#outY2').val(c.y2);
                $('#outW').val(c.w);
                $('#outH').val(c.h);
            }

            function clearCoords(){
                $('#coords input').val('');
            }
        };
        reader.readAsDataURL(input2.files[0]);        
    });    
});

无法使用jquery插件从图片裁剪中获取值

0 个答案: