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

下面的示例让用户拍摄照片并将其发送到节点服务器。我试着在客户端打印数据，结果显示了很长的文本。图片打印在

img

标签中。我尝试使用ajax将数据发送到服务器，并将其解析为图片，然后保存，但没有成功。

req.body

仍为空。有人能解释一下我如何在

img

标签中获取信息并将其发布到服务器上吗？如果是到服务器上，它看起来是什么样子，以及如何将图片保存到项目中的目录中？谢谢

客户端数据

HTML标记

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

我想出来了

首先，我必须将画布URL传递到一个隐藏字段，然后提交该字段。当服务器接收到字符串时，我可以使用

base64 img

将字符串解析回图像并保存图像。

可能的重复

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();
    }
}