Сохранение изображения с холста на сервер. Пустое изображение сохраняется

Question

У меня есть следующий код для создания изображения из редактора формул и при нажатии кнопки «Сохранить», отображающей его на холсте. После отображения я sh сохраняю его. Он отображается нормально, но сохраняет пустое изображение. Дайте мне знать, где Я ошибаюсь

Javascript код

btn_save.onclick = function() 
{ 
var canvasimg = document.getElementById("canvas");
var eq = document.getElementById("equation");
var context = canvasimg.getContext("2d");
var imgurl;

context.clearRect(0, 0, canvasimg.width, canvasimg.height);
context.drawImage(eq, 0, 0, 50, 50);

imgurl = canvasimg.toDataURL("image/png");
imgurl = encodeURIComponent(imgurl);

var xmlhttp = new XMLHttpRequest();

xmlhttp.open("POST","http://www.build-exam.com/imgsave.php",true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send(imgurl); 
}

PHP код

<?php

header('Access-Control-Allow-Origin: *'); 

$postdata = file_get_contents("php://input");            // to get POST data
if($postdata)
{
  print_r("came in postdata");
  // Get the data
  $imageData=$postdata;

  // Remove the headers (data:,) part.
  // A real application should use them according to needs such as to check image type
  $filteredData=substr($imageData, strpos($imageData, ",")+1);
 // $unencodedData= $imageData;
  $filteredData = str_replace(' ', '+', $filteredData); 
  // Need to decode before saving since the data we received is already base64 encoded
  $unencodedData=base64_decode($filteredData);
  echo "unencodedData".$unencodedData;

  // Save file. This example uses a hard coded filename for testing,
  // but a real application can specify filename in POST variable
  $fp = fopen( 'd:\\Apache2.4\\htdocs\\imgfile.png', 'wb' );
  fwrite( $fp, $unencodedData);
  fclose( $fp );
}
?>

Answer 1

Просто декодируйте данные перед манипуляциями и не заменяйте вручную данные в base64.

<?php

header('Access-Control-Allow-Origin: *'); 

$postdata = file_get_contents("php://input");            // to get POST data
if($postdata)
{
  // print_r("came in postdata");
  // Get the data

  $imageData = urldecode( $postdata );

  // Remove the headers (data:,) part.
  // A real application should use them according to needs such as to check image type

  $filteredData=substr($imageData, strpos($imageData, ",")+1);

  // $unencodedData= $imageData;
  // $filteredData = str_replace(' ', '+', $filteredData); 
  // Need to decode before saving since the data we received is already base64 encoded

  $unencodedData=base64_decode($filteredData);

  // echo "unencodedData".$unencodedData;

  // Save file. This example uses a hard coded filename for testing,
  // but a real application can specify filename in POST variable
  $fp = fopen( 'd:\\Apache2.4\\htdocs\\imgfile.png', 'wb' );
  fwrite( $fp, $unencodedData);
  fclose( $fp );
}
?>