Entonces, estoy trabajando en una pequeña aplicación web que tiene un lienzo pequeño, se supone que el usuario debe dibujar algo y luego quiero hacer Python con la imagen de ese lienzo. Como esto:
Esto está funcionando bien. Cuando presiono "¡Haz clic en mí!", Llamo a una función JS que envía la imagen a mi servidor Flask. Y esto también funciona, el problema es que después de recibir la imagen, quiero mostrar una nueva página para mostrar algunos resultados, pero esta página no se muestra en absoluto.
Ahora, soy completamente nuevo en Javascript, apenas sé nada, básicamente cada JS que estoy usando está copiado y pegado de Internet, así que asumo que me falta algo muy simple, simplemente no sé qué.
Aquí está el código del servidor:
from flask import Flask, render_template, request import re from io import BytesIO import base64 from PIL import Image app = Flask(__name__) @app.route("/") def hello_world(): return render_template('drawing.html') @app.route("/hook", methods=['POST', 'GET']) def hook(): image_data = re.sub('^data:image/.+;base64,', '', request.form['imageBase64']) im = Image.open(BytesIO(base64.b64decode(image_data))) im.show() return render_template('results.html')
La primera ruta solo abre el lienzo, la segunda se ejecuta después de la solicitud del cliente, que tiene esta función:
function surprise() { var dataURL = canvas.toDataURL(); $.ajax({ type: "POST", url: "http://127.0.0.1:5000/hook", data:{ imageBase64: dataURL } }).done(function() { console.log('sent'); });}
Aparentemente, esto está funcionando. tengo la linea:
im.show()
Solo para poder ver la imagen y obtener exactamente el dibujo del lienzo, en el que ahora se supone que debo trabajar:
pero la página de resultados no se muestra después, no pasa nada. ¿Por qué?
El problema es que está devolviendo la página para verla en respuesta a la llamada que publica la imagen. En su lugar, debe devolver una respuesta (por ejemplo, en formato json) que contenga la información sobre el resultado de la llamada que acaba de realizar (es decir, la publicación de la imagen) y, en consecuencia, en el lado del cliente, debe redirigir al usuario a la dirección adecuada. página .
Para entender por qué no funciona, imprima el contenido de la respuesta devuelta de la llamada realizada
var response = ''; $.ajax({ type: "POST", url: "http://127.0.0.1:5000/hook", data:{ imageBase64: dataURL }, success : function(text) { response = text; } }); alert(response);