Decoding base64 from POST to use in PIL

You should try something like:

from PIL import Imagefrom io import BytesIOimport base64data['img'] = '''R0lGODlhDwAPAKECAAAAzMzM/////wAAACwAAAAADwAPAAACIISPeQHsrZ5ModrLlN48CXF8m2iQ3YmmKqVlRtW4MLwWACH+H09wdGltaXplZCBieSBVbGVhZCBTbWFydFNhdmVyIQAAOw==''' im = Image.open(BytesIO(base64.b64decode(data['img'])))

Your data['img'] string should not include the HTML tags or the parameters data:image/jpeg;base64 that are in the example JSFiddle.

I've changed the image string for an example I took from Google just for readability purposes.

There is a metadata prefix of data:image/jpeg;base64, being included in the img field. Normally this metadata is used in a CSS or HTML data URI when embedding image data into the document or stylesheet. It is there to provide the MIME type and encoding of the embedded data to the rendering browser.

You can strip off the prefix before the base64 decode and this should result in valid image data that PIL can load (see below), but you really need to question how the metadata is being submitted to your server as normally it should not.

import reimport cStringIOfrom PIL import Imageimage_data = re.sub('^data:image/.+;base64,', '', data['img']).decode('base64')image = Image.open(cStringIO.StringIO(image_data))

Sorry for necromancy, but none of the answers worked completely for me. Here is code working on Python 3.6 and Flask 0.13.

Server:

from flask import Flask, jsonify, requestfrom io import BytesIOfrom web import appimport base64import reimport jsonfrom PIL import Image@app.route('/process_image', methods=['post'])def process_image():    image_data = re.sub('^data:image/.+;base64,', '', request.form['data'])    im = Image.open(BytesIO(base64.b64decode(image_data)))    return json.dumps({'result': 'success'}), 200, {'ContentType': 'application/json'}

Client JS:

// file comes from file inputvar reader = new FileReader();reader.onloadend = function () {    var fileName = file.name;    $.post('/process_image', { data: reader.result, name: fileName });};reader.readAsDataURL(file);