Написание графического редактора tui на сервер

Question

Я использую Tui Image editor .В частности, я работаю из примера 01 Включить пользовательский интерфейс.

Мне нужно получить отредактированное изображение с холста и записать его обратно на сервер.Как мне решить эту проблему?

Я обнаружил, что то, что я попробовал ниже, изменилось на:

document.getElementsByClassName("upper-canvas "); 

с завершающим пробелом после холста, как я вижу это при проверке.

html

<div>
    <button onClick="saveCards();">Save</button>
</div>

JavaScript

<script type="text/javascript">
function saveCards()
{ 
  var canvas = document.getElementsByClassName("upper-canvas ");
  var i;
  alert("stops");
  var theString = canvas.toDataURL();

  var postData = "CanvasData="+theString;
  var ajax = new XMLHttpRequest();
  ajax.open("POST", 'saveCards.php', true);
  ajax.setRequestHeader('Content-Type', 'canvas/upload');

  ajax.onreadystatechange=function() {
    if(ajax.readyState == 4) {
      alert("image was saved");
    } else {
      alert("image was not saved");
    }
  }
  ajax.send(postData);
}
</script>

PHP

<?php

if(isset($GLOBALS['HTTP_RAW_POST_DATA']));
{

$rawImage=$GLOBALS['HTTP_RAW_POST_DATA'];
$removeHeaders=substr($rawImage,strpos($rawImage, ",")+1);
  $decode=base64_decode($removeHeaders);
  $fopen= fopen('image/image.png', 'wb');
  fwrite($fopen, $decode);
  fclose($fopen);
}
?>

Я получаю сообщение об ошибке "stop", которое, как я предполагаю, означает, что оно не получает холст.