Question

我有一个Web应用程序，该应用程序使用网络摄像头拍照，并将其发送到在同一台计算机上运行的Flask服务器。

我尝试使用ajax发送dataURL，然后在服务器上解码base64。


@test_function.route('/test',methods=["POST", "GET"])
def test():
    json_data_from_request = request.get_json()
    image_data = json_data_from_request['imageData']



    image_data = re.sub('^data:image/.+;base64,', '', json_data_from_request['imageData']).decode('base64')
    image = Image.open(StringIO(image_data))

    image_data.save(secure_filename(image_data.filename))

    return "received message"

function takepicture() {
    var context = canvas.getContext('2d');
    if (width && height) {
      canvas.width = width;
      canvas.height = height;
      context.drawImage(video, 0, 0, width, height);

      var data = canvas.toDataURL('image/png');
      photo.setAttribute('src', data);

    $.ajax({
        url: 'http://127.0.0.1:5000/test',
        type: 'post',
        contentType: 'application/json',
        data: {"imageData":data},
        success: function(response){
            console.log(response);
        }
    });

我在服务器上看到一则“ OPTIONS”（命令）-200和一则“ POST”（日志）-400消息。出于测试目的，我想将所述图像保存在服务器文件夹中。最终我想将图片发送到另一个类进行处理，也许以字节序列的形式发送？

更新：我想通了，所以我决定添加工作代码，以防将来像我这样缺乏经验的人需要它。

def test():
    json_data_from_request = request.get_json()

    img=json_data_from_request['data']

    base64result = img.split(',')[1]
    print(base64result)

    imgdata = base64.b64decode(str(base64result))
    image = Image.open(io.BytesIO(imgdata))
    plt.imshow(image)
    plt.show()

    return "received message"

  var data = canvas.toDataURL('image/png');
      photo.setAttribute('src', data);
    var data_to_send={'data':data};
    $.ajax({
        url: 'http://127.0.0.1:5000/test',
        type: 'post',
        contentType: 'application/json',
    dataType:'json',
        data: JSON.stringify(data_to_send),
        success: function(response){
            console.log(response);
        }
    });

如何将照片从网站发送到烧瓶服务器？

0 个答案: