Сохранение рисунка холста в виде файла изображения на сервере

Question

Я хочу использовать Ajax для сохранения изображения, полученного с веб-камеры, в папку "~/Images" на сервере. У меня есть элементы видео и изображения следующим образом:

HTML:

    <div class="col-md-4">
        <div class="form-group">
            <div class="camera">
                <video id="video">Video stream not available.</video>
                <button id="startbutton">Take Photo</button>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="form-group">
            <canvas id="canvas">
            </canvas>
            <div class="output">
                <img id="photo" alt="The screen capture will appear in this box." />
            </div>
        </div>

    </div>

Javascript:

 function takepicture() {
var context = canvas.getContext('2d');
  context.drawImage(video, 0, 0, 320, 200);    
  var data = canvas.toDataURL('image/png');
  photo.setAttribute('src', data);
  alert("In");
  $.ajax({
      type: 'POST',
      url: '@Url.Action("SaveAsImageFile", "Customers")',
      data: '{ "data" : "' + data + '" }',
      contentType: 'application/json; charset=utf-8',
      dataType: 'json',
      success: function (msg) {
          alert('Image saved on the server!');
      }

  });}

Сторона сервера:

[WebMethod]
    public static void SaveAsImageFile(string data)
    {
        Guid id = Guid.NewGuid();
        string path = System.Web.HttpContext.Current.Server.MapPath("~/Images/MyImage.png");
        byte[] binaryData = Convert.FromBase64String(data);
        FileStream file = new FileStream(path, FileMode.Create);
        BinaryWriter bw = new BinaryWriter(file);
        bw.Write(binaryData);
        bw.Close();
    }

Изображение не сохраняется. Что мне не хватает? Ваша помощь оценена заранее.

Спасибо.