Question

我正在使用ajax将画布图像发送到将捕获它的php页面。控制台告诉我每次都失败，甚至没有发送。我已经仔细检查了一切，但仍然没有看到问题。我终于离开它一个星期然后回到它，过去几个小时我仍然没有看到这个问题。我在看什么？服务器上的jQuery版本是2.2.4

var dataURL = canvas.toDataURL();
var pngImage = new FormData();
pngImage.append('Image', dataURL);

$.ajax({
  url: 'upload.php',
  method: 'POST',
  dataType : 'text',
  data: pngImage,
  cache: false,
  contentType: false,
  processData: false,
  success: function(data) {
    console.log("sucessful send:");
    console.log(data);
  },
  error: function() {
    console.log('failed');
  }
});

更新：使用时

    var Grabcanvas = document.getElementById("signature");
    var ImgData = document.getElementById("Image").value = Grabcanvas.toDataURL();

    var pngImage = new FormData();

    pngImage.append('Image', $('#signature')[0].toDataURL());

    console.log(ImgData); 
    console.log(pngImage);

    $.ajax({
      url: 'upload.php',
      type: 'POST',
      dataType : 'text',
      data: pngImage,
      cache: false,
      contentType: false,
      processData: false,

      success: function(data) {
      console.log("sucessful send:");
      console.log(data);
      },
      error: function(d) {
      console.log('error');
      console.log(d);
      console.log(d.responseText);
      }

var ImgData返回正确的画布数据，但var pngImage为空，并在控制台中返回FormData { }。

Answer 1

我认为因为你没有得到正确的pngImage元素。

dataToURL（）我用于本机javascript dom，而不是jquery dom。

这意味着如果画布的id是userData，你应该这样做：

#canvas

或在jquery中

var pngImage = new FormData();
        pngImage.append('Image', document.getElementById('canvas').toDataURL());

所以我们的代码如下：

    pngImage.append('Image', $('canvas')[0].toDataURL());

PHP

<canvas id="canvas" width="5" height="5"></canvas>
    <script src="jquery-3.3.1.min.js"></script>
    <script>
    $(function(){
        var pngImage = new FormData();
        pngImage.append('Image', $('#canvas')[0].toDataURL());

        $.ajax({
          url: 'upload.php',
          type: 'POST',
          dataType : 'text',
          data: pngImage,
          cache: false,
          contentType: false,
          processData: false,
          success: function(data) {
            console.log("sucessful send:");
            console.log(data);
          },
          error: function(d) {
            console.log('error');
            console.log(d); //show error
            console.log(d.responseText); //show error reponse text
          }
        });
    })
    </script>

你会看到

<?php print_r($_POST);?>

更新：

我需要先吃午饭^ _ ^

为什么你不能使用$ _POST捕获POST？因为你错过了编写语法，我复制粘贴你的代码而不仔细阅读。（所以，我很幸运能使用$ _REQUEST XD）

sucessful send: Array ( [Image] => data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAADElEQVQImWNgoBMAAABpAAFEI8ARAAAAAElFTkSuQmCC ) =＆gt;在jquery ajax中没有名为method: 'POST'的方法。正确的方法是method，然后你可以使用$ _POST捕获它。（尝试改为$ _GET以便学习）

huft ...我怎么能错过

您希望使用二进制/ blob样式上传图像，但您的数据实际上只是字符串/文本。在这种情况下，我真的更喜欢这样做

type: 'POST'

PHP

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<canvas id="canvas" width="5" height="5"></canvas>
<script>
$(function(){
    $.ajax({
      url: 'upload.php',
      type: 'POST',
      data: {Image: $('#canvas')[0].toDataURL()},
      success: function(data) {
        console.log(data);
      },
      error: function(d) {
        console.log('error');
      }
    });
})
</script>

Answer 2

举个例子，认为这是你的元素，

<canvas id="canvas" width="5" height="5"></canvas>

现在你需要选择这个元素，

var canvas = document.getElementById('canvas');

并且

var dataURL = canvas.toDataURL();

然后你可以通过Ajax发送

$.ajax({
   url: 'a.php',
   method: 'POST',
   data: dataURL,
   success: function(data) {
      console.log("sucessful send:");
      console.log(data);
   },
   error: function(d) {
      console.log('error');
      console.log(d); //show error
      console.log(d.responseText); //show error reponse text
   }
});

Answer 3

因此，对于那些通过AJAX从画布发送图像时出现问题的人来说，这是一个答案。没有人会在这里给我正确的信息，或者只是想成为混蛋并继续投票。我在其他地方找到了一个很好的人来解释我的问题。使用toDataURL()将画布转换为dataURL时，您必须从dataURL字符串中删除data:image/png;base64,，否则它将不会发送。这是通过一个简单的行来实现的var png = ImgData.split(',')[1];数据现在没有问题，可以在PHP中获取并转换没有问题。我真诚地希望这对未来的某个人有所帮助，因为它给我带来了很多问题，得到了正确答案。

var Grabcanvas = document.getElementById("signature");

var ImgData = Grabcanvas.toDataURL();

var png = ImgData.split(',')[1]; //THIS IS WHAT DID IT

$.ajax({
  url: 'upload.php',
  type: 'POST',
  dataType : 'text',
  contentType: "application/x-www-form-urlencoded; charset=UTF-8",
  data: {"Image" : png},

  success: function(data) {
  console.log("sucessful send:");
  console.log(data);
  },
  error: function(d) {
  console.log('error');
  console.log(d);
  console.log(d.responseText);
  }

ajax POST让我疯了。代码似乎正确，但发送失败

3 个答案:

huft ...我怎么能错过