Ich habe diesen HTML-Code:

<div id="container">
   <div id="calendar">
   </div>
 </div>
<button class="btn btn-dark mb-1" onclick="captureAndSave()">Format</button>

Es gibt auch diesen JS-Code

<script>

  function captureAndSave() 
  {
    // Select "calendar" element
    var elementToCapture = document.querySelector('section.content');

    // Hide ".noPrint" elements
    var elementsToHide = elementToCapture.querySelectorAll('.noPrint');
    elementsToHide.forEach(function(element)
    {
      element.style.visibility = 'hidden';
    });

    html2canvas(elementToCapture).then(function(canvas) 
    {
      var imageBase64 = canvas.toDataURL('image/png');

      elementsToHide.forEach(function(element) 
      {
        element.style.visibility = 'visible';
      });

      var link = document.createElement('a');
      link.href = imageBase64;
      link.download = 'captura.png';

      link.click();
    });
  }

</script>

Durch Drücken der Schaltfläche sollte das Bild des Inhalts „section.content“ heruntergeladen werden, oder? Eigentlich wird dieser Vorgang erfolgreich ausgeführt, aber wenn ich versuche, diesen Code so zu ändern, dass er das Bild in den Serverordner herunterlädt, anstatt es auf den Computer des Benutzers herunterzuladen, gelingt mir das nicht.

Ich habe diese Methode ausprobiert:

<script>

function captureAndSave() 
{
  var elementToCapture = document.querySelector('section.content');

  var elementsToHide = elementToCapture.querySelectorAll('.noPrint');
  elementsToHide.forEach(function (element) {
    element.style.visibility = 'hidden';
  });

  html2canvas(elementToCapture).then(function (canvas) {
    var imageBase64 = canvas.toDataURL('image/png');

    elementsToHide.forEach(function (element) {
      element.style.visibility = 'visible';
    });

    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'assets/imagen.php', true);
    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

    var data = 'image=' + encodeURIComponent(imageBase64);
    xhr.send(data);

    xhr.onload = function () {
      if (xhr.status === 200) {
        var response = JSON.parse(xhr.responseText);
        if (response.success) {
          alert(response.message);
        } else {
          alert('Error: ' + response.message);
        }
      }
    };
  });
}

</script>

Ich habe versucht, einen auf dem Server gespeicherten PHP-Code namens „image.php“ zu verwalten, aber ohne Erfolg:

<?php
$response = array();

if(isset($_POST['image'])) 
{
  $imageData = $_POST['image'];

  $filePath = '../vistas/img/temp/imagen.png';

  if(file_put_contents($filePath, base64_decode(preg_replace('#^data:image/w+;base64,#i', '', $imageData)))) 
  {
    $response['success'] = true;
    $response['message'] = 'The image has been saved successfully.';
  } 
  else 
  {
    $response['success'] = false;
    $response['message'] = 'There was an error saving the image.';
  }
} 
else 
{
  $response['success'] = false;
  $response['message'] = 'No image received.';
}

  header('Content-type: application/json');
  echo json_encode($response);
?>

Irgendwelche Vorschläge für Änderungen, die ich vornehmen kann, oder einen besseren Weg, das zu erreichen, was ich will? Zunächst einmal vielen Dank.