如何保存画布作为一个png在本地主机通过php脚本与图像加载到画布

我使用以下函数向画布添加图像。我使用fabric.js来做这个。

 document.getElementById('imgLoader').onchange = function handleImage(e) {
    var reader = new FileReader();
    reader.onload = function (event) { console.log('fdsf');
        var imgObj = new Image();
        imgObj.src = event.target.result;

        imgObj.onload = function () {
            // start fabricJS stuff
            var image = new fabric.Image(imgObj);
            image.set({
                left: 250,
                top: 250,
                angle: 0,
                padding: 10,
                cornersize: 1
            });
            //image.scale(getRandomNum(0.1, 0.25)).setCoords();
            c.add(image);
            //context.drawImage(imgObj, 100, 100);
            // end fabricJS stuff
        }
    }
    reader.readAsDataURL(e.target.files[0]);
}

通过使用上面的函数，我可以成功地将图像添加到画布。但我的问题是，当我试图将画布保存为图像时，它会给出一个空白图像。我使用下面的代码将画布转换为图像。

var canvas = document.getElementById('c');  //Id of the canvas
var dataURL = canvas.toDataURL();    
$('#saveMe').click(function() {    
         $.ajax({
                type: "POST",
                url: "myscript.php",
                data: {
                    img: dataURL
                }
            }).done(function(o) {
                console.log('saved');
            });

myscript.php如下:

define('UPLOAD_DIR', 'C:/xampp/htdocs/pic/');
chmod(UPLOAD_DIR, 777);
$img = $_POST['img'];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = UPLOAD_DIR . uniqid() . '.png';
$success = file_put_contents($file, $data);
print $success ? $file : 'Unable to save the file.';

尽管我向画布添加了图像，但在保存时，我只得到空白画布，而没有得到我加载到画布中的图像。请帮帮我。