Copy image file from server to disk in PHP - php

Question

I have a js script that saves an image as .jpg in a specific folder on the server:
$data = substr($_POST['imageData'], strpos($_POST['imageData'], ",") + 1);
$decodedData = base64_decode($data);
$fp = fopen("imgdownload/cc.jpg", 'wb');
fwrite($fp, $decodedData);
fclose($fp);
The next step would be for the user to save it on his/her disk, the best would be to open a dialog box "save as" and choose the name and location, but just forcing download to a set location would be a dream.
I've tried:
$file = 'imgdownload/cc.jpg';
if (file_exists($file)) {
header('Content-Description: File Transfer');
header('Content-Type: image/jpg');
header('Content-Disposition: attachment; filename='.basename($file));
header('Expires: 0');
header('Cache-Control: must-revalidate');
header('Pragma: public');
header('Content-Length: ' . filesize($file));
readfile($file);
exit;
}
And other things without success. What am I doing wrong and how to do it right?
EDIT - this is my JS:
savePicture: function() {
$(this.el).find('canvas').attr('id', 'myCanvas');
var data = document.getElementById("myCanvas").toDataURL();
$.post("api/process.php", {
imageData: data
}, function(data) {
//window.location = data;
});
},

Answer 1

You cannot trigger a download in response to a background AJAX request. You'll have to direct the main browser to the URL where the download occurs. E.g., in your AJAX callback:
window.location = '/download.php';
That means you'll need to store the file server-side in the AJAX upload request to then have it available for download in the separate following request to download.php somewhere.