gpt4 book ai didi

python - 通过Ajax将 Canvas 图像数据(Uint8ClampedArray)发送到Flask Server

转载 作者:行者123 更新时间:2023-11-30 22:42:55 25 4
gpt4 key购买 nike

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

谢谢!

最佳答案

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

  1. 将 imageData 放到 Canvas 上 (context.putImageData)
  2. 从此 canavs 创建数据 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 ''

关于python - 通过Ajax将 Canvas 图像数据(Uint8ClampedArray)发送到Flask Server,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41957490/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com