Как сохранить HTML5 Canvas в качестве изображения на сервере?

Я работаю над проектом генеративного искусства, где я хотел бы разрешить пользователям сохранять полученные изображения из алгоритма. Общая идея:

• Создайте изображение на холсте HTML5 с помощью генеративного алгоритма
• Когда изображение будет завершено, разрешите пользователям сохранять холст в качестве файла изображения на сервере.
• Разрешить пользователю либо загружать изображение, либо добавлять его в галерею частей, созданных с использованием алгоритма.

Однако, я застрял на втором шаге. После некоторой помощи от Google я нашел этот пост в блоге, который, казалось, был именно тем, что я хотел:

Что привело к JavaScript-коду:

function saveImage() {
  var canvasData = canvas.toDataURL("image/png");
  var ajax = new XMLHttpRequest();

  ajax.open("POST", "testSave.php", false);
  ajax.onreadystatechange = function() {
    console.log(ajax.responseText);
  }
  ajax.setRequestHeader("Content-Type", "application/upload");
  ajax.send("imgData=" + canvasData);
}

и соответствующий PHP (testSave.php):

<?php
if (isset($GLOBALS["HTTP_RAW_POST_DATA"])) {
  $imageData = $GLOBALS['HTTP_RAW_POST_DATA'];
  $filteredData = substr($imageData, strpos($imageData, ",") + 1);
  $unencodedData = base64_decode($filteredData);
  $fp = fopen('/path/to/file.png', 'wb');

  fwrite($fp, $unencodedData);
  fclose($fp);
}
?>

Но это вообще ничего не делает.

Подробнее Googling включает этот пост в блоге, который основан на предыдущем уроке. Не совсем по-другому, но, возможно, стоит попробовать:

$data = $_POST['imgData'];
$file = "/path/to/file.png";
$uri = substr($data,strpos($data, ",") + 1);

file_put_contents($file, base64_decode($uri));
echo $file;

Этот файл создает файл (yay), но его повреждение и, похоже, ничего не содержит. Он также кажется пустым (размер файла равен 0).

Есть ли что-то действительно очевидное, что Im делает неправильно? Путь, где Im, сохраняющий мой файл, доступен для записи, поэтому это не проблема, но ничего похожего не происходит, и я не совсем уверен, как отлаживать это.

Изменить

Следуя ссылке Salvidor Dalis, я изменил запрос AJAX следующим образом:

function saveImage() {
  var canvasData = canvas.toDataURL("image/png");
  var xmlHttpReq = false;

  if (window.XMLHttpRequest) {
    ajax = new XMLHttpRequest();
  }
  else if (window.ActiveXObject) {
    ajax = new ActiveXObject("Microsoft.XMLHTTP");
  }

  ajax.open("POST", "testSave.php", false);
  ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  ajax.onreadystatechange = function() {
    console.log(ajax.responseText);
  }
  ajax.send("imgData=" + canvasData);
}

И теперь файл изображения создан и не пуст! Кажется, что тип содержимого имеет значение и что его изменение на x-www-form-urlencoded позволяет отправлять данные изображения.

Консоль возвращает (довольно большую) строку кода base64, а файл данных ~ 140 кБ. Тем не менее, я все еще не могу открыть его и, похоже, не отформатирован как изображение.