Canvas image upload gives 0KB

Question

I have a canvas image which I need to upload to the server.

I also save the path to MySql. The MySql part of the code works perfectly. When I upload the canvas one of the following two things happen: 1) It does not upload image. 2) If it does upload, it has 0KB.

In HTML I put the image in a hidden area, to upload. The rest of the HTML is basically getting the image.

HTML:

<form method="post" accept-charset="utf-8" name="form1">
<input name="hidden_data" id='hidden_data' type="hidden"/>
</form>


<form name="sub" id="sub" method="post" onsubmit="return uploadEx();" action="camtestinsert.php">
<video id="video" width="640" height="480" autoplay></video>
<button id="snap" class="sexyButton" type="button">Snap</button>
<canvas id="canvas" name="canvas" width="640" height="480"></canvas>
<input type="submit" name="Submit" value="Submit" />
</form>

Javascript:

<script>

    // Put event listeners into place
    window.addEventListener("DOMContentLoaded", function() {
        // Grab elements, create settings, etc.
        var canvas = document.getElementById('canvas');
        var context = canvas.getContext('2d');
        var video = document.getElementById('video');
        var mediaConfig =  { video: true };
        var errBack = function(e) {
            console.log('An error has occurred!', e)
        };

        // Put video listeners into place
        if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
            navigator.mediaDevices.getUserMedia(mediaConfig).then(function(stream) {
                video.src = window.URL.createObjectURL(stream);
                video.play();
            });
        }

        /* Legacy code below! */
        else if(navigator.getUserMedia) { // Standard
            navigator.getUserMedia(mediaConfig, function(stream) {
                video.src = stream;
                video.play();
            }, errBack);
        } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
            navigator.webkitGetUserMedia(mediaConfig, function(stream){
                video.src = window.webkitURL.createObjectURL(stream);
                video.play();
            }, errBack);
        } else if(navigator.mozGetUserMedia) { // Mozilla-prefixed
            navigator.mozGetUserMedia(mediaConfig, function(stream){
                video.src = window.URL.createObjectURL(stream);
                video.play();
            }, errBack);
        }

        // Trigger photo take
        document.getElementById('snap').addEventListener('click', function() {
            context.drawImage(video, 0, 0, 640, 480);
        });
    }, false);

</script>

and

<script>
        function uploadEx() {
            var canvas = document.getElementById("canvas");
            var dataURL = canvas.toDataURL("image/png");
            document.getElementById('hidden_data').value = dataURL;
            var fd = new FormData(document.forms["form1"]);

            var xhr = new XMLHttpRequest();
            xhr.open('POST', 'camtestinsert.php', true);

            xhr.upload.onprogress = function(e) {
                if (e.lengthComputable) {
                    var percentComplete = (e.loaded / e.total) * 100;
                    console.log(percentComplete + '% uploaded');
                    //alert('Photo Uploaded Succesfully');
                }
            };

            xhr.onload = function() {

            };
            xhr.send(fd);
        };
    </script>

PHP:

$upload_dir = "Child_Images/";
$img = $_POST['hidden_data'];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = $upload_dir . "Photo_ID_UniqueSerial:_" . $photo_ID . ".png";
$success = file_put_contents($file, $data);
print $success ? $file : 'Unable to save the file.';