How To Send Captured Webcam Image And Save To Server Via Input Field

I was working on a project where a user can change his profile pic by using his webcam. I successfully capture the image by webcam but I cannot append that capture image to my for

Solution 1:

1- Send base64 image as a string and then convert it to a file in the server side.

2- Convert a Base64 string into a Blob to upload it as a file to server.

I explain the second option:

First, Convert Base64 string to Blob with this function:

functionb64toBlob(b64Data, contentType, sliceSize) {
    contentType = contentType || '';
    sliceSize = sliceSize || 512;

    var byteCharacters = atob(b64Data); // window.atob(b64Data)var byteArrays = [];

    for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
        var slice = byteCharacters.slice(offset, offset + sliceSize);

        var byteNumbers = newArray(slice.length);
        for (var i = 0; i < slice.length; i++) {
            byteNumbers[i] = slice.charCodeAt(i);
        }

        var byteArray = newUint8Array(byteNumbers);

        byteArrays.push(byteArray);
    }

    var blob = newBlob(byteArrays, {type: contentType});
    return blob;
}

Now, make your form (you can hidden it with CSS):

<formid="myAwesomeForm"method="post"><inputtype="text"id="filename"name="filename" /><!-- Filename --></form>

Then, append the image to form using FormData:

var form = document.getElementById("myAwesomeForm");

var ImageURL = photo; // 'photo' is your base64 image// Split the base64 string in data and contentTypevar block = ImageURL.split(";");
// Get the content type of the imagevar contentType = block[0].split(":")[1];// In this case "image/gif"// get the real base64 content of the filevar realData = block[1].split(",")[1];

// Convert it to a blob to uploadvar blob = b64toBlob(realData, contentType);

// Create a FormData and append the file with "image" as parameter namevar formDataToUpload = new FormData(form);
formDataToUpload.append("image", blob);

Finally you can send your formData using any method, For example:

var request = new XMLHttpRequest();
request.open("POST", "SERVER-URL");
request.send(formDataToUpload);

I hope this could help you ;)

Solution 2:

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/jpeg');
                var request = new XMLHttpRequest();
                request.open("POST", 'SERVER_URL');
                request.send(data);
              } else {
                clearphoto();
              }
            }

Check out this link for the full source code: https://colab.research.google.com/github/techwithanirudh/Automatic-Image-Captioning/blob/master/Capture_Img.ipynb