キャンバスをサーバーにアップロードできないのはなぜですか？

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

すべてのヘルプEBは大歓迎だろう、ありがとう！

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