I've created an image using canvas. I want to append the exact image file in the form data and not the url. This is my code.

<video></video>



<button type=button onclick=turnOn()>turn on cam</button>

<button type=button onclick=takeSnapshot()>capture image</button>





<script>

    function turnOn() {

         document.getElementsByTagName('video')[0].play();



         var video = document.querySelector('video')

          , canvas;



        if (navigator.mediaDevices) {

           navigator.mediaDevices.getUserMedia({video: true})

            .then(function(stream) {

              video.src = window.URL.createObjectURL(stream);

            })

            .catch(function(error) {

              document.body.textContent = 'Could not access the camera. Error: ' + error.name +   + error.message;

            });

        }

    }



    function takeSnapshot() {

        var video = document.querySelector('video')

          , canvas;



        var img = document.querySelector('img') || document.createElement('img');

        var context;

        var width = video.offsetWidth

            , height = video.offsetHeight;



        canvas = canvas || document.createElement('canvas');

        canvas.width = width;

        canvas.height = height;



        context = canvas.getContext('2d');

        context.drawImage(video, 0, 0, width, height);



        img.src = canvas.toDataURL('image/png');

        document.body.appendChild(img);



        var fd = new FormData(document.forms[0]);

        fd.append(image, img);



        $.ajax({

            type: POST,

            enctype: 'multipart/form-data',

            url: /api/file/upload,

            data: fd,

            processData: false,

            contentType: false,

            cache: false,

            success: (data) => {

                alert(yes);

            },

            error: function(xhr, status, error) {

                  alert(xhr.responseText);

                }

        });

    }



</script>

It's appending the blob file ����... And I want it to append the exact image file. I haven't used this before and can't seem to understand other tutorials. Hoping you could help me. Thank you so much!!!

Edit:
I already edited the code and tried to append the same image I'm appending on the body. But it's not working..