title: Save canvas as image in ASP.NET Core
body: <p>I'm trying to send a javascript canvas blob image to my controller method in ASP.NET Core 2.1. but my string parameters is always <code>null</code> in method.</p>
  
  <p>This is my <strong>JavaScript:</strong></p>
  
  <pre><code>$(".btn").click(function(e) {
      var image = document.getElementById("canvas").toDataURL("image/png");
      image = image.replace('data:image/png;base64,', '');
      $.ajax({
          type: 'POST',
          url: '@Url.Action("Add", "Home")',
          data: { imageData: image },
          ajaxasync: true,
          contentType: 'application/json; charset=utf-8',
          dataType: 'json',
          success: function (msg) {
              alert('Image saved successfully !');
          }
      });
  });
  </code></pre>
  
  <p>This is my <strong>Controller:</strong></p>
  
  <pre><code>[HttpPost]
  public  JsonResult Add(string imageData)
  {
      try
      {
          var folderName = @"uploads/";
          var webRootPath = _appEnvironment.WebRootPath;
          var newPath = Path.Combine(webRootPath, folderName);
          string fileNameWitPath = newPath + DateTime.Now.ToString().Replace("/", "-").Replace(" ", "- ").Replace(":", "") + ".png";
          using (FileStream fs = new FileStream(fileNameWitPath, FileMode.Create))
          {
              using (BinaryWriter bw = new BinaryWriter(fs))
              {
                  byte[] data = Convert.FromBase64String(imageData);
                  bw.Write(data);
                  bw.Close();
              }
          }
  
          return new JsonResult("Success");
          }
      catch (Exception exception)
      {
          return new JsonResult("Error");
      }
  }
  </code></pre>