Tuvalim neden sunucuya yüklenmiyor?

Question

Arka plan, çıkartma ve metin gibi öğeleri ekleyebileceğiniz ve ardından tuvalde barındırılan sunucuya yükleyebileceğiniz bir kanvas yapmaya çalışın.

Farklı kılavuzlar ve kod izleri uyguladıktan sonra, sunucuya yükleme haricinde her şeyin çalışmasını sağlayın.

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

ve php dosyası:

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

Herhangi bir yardım eb çok takdir ediyorum, teşekkürler!

Answer 1

bir şey var:

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

olmalıdır:

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