CODEWITHSUNDEEP
javascriptnode.jsimagepost
Tri Nguyen
Tri Nguyen

Reputation: 1808

How to post WebRTC captured photo to server

I'm following this example to let the user take a photo and send it to Node server. I tried to print the data on client side and it gives a long text. The picture is printed out in an img tag. I tried to use ajax to send that data to the server and parse it into a picture then save it but it doesn't work. The req.body is still empty. Can anyone explain how can I get information in that img tag and post it to the server and if it comes to the server, how does it look like and how to save the picture to a directory in the project? Thanks.

Client-side data

enter image description here

HTML tag

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

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

Upvotes: 2

Views: 1583

Answers (1)

Tri Nguyen
Tri Nguyen

Reputation: 1808

I figured it out.

First I have to pass the canvas URL to a hidden field and after that submit the field. When the server receives the string, I can use base64-img to parse the string back to image and save the image.

Upvotes: 2

Related Questions