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

【问题标题】：Send canvas image data (Uint8ClampedArray) to Flask Server via Ajax通过 Ajax 将画布图像数据（Uint8ClampedArray）发送到 Flask Server
【发布时间】：2017-02-01 00:59:14
【问题描述】：

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

谢谢！

【问题讨论】：

标签： python ajax html5-canvas

【解决方案1】：

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

将 imageData 放到画布上 (context.putImageData)
从此canavs创建一个数据URL (canvas.toDataURL)
将此数据 URL 作为 base64 发送到服务器
在 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 ''

【讨论】：

你能解释一下 image_data 变量的必要性吗？它已初始化且不再使用。