XMLHttpRequest не возвращает render_template FLASK - PullRequest
Новая
       13

XMLHttpRequest не возвращает render_template FLASK

0 голосов
/ 26 мая 2020

У меня есть веб-страница, через которую я хочу сделать снимок и превратить это изображение в текст с помощью python пакета pytesseract и отобразить его на той же странице.

Пока я могу сделать снимок и сохранить его в папка. Но я не могу вернуть текст на html. Я не получаю никаких ошибок.

Ниже кода я делаю снимок через свою веб-камеру p c и отправляю его на flask изображение onclick на экране 

<script>

let v = document.getElementById("myVideo");

//create a canvas to grab an image for upload
let imageCanvas = document.createElement('canvas');
let imageCtx = imageCanvas.getContext("2d");

//Add file blob to a form and post
function postFile(file) {
    let formdata = new FormData();
    formdata.append("image", file);
    let xhr = new XMLHttpRequest();
    xhr.open('POST', 'http://localhost:5000/image', true);
    xhr.onload = function () {
        if (this.status === 200)
            console.log(this.response);
        else
            console.error(xhr);
    };
    xhr.send(formdata);
}

//Get the image from the canvas
function sendImagefromCanvas() {

    //Make sure the canvas is set to the current video size
    imageCanvas.width = v.videoWidth;
    imageCanvas.height = v.videoHeight;

    imageCtx.drawImage(v, 0, 0, v.videoWidth, v.videoHeight);

    //Convert the canvas to blob and post the file
    imageCanvas.toBlob(postFile, 'image/jpeg');
}

//Take a picture on click
v.onclick = function() {
    console.log('click');
    sendImagefromCanvas();

};

window.onload = function () {

    //Get camera video
    navigator.mediaDevices.getUserMedia({video: {width: 1280, height: 720}, audio: false})
        .then(stream => {
            v.srcObject = stream;
        })
        .catch(err => {
            console.log('navigator.getUserMedia error: ', err)
        });

};

А это мой flask код. 

@app.route('/image', methods=['GET', 'POST'])                                                      
def image():
if request.method == 'POST':

    i = request.files['image']  # get the image

    # call the OCR function on it
    extracted_text = ocr_core(i)        
    # extract the text and display it
    return render_template('image.html',
                    msg='Successfully processed',
                    extracted_text=extracted_text)

elif request.method == 'GET':

    return render_template('image.html')

Под частью jinja2 для отображения return render_template 

{% if extracted_text %}
<p> The extracted text from the image above is: <b> {{ extracted_text }} </b></p>
{% else %}
The extracted text will be displayed here
{% endif %}
...