javascript - 如何将 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

我想通了。

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