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轉換成團塊
2. 追加BLOB到FORMDATA
3. 阿賈克斯上傳到服務器

請看下面的帖子！ 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); 
     } 
    }); 
    }); 
});