使用 Ajax 将 html 视频对象（画布）发送到 Flask答案

【问题标题】：Send html video object (canvas) to Flask using Ajax使用 Ajax 将 html 视频对象（画布）发送到 Flask
【发布时间】：2021-05-04 17:35:04
【问题描述】：

我一直在尝试使用烧瓶从相机获取用户图像，但我一直在接收 base64 编码的图像，但无法解码。我一直在尝试来自不同平台的各种代码仍然无法得到想要的结果

var video = document.getElementById('video');
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
    navigator.mediaDevices.getUserMedia({ video: true }).then(function (stream) {
        //video.src = window.URL.createObjectURL(stream);
        video.srcObject = stream;
        console.log(stream)
        video.play();
    });
}

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var video = document.getElementById('video');
//ctx.drawImage(video, 0, 0, canvas.width, canvas.height)
setInterval(myTimer, 1000);

function myTimer() {

    data = canvas.toDataURL("");
    $.ajax({
        type: "POST",
        url: "/submit", //I have doubt about this url, not sure if something specific must come before "/take_pic"
        data: data,
        contentType: false,
        processData: false,
        success: function (data) {
            if (data.success) {
                //alert('Your file was successfully uploaded!');
            } else {
               // alert('There was an error uploading your file!');
            }
        },
        error: function (data) {
            console.log('There was an error uploading your file!');
        }
    }).done(function () {
        console.log("Sent");
    });


}

在我的烧瓶应用程序上，我一直在尝试多次更改 js，但我无法得到正确的结果

@app.route('/submit',methods=['POST'])
def submit():
    image = flask.request.data
    # print()
    # offset = image.index(',')+1
    print(image)
    # print(image)
    # print(offset)
    # input()
    # img_bytes = base64.decode(image[offset:],"utf-8")
    # input()
    # img = Image.open(BytesIO(img_bytes))
    # img  = np.array(img)
    # cv2.imshow(img)
    # cv2.waitKeys(0)
    cv2.destroyAllWindows()
    # print(image)
    return ""

无论我做什么，我总是收到

b'data：图像/ PNG; BASE64，iVBORw0KGgoAAAANSUhEUgAAAoAAAAHgCAYAAAA10dzkAAAEvklEQVR4nO3BAQ0AAADCoPdPbQ43oAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD4Mwu4AAehrHaUAAAAASUVORK5CYII =' P>

【问题讨论】：

(1) 你的画布没有在你的代码中绘制任何东西，所以你不会有任何像素到.dataURL 任何东西。 (2) 为什么声明为var context，但又尝试使用ctx.drawImage（会出错），不应该正确设置为context.drawImage吗？ (3) 定时器太快了，所以在 1 秒内可能视频对象仍在初始化。为什么不等待 5 秒或直到有来自相机的照片（然后一个按钮启动 Timer 功能以每秒运行一次）
我正在处理这些图像以进行人脸识别，所以我需要尽可能多的图像来加快处理和识别速度......感谢您的回复

标签： javascript html ajax flask html5-video

【解决方案1】：

基本上我的错误是我没有在画布上绘制任何东西，因此导致接收图像时出错。

这是下面的工作版本：

    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>

    <body>
        <video id="video" width="640" height="480" autoplay></video>
        <canvas id="canvas" width="640" height="480"></canvas>
    </body>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"
        integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="        crossorigin="anonymous"></script>
    <script>
        var video = document.getElementById('video');
        if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
            navigator.mediaDevices.getUserMedia({ video: true }).then(function     (stream) {
                 //video.src = window.URL.createObjectURL(stream);
                video.srcObject = stream;
                console.log(stream)
                video.play();
            });
    }

    setInterval(myTimer, 5000);
    
    function myTimer() {
        var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');
        var video = document.getElementById('video');
        ctx.drawImage(video,0,0)
        ctx.translate(video,0)
        document.getElementById("canvas").style = "display:none;"
        //ctx.drawImage(canvas,0,0)
        data = canvas.toDataURL("image/JPEG");

        console.log(data)
        $.ajax({
            type: "POST",
            url: "/submit",
            data: data,
            contentType: false,
            processData: false,
            success: function (data) {
                if (data.success) {
                    //alert('Your file was successfully uploaded!');
                } else {
                   // alert('There was an error uploading your file!');
                }
            },
            error: function (data) {
                console.log('There was an error uploading your file!');
            }
        }).done(function () {
            console.log("Sent");
        });


    }    

</script>

</html>

【讨论】：