Javascript Python表单从画布数据URL而不是form.input.data读取图像
我目前有一个工作的JS代码来调整图片客户端。现在我需要将此调整大小的图像发送到我的flask应用程序。然后,我的flask应用程序将其上载到aws3 这是我用来调整图像大小的JS代码,它还生成一个dataurl:Javascript Python表单从画布数据URL而不是form.input.data读取图像,javascript,python,canvas,flask,wtforms,Javascript,Python,Canvas,Flask,Wtforms,我目前有一个工作的JS代码来调整图片客户端。现在我需要将此调整大小的图像发送到我的flask应用程序。然后,我的flask应用程序将其上载到aws3 这是我用来调整图像大小的JS代码,它还生成一个dataurl: $( "input[type='file']" ).change(function() { // from an input element var filesToUpload = this.files; console.log(filesToUpload);
$( "input[type='file']" ).change(function() {
// from an input element
var filesToUpload = this.files;
console.log(filesToUpload);
var img = document.createElement("img");
img.src = window.URL.createObjectURL(this.files[0]);
$( img ).load(function() {
var MAX_WIDTH = 600;
var MAX_HEIGHT = 450;
var width = img.width;
var height = img.height;
if (width > height) {
if (width > MAX_WIDTH) {
height *= MAX_WIDTH / width;
width = MAX_WIDTH;
}
} else {
if (height > MAX_HEIGHT) {
width *= MAX_HEIGHT / height;
height = MAX_HEIGHT;
}
}
canvas.width = width;
canvas.height = height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, width, height);
var dataurl = canvas.toDataURL("image/png");
//var file = canvas.mozGetAsFile("foo.png");
});
});
在我的flask应用程序中,我使用了form.company\u logo\u image\u path.data.read()
来获取文件内容,但现在即使我调整了大小,图像也会被忽略。这是因为我仍然从输入中获取旧图像。我需要得到画布图像
如何使用dataurl在flask应用程序中获取图像?
还是有别的办法
这是我的AJAX代码,我在获取dataurl后立即使用:
$.ajax({
type: "POST",
url: "/profil/unternehmen-bearbeiten",
data:{
imageBase64: dataurl
}
}).done(function() {
console.log('sent');
});
data_url = request.values['imageBase64']
#data_url = request.args.get('image') # here parse the data_url out http://xxxxx/?image={dataURL}
print data_url
content = data_url.split(';')[1]
image_encoded = content.split(',')[1]
body = base64.decodebytes(image_encoded.encode('utf-8'))
# Then do whatever you want
print body, type(body)
在python视图中,我尝试访问dataurl:
$.ajax({
type: "POST",
url: "/profil/unternehmen-bearbeiten",
data:{
imageBase64: dataurl
}
}).done(function() {
console.log('sent');
});
data_url = request.values['imageBase64']
#data_url = request.args.get('image') # here parse the data_url out http://xxxxx/?image={dataURL}
print data_url
content = data_url.split(';')[1]
image_encoded = content.split(',')[1]
body = base64.decodebytes(image_encoded.encode('utf-8'))
# Then do whatever you want
print body, type(body)
根据,您会得到如下结果:
var canvas = document.getElementById('canvas');
var dataURL = canvas.toDataURL();
console.log(dataURL);
// "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNby
// blAAAADElEQVQImWNgoBMAAABpAAFEI8ARAAAAAElFTkSuQmCC"
然后使用base64将文件解码出来
import base64
from flask import request
def your_view():
data_url = request.args.get('image') # here parse the data_url out http://xxxxx/?image={dataURL}
content = data_url.split(';')[1]
image_encoded = content.split(',')[1]
body = base64.decodebytes(image_encoded.encode('utf-8'))
# Then do whatever you want
身体是你需要的。我知道。我已经在控制台中看到了dataURL输出,它工作得很好。但是我如何在我的flask应用程序中访问它呢?我可以创建一个单独的视图和方法来解码dataurl,但我不知道如何将dataurl传递给上述方法。@Roman如何将其传递给view取决于您,您可以创建一个新视图,监听端点,例如,在js中,将您获得的dataurl附加到端点的查询字符串,例如{dataURL},然后用$.getI发送请求。我理解这个理论,但我仍然不知道如何将dataURL放入我的python中。。。data_url=request.args.get('image')给了我错误的请求400,或者它是None,所有其他尝试都会导致相同的错误Google search flask get请求查询字符串。