Добавьте снимок с веб-камеры js в форму и отправьте, используя Flask - PullRequest
Новая
       58

Добавьте снимок с веб-камеры js в форму и отправьте, используя Flask

0 голосов
/ 17 июня 2020

Я пытаюсь разрешить пользователю сделать снимок с помощью веб-камеры, а затем отправить его в мою модель машинного обучения. Кажется, что Javascript неправильно прикрепляет изображение к форме или изображение каким-то образом закодировано.

Вот моя форма html: 

 <form role="form" id="myForm" name="myForm" enctype="multipart/form-data" method="post" action='/'>


            <h2 style="padding-top:2%;color:black" class="text-center">Detect Smile Convolutional Neural Network App</h2>
            <legend style="padding-top:1%" class="text-center">Upload a Neutral or Smiling Selfie</legend>


            <div style="content-align: center" class="form-group text-center">
                <span style="padding-bottom:2%;margin-left: auto; margin-right: auto;" id="my_camera"></span>
            </div>

            <p class="text-center">

                <input id="singlebutton" name="singlebutton" class="btn btn-primary" type="submit" value=POST />
                <input type="file" name="file" id="file" multiple>

            </p>

</form>

Вот код сценария java, который должен добавить изображение к элементу с именем «файл» в моей форме. Это было сделано с помощью демонстрационного снимка для веб-камеры. js: 

</script>
    <script language="JavaScript">
    function take_snapshot() {
        // take snapshot and get image data
        console.log("Taking Snapshot...")
        Webcam.snap( function(data_uri) {
            // display results in page
            document.getElementById('results').innerHTML = 
                '<h2>Here is your image:</h2>' + 
                '<img id="image" src="'+data_uri+'"/>';
        } );
        upload();
    }

    function upload() {
        console.log("Appending to Form...")
        var image = document.getElementById('image').src;
        var form = document.getElementById('myForm');
        console.log(image)
        var formData = new FormData(form);
        formData.append("file", image);
        console.log("After File Append")
        console.log(formData.get('file'));
    }
</script>

Элемент 'results', который изменяется функцией take_snapshot (), находится не в форме html, а находится под формой. Когда я активирую функцию take_snapshot (), снимок отображается в его html.

. В журнале консоли отображается изображение, но не числовые цифры, что наводит на мысль, что само изображение закодировано. Когда я отправляю форму и пытаюсь запросить файл, я ничего не получаю. Код flask, используемый для запроса файла, находится здесь: 

@app.route('/', methods=['POST','GET'])
def upload_file():
    app.logger.info("Here's some info")
    if request.method == 'GET':
        return render_template('resultsform.html')
    if request.method == 'POST':
        app.logger.info("Enter Post Method")
        # check if the post request has the file part
        app.logger.info(str(request.files))
        app.logger.info(str(request.form))
        app.logger.info(str(request.headers))
        app.logger.info("After Headers")
        if 'file' not in request.files:
            app.logger.info("No file part")
            return redirect(request.url)
        img = request.files['file']
        app.logger.info("After Request Form")
        app.logger.info(img.read())

    try:
        app.logger.info("Try Model")
        image_pred, confidence = predict_image(img)
        app.logger.info("After model predict")
        messages = {
            'file': 'uploads/' + filename,
            'image_pred': str(image_pred),
            'confidence': str(confidence)
        }
        messages = json.dumps(messages)
        return redirect(url_for('Booty', image_pred=image_pred,confidence=confidence))
    except:
        return redirect('/')

Когда я пытаюсь отобразить переменную img с помощью app.logger (), я не получаю никаких данных изображения. Я получаю следующее: 

[2020-06-17 12:18:49,936] INFO in FlaskApp: <FileStorage: '' ('application/octet-stream')>

Кто-нибудь может мне с этим помочь? Я застрял на нем 2 дня и чувствую, что бьюсь головой об стену.

...