Почему мой холст не загружается на сервер?

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 
 
\t 
 
\t $data = $_POST['photo']; 
 
\t list($type, $data) = explode(';', $data); 
 
\t list(, $data)  = explode(',', $data); 
 
\t $data = base64_decode($data); 
 

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

 
\t file_put_contents($_SERVER['DOCUMENT_ROOT'] ./photos/.time().'.png', $data); 
 
\t 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 
    } 
});