Как сохранить холст в виде png в localhost через скрипт 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.';

Несмотря на то, что я добавил изображения на холст, при сохранении я получаю только пустой холст, а не изображение, загруженное на холст. Пожалуйста, помогите мне. Спасибо заранее.