如何将WebRTC捕获的照片发布到服务器

Question

我正在关注this示例，让用户拍照并将其发送到Node服务器。我试图在客户端打印数据，它提供了一个长文本。图片以img标签打印出来。我试图使用ajax将数据发送到服务器并将其解析为图片然后保存它但它不起作用。 req.body仍为空。任何人都可以解释如何在img标签中获取信息并将其发布到服务器，如果它来到服务器，它是如何形状以及如何将图片保存到项目中的目录？感谢。

客户端数据

HTML标记

<div class="output">
    <img id="photo" name="photo" alt="The screen capture will appear in this box.">
</div>

前端js

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);
        alert(data);
        $.ajax({
            url: "/" ,
            data: data,
            type: 'POST',
            success: function (dataR) {
            },
            error: function (xhr, status, error) {
                console.log('Error: ' + error.message);
            }
        });
    } else {
        clearphoto();
    }
}

Answer 1

我明白了。

首先，我必须将画布URL传递给隐藏字段，然后提交字段。当服务器收到字符串时，我可以使用base64-img将字符串解析回图像并保存图像。