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. 将Blob附加到formdata
3. Ajax上传到服务器

请归功于以下帖子！ 将数据URI转换为文件，然后追加到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);
      }
    });
  });
});