Jquery: get canvas image to server

Question

I am trying to send one image from canvas and save it at server using ajax. My Jquery code is like:

$(document).ready(function () {
        $("#UpLoad").click(function () { // trick by a button
            var canVas = $('#Canvas')[0];
            var dataURL = canVas.toDataURL();
            $.ajax({
                type: "POST",
                url: 'savePicture.php',
                data: { imgBase64: dataURL },
                cache:false,
                success: function (data) {
                    console.log("success");
                    console.log(data);
                },
                error: function (data) {
                    console.log("error");
                    console.log(data);
                }
            });
        });
    });

But when I checked with the console, i sent a blank data file (since I console log the data I was sending.

Can anyone help? Thanks.

I thought you need form data for that. http://stackoverflow.com/questions/4998908/convert-data-uri-to-file-then-append-to-formdata — stanley1943, Apr 07 '16 at 22:30

score 1 · Answer 1 · edited May 23 '17 at 12:07

You need to convert the ImageURL to blob
Append the blob into formdata
Ajax upload into server

Please give credit to the below post! Convert Data URI to File then append to FormData

$(document).ready(function() {
  function dataURItoBlob(dataURI) {
    // convert base64/URLEncoded data component to raw binary data held in a string
    var byteString;
    if (dataURI.split(',')[0].indexOf('base64') >= 0)
      byteString = atob(dataURI.split(',')[1]);
    else
      byteString = unescape(dataURI.split(',')[1]);

    // separate out the mime component
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

    // write the bytes of the string to a typed array
    var ia = new Uint8Array(byteString.length);
    for (var i = 0; i < byteString.length; i++) {
      ia[i] = byteString.charCodeAt(i);
    }

    return new Blob([ia], {
      type: mimeString
    });
  }
  $("#UpLoad").click(function() { // trick by a button
    var canVas = $('#Canvas')[0];
    var dataURL = canVas.toDataURL();
    var blob = dataURItoBlob('dataURL');
    var formData = new FormData();
    formData.append('imgBase64', blob);
    $.ajax({
      type: "POST",
      url: 'savePicture.php',
      data: formData,
      contentType: false, //need this
      processData: false, //need this
      cache: false,
      success: function(data) {
        console.log("success");
        console.log(data);
      },
      error: function(data) {
        console.log("error");
        console.log(data);
      }
    });
  });
});

Jquery: get canvas image to server

1 Answers1

Linked