Python wtforms bulb reads image from canvas dataurl instead of form.input.data

Question

I currently have a working JS code for resizing client images. Now I need to send this modified image to my flash application. Then my flask application will load it in aws3.

This is the JS code that I use to resize the image, it also generates 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 jar application, I used form.company_logo_image_path.data.read() to get the contents of the file, but now, even if I resize the image, it will be ignored. This is because I am still getting the old image from the input. I need to get a canvas image.

How to use dataurl to get image in my flash application? Or is there another way?

This is my AJAX code that I use immediately after receiving dataurl:

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

In my python view, I'm trying to access 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) 

Answer 1

per https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL , you will 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 to decode the file.

 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

- that's what you need.