Jquery：将canvas图像添加到服务器

我试图从canvas发送一个图像并使用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. 将blob附加到formdata
3. Ajax上传到服务器

请归功于以下post！ 将数据URI转换为File然后附加到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); } }); }); });