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

Question

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

谢谢！

Answer 1

成功（尽管可能不是最佳效率）处理此问题的方法是

1. 将imageData放到画布上（context.putImageData）
2. 从此canavs（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 ''