Jquery: Leinwandbild zum Server

Question

Ich versuche, ein Bild aus Leinwand zu senden und es auf Server mit Ajax zu speichern. Mein JQuery-Code ist wie:

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

Aber wenn ich mit der Konsole überprüft, schickte ich eine leere Datendatei (da ich die Daten Konsolprotokoll ich sendete

Kann mir jemand helfen Danke

.?.

Answer 1

1. Sie müssen die ImageURL konvertieren
2. Fügen Sie den Blob in Formulardaten blob
3. Ajax in Server hochladen

Bitte geben Sie den folgenden Beitrag gut! 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); 
     } 
    }); 
    }); 
});