在PHP中，怎麼將影像儲存到伺服器資料夾中

Question

我有這段HTML程式碼：

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

還有這段js程式碼

<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>

按下按鈕應該下載內容"section.content"的映像，對嗎？實際上，這個操作是成功執行的，但是當我嘗試修改這段程式碼，使其將圖像下載到伺服器資料夾而不是下載到使用者的電腦時，我無法做到。

我嘗試了這個方法：

<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>

我嘗試管理儲存到伺服器的名為"image.php"的PHP程式碼，但沒有成功：

<?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);
?>

有關我可以改變的建議或更好的方法來實現我想要的目標嗎？首先，謝謝。

Answer 1

有一件事引起了我的注意，那就是你為$filePath變數定義的路徑。如果你想要上傳檔案的完整目錄樹不存在，寫入操作將會失敗。

您可以使用以下程式碼來確保到您要寫入的檔案的目錄樹存在，然後再嘗試寫入它。

$directory = dirname($filePath);
if (!is_dir($directory)) {
    mkdir($directory, 0777, true);
}

您也可以使用異常處理來確定錯誤的類型，以便進行偵錯。預設情況下，file_put_contents只會傳回一個警告，因此讓PHP拋出異常可能超出了您的專案範圍。

檢查您的PHP日誌也可以幫助您找出問題的原因。