Python flask wtforms从画布dataurl而不是form.input.data读取图像 [英] Python flask wtforms read image from canvas dataurl instead of form.input.data

问题描述

我目前有一个工作的JS代码来调整客户端的图像大小。现在我需要发送这个调整大小的图像到我的烧瓶应用程序。我的烧瓶应用程序然后将它上传到aws3。

这是我用来调整图像大小的JS代码，它也生成一个dataurl：

  $（input [type ='file']）.change（function（）{
 
 // from输入元素
 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）; 
 
}）; 
 
}）; 
  

在我的应用程序中，我使用了 form.company_logo_image_path.data.read（） 来获取文件内容，但现在即使我调整大小调整后的图像被忽略。那是因为我仍然从输入中得到旧图像。我需要获取画布图像。

如何使用dataurl在我的烧瓶应用程序中获取图像？
或者还有其他的方法吗？

这是我在获取dataurl后使用的AJAX代码：

  $。ajax（{
 type：POST，
 url：/ profil / unternehmen-bearbeiten，
 data ：{
 imageBase64：dataurl 
} 
}）。done（function（）{
 console.log（'sent'）; 
}）; 
  

在我的python视图中，我尝试访问dataurl：

  data_url = request.values ['imageBase64'] 
 #data_url = request.args.get（'image'）＃here解析data_url out http：/ / xxxxx /？image = {dataURL} 
 print data_url 
 content = data_url.split（';'）[1] 
 image_encoded = content.split（'，'）[1] 
ody = base64.decodebytes（image_encoded.encode（'utf-8'））
＃然后做任何你想要的
打印正文，类型（正文）
  

解决方案

per https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL ，你会得到如下所示：

  var canvas = document.getElementById（'canvas'）; 
 var dataURL = canvas.toDataURL（）; 
 console.log（dataURL）; 
 //data：image / png; base64，iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNby 
 // blAAAADElEQVQImWNgoBMAAABpAAFEI8ARAAAAAElFTkSuQmCC
  

 导入base64 $ b $从烧瓶导入请求
 
 def your_view（）：
 data_url = request.args.get（'image'）＃这里解析data_url出http：// xxxxx /？image = {dataURL} 
 content = data_url .split（';'）[1] 
 image_encoded = content.split（'，'）[1] 
 body = base64.decodebytes（image_encoded.encode（'utf-8'））
＃然后做任何你想要的
  

body是你需要的。 b

I have currently a working JS code to resize images clientside. Now I need to send this resized image to my flask app. My flask app will then upload it to aws3.

This is the JS code which I use to resize the image, it also generates a dataurl:

$( "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");

    });

});

In my flask app I used form.company_logo_image_path.data.read() to get the filecontents, but now even if I resize the resized image is ignored. That is because I am still getting the old image from the input. I need to get the canvas image.

How do I use the dataurl to get the image in my flask app? Or is there an other way?

That is my AJAX code which I use right after I get the dataurl:

$.ajax({
  type: "POST",
  url: "/profil/unternehmen-bearbeiten",
  data:{
    imageBase64: dataurl
  }
}).done(function() {
  console.log('sent');
});

In my python view I try to access the dataurl:

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)

解决方案

per https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL, you get something like:

var canvas = document.getElementById('canvas');
var dataURL = canvas.toDataURL();
console.log(dataURL);
// "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNby
// blAAAADElEQVQImWNgoBMAAABpAAFEI8ARAAAAAElFTkSuQmCC"

Then just use base64 decode the file out.

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

body is what you need.

这篇关于Python flask wtforms从画布dataurl而不是form.input.data读取图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！