为什么我的画布无法上传到服务器？

Question

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

遵循了不同的指南和Codepen，并且除了上载到服务器部分之外，其他所有功能均正常运行。

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