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

Создать изображение на холсте 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):

Но это некажется, вообще ничего не делает.

Более Google прибегает к этомуСообщение блога который основан на предыдущем уроке. Не сильно отличается, но, возможно, стоит попробовать:

$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).

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

редактировать

Вслед за Сальвидором ДалиЯ изменил запрос 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 кБ. Тем не менее, я все еще могуt, и он, кажется, не отформатирован как изображение.