为什么我的画布不能上传到服务器？

Question

尝试制作一个画布，您可以在其中添加背景、贴纸和文本等内容，然后将其上传到画布所在的服务器。

遵循不同的指南和代码，除了上传到服务器部分外，一切正常。

var canvas = new fabric.Canvas('canvas');

document.getElementById('file').addEventListener("change", function(e) {
  var file = e.target.files[0];
  var reader = new FileReader();
  console.log("reader   " + reader);
  reader.onload = function(f) {
    var data = f.target.result;
    fabric.Image.fromURL(data, function(img) {
      var oImg = img.set({
        left: 70,
        top: 100,
        width: 250,
        height: 200,
        angle: 0
      }).scale(0.9);
      canvas.add(oImg).renderAll();
      canvas.setActiveObject(oImg);
    });
  };
  reader.readAsDataURL(file);
});

$('#fill').change(function() {
  var obj = canvas.getActiveObject();
  if (obj) {
    obj.setFill($(this).val());
  }
  canvas.renderAll();
});

$('#font').change(function() {
  var obj = canvas.getActiveObject();
  if (obj) {
    obj.setFontFamily($(this).val());
  }
  canvas.renderAll();
});

function addText() {
  var oText = new fabric.IText('Tap and Type', {
    left: 100,
    top: 100,
  });

  canvas.add(oText);
  canvas.setActiveObject(oText);
  $('#fill, #font').trigger('change');
  oText.bringToFront();
}

document.querySelector('#txt').onclick = function(e) {
  e.preventDefault();
  canvas.deactivateAll().renderAll();
  document.querySelector('#preview').src = canvas.toDataURL();
};



canvas.add(new fabric.IText('Tap and Type', {
  fontFamily: 'arial black',
  left: 100,
  top: 100,
}));


function Shirt_Load(img) {
  var shirt = img.src;
  canvas.setBackgroundImage(shirt, canvas.renderAll.bind(canvas), {
    width: 600,
    height: 600
  });

}
var photo = canvas.toDataURL('image/jpeg');
$.ajax({
  method: 'POST',
  url: 'photo_upload.php',
  data: {
    photo: photo
  }
});

canvas {
  border: 1px solid black;
}

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script>

<input type="file" id="file">
<input type="color" value="blue" id="fill" />
<select id="font">
  <option>arial</option>
  <option>tahoma</option>
  <option>times new roman</option>
</select>
<button onclick="addText()">Add Custom Text</button>
<br />
<canvas id="canvas" width="750" height="550"></canvas>
<a href='' id='txt' target="_blank">Preview</a>
<br />
<img id="preview" />

<button type="submit" formmethod="post" formaction="photo_upload.php">Submit</button>
</form>

<img onclick="Shirt_Load(this);" src="http://www.koffid.nl/pics/bg1.png" width="100" height="100" />
<img onclick="Shirt_Load(this);" src="http://www.koffid.nl/pics/mk.png" width="100" height="100" />

和php文件：

<?php
	
	$data = $_POST['photo'];
	list($type, $data) = explode(';', $data);
	list(, $data)      = explode(',', $data);
	$data = base64_decode($data);

	mkdir($_SERVER['DOCUMENT_ROOT'] ./photos);

	file_put_contents($_SERVER['DOCUMENT_ROOT'] ./photos/.time().'.png', $data);
	die;
?>

非常感谢任何帮助，谢谢！

Answer 1

一件事：

var photo = canvas.toDataURL('image/jpeg');
$.ajax({
  method: 'POST',
  url: 'photo_upload.php',
  data: {
    photo: photo
  }
});

应该是：

var photo = canvas.toDataURL('image/jpeg');
$.ajax({
  method: 'POST',
  url: 'photo_upload.php',
  data: {
    'photo': photo
  }
});