Warum wird meine Leinwand nicht auf den Server hochgeladen?

Question

Versuchen, eine Leinwand zu erstellen, wo Sie Zeug wie einen Hintergrund, Aufkleber und Text hinzufügen können und dann auf den Server hochladen können, auf dem die Leinwand gehostet wird.

Gefolgt von verschiedenen Guides und Codepen, und alles funktioniert außer dem Upload zum Server Teil.

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" />

und die PHP-Datei:

<?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; 
 
?>

Jede mögliche Hilfe eb sehr geschätzt, Dank!

Answer 1

Eine Sache:

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

sollte sein:

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