通过Ajax将画布图像数据（Uint8ClampedArray）发送到Flask Server

我想通过 AJAX 将 HTML5 上的图像数据发送到 Flask 服务器后端。我从使用中提取相关图像数据context.getImageData(a, b, c, d)，并且理想情况下希望能够在我的 Flask 后端以 numpy 数组的形式访问该数据。我怎样才能最好地解决这个问题？

Thanks!

处理这个问题的一个成功的（尽管可能不是最有效的）方法是

1. 将图像数据放到画布上（context.putImageData)
2. 从此画布创建数据 URL (canvas.toDataURL)
3. 将此数据 URL 作为 base64 发送到服务器
4. 在 python 端做一些转换工作，使其变成 numpy 形状

客户端 (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');
});

服务器端（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 ''