storing multiple images from video frames using canvas to local drive using Ajax

See more:

C#

ASP.NET

Javascript

Ajax

jQuery

I am trying to convert video frames to images and store in server but getting an error message:"The input is not a valid Base-64 string as it contains a non-base 64 character, more than two padding characters, or an illegal character among the padding characters."
my c# code to get frame to server is:

[WebMethod()]
public static void UploadImage(string imageData)
{
     FileStream fs = new FileStream("D:\myimage.png", FileMode.Create);
     BinaryWriter bw = new BinaryWriter(fs);
     byte[] data = Convert.FromBase64String(imageData);
     bw.Write(data);
     bw.Close();
 }

and my script is:

<script>
    var videoId = 'video';
    var scaleFactor = 0.25;
    var snapshots = [];
    var graph;
    var video = document.getElementById('video');
    var output = document.getElementById('graph');
    function capture(video, scaleFactor) {
        if (scaleFactor == null) {
            scaleFactor = 1;
        }
        var w = video.videoWidth * scaleFactor;
        var h = video.videoHeight * scaleFactor;
        var canvas = document.createElement('canvas');
        canvas.width = w;
        canvas.height = h;
        var ctx = canvas.getContext('2d');
        ctx.drawImage(video, 0, 0, w, h);
        return canvas;
    }

    $(document).ready(function (video, scaleFactor) {

        var video = document.getElementById(videoId);
        var output = document.getElementById('output');
        var canvas = capture(video, scaleFactor);
        canvas.onclick = function () {
            window.open(this.toDataURL());
        };
        snapshots.unshift(canvas);
        output.innerHTML = '';
        for (var i = 0; i < 4; i++) {
            graph.appendChild(snapshots[i]);
        }

    });



    // Send the drawn image to the server
    $('#sendBtn').live('click', function () {
        for (var i = 0; i < 4; i++) {
            var image = snapshots[i].toDataURL("image/png");
            image = image.replace('data:image/png;base64,', '');

            $.ajax({
                type: 'POST',
                url: '/Default.aspx/UploadImage',
                data: '{ "imageData" : "' + image + '" }',
                contentType: 'application/json; charset=utf-8',
                dataType: 'json',
                success: function (msg) {
                    alert('Image sent!');
                }

            });
        }
    });
</script>

and my html5 code is:

<source src="h.mp4">
       </video><br/>

    <canvas id="graph" width="200" height="150"></canvas>

    <input type="button" id="sendBtn" value="Send To Server" />