Send canvas image data (Uint8ClampedArray) to Flas

问题:

I'd like to send image data on an HTML5 to a flask server back-end via AJAX. I extract the relevant image data from the using context.getImageData(a, b, c, d), and would ideally like to have access to that data as a numpy array on my flask backend. How might I best go about this?

Thanks!

回答1:

A successful (although perhaps not optimally efficient) method for dealing with this is to

1. Put the imageData onto a canvas (context.putImageData)
2. Create a data URL from this canavs (canvas.toDataURL)
3. Send this data URL to the server as base64
4. Do some conversion work on the python side to get it into numpy shape

Client-Side (JS)

var scratchCanvas = document.createElement('canvas');
var context = scratchCanvas.getContext('2d');
context.putImageData(...);
var dataURL = scratchCanvas.toDataURL();
$.ajax({
  type: "POST",
  url: "http://url/hook",
  data:{
    imageBase64: dataURL
  }
}).done(function() {
  console.log('sent');
});

Server-Side (Python/Flask)

# ... Flask imports above ...
import numpy as np
from PIL import Image
import base64
import re
import cStringIO

@app.route('/hook', methods=['POST'])
def get_image():
    image_b64 = request.values['imageBase64']
    image_data = re.sub('^data:image/.+;base64,', '', image_b64).decode('base64')
    image_PIL = Image.open(cStringIO.StringIO(image_b64))
    image_np = np.array(image_PIL)
    print 'Image received: {}'.format(image_np.shape)
    return ''