jQuery:将画布图像获取到服务器 [英] Jquery: get canvas image to server

问题描述

我正在尝试从画布发送一个图像，并使用ajax将其保存在服务器上.我的Jquery代码如下:

I am trying to send one image from canvas and save it at server using ajax. My Jquery code is like:

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

但是当我使用控制台检查时，我发送了一个空白的数据文件(因为控制台记录了我正在发送的数据.

But when I checked with the console, i sent a blank data file (since I console log the data I was sending.

任何人都可以帮忙吗?谢谢.

Can anyone help? Thanks.

推荐答案

1. 您需要将ImageURL转换为blob
2. 将blob附加到formdata
3. 将Ajax上传到服务器

请归功于以下帖子！ 将数据URI转换为文件然后追加到FormData

Please give credit to the below post! 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);
      }
    });
  });
});

这篇关于jQuery:将画布图像获取到服务器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！