I've created a canvas via jQuery and need to save it back to the public file directory as an image, so I can access it like any other image.

There are a lot of solutions posted all over the place, and I've tried all kinds of combinations with zero luck.

I have the following jQuery after the canvas has been created:

var canvas = document.getElementById('myCanvas');
var dataURL = canvas.toDataURL();

$.ajax({
  type: "POST",
  url:  "save.php",
  data: { 
     imgBase64: dataURL
  }
})

Then the following php as called in save.php:

$img = $_POST['data'];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$fileData = base64_decode($img);
$fileName = 'public://' . 'myCanvas.png';
file_put_contents($fileName, $fileData);

I've also tried with variations on the save script, such as, with no luck:

file_save_data($fileData);

Any ideas?

I've created a canvas via jQuery and need to save it back to the public file directory as an image, so I can access it like any other image.

I can create the file and save it, into the same file location as my save.php script, but unable to save it to the public file directory...

var canvas = document.getElementById('myCanvas');
var dataURL = canvas.toDataURL("image/png");

$.ajax({
  type: "POST",
  url:  Drupal.settings.basePath + "mypath/save.php",
  data: { 
     imgBase64: dataURL
  }
})

Then the following php as called in save.php:

$img = $_POST['imgBase64'];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$fileData = base64_decode($img);
$fileName = 'public://' . uniqid() . 'myCanvas.png';
file_put_contents($fileName, $fileData);

excluding 'public://' . will happily save to the location specified in Drupal.settings.basePath + "mypath/...", but I'm unable to tell it to save to the public directory or even any directory structure...