JQuery: получить изображение холста на сервер

Question

Я пытаюсь отправить одно изображение с холста и сохранить его на сервере с помощью ajax. Мой Jquery код, как:

$(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); 
       } 
      }); 
     }); 
    }); 

Но когда я проверил с консолью, я послал пустой файл данных (поскольку я утешаю регистрировать данные, которые я посылал

Может кто-нибудь помочь Спасибо

.?.

Answer 1

1. Вы должны преобразовать ImageUrl в BLOb
2. Append капли в данную форму
3. Ajax загрузить на сервер

Пожалуйста, примите к сведению нижеследующее сообщение! 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); 
     } 
    }); 
    }); 
});