如何使用內容類型「image/jpeg」通過AJAX調用將畫布圖像從GUI保存到後端？

Question

如何保存從GUI一個canvas圖像通過AJAX調用，它接受content type "image/jpeg"克服錯誤 「jquery.js:8453 Uncaught TypeError: Illegal invocation」

HTML

<canvas id="myImage"></canvas> // Canvas loaded with image 

Answer 1

HTML

<canvas id="myImage"></canvas> // Canvas loaded with image 

到後端JS

var can = $("#myImage"); 
var blob = this.dataURItoBlob(can.toDataURL("image/jpeg")); 


var postPromise = $.ajax({ 
    type: "PUT", 
    url: 'URL_to_save_the_image',//API URL to save image 
    data: blob, //data should not be transformed to query string 
    processData: false, // Important to overcome "jquery.js:8453 Uncaught TypeError: Illegal invocation" due to transformation to query string 
    contentType: 'image/jpeg' 
}); 
postPromise.done(function(data, textStatus, jqXHR) { 
    //Success code goes here 
}); 

postPromise.fail(function(jqXHR, textStatus, errorThrown) { 
    //Failure code goes here 
}); 

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