Wie speichere ich ein HTML5-Canvas-Bild mit JavaScript und PHP auf einem Server?

So speichern Sie eine HTML5-Leinwand als Bild auf einem Server

In Ihrem Bestreben, Benutzern das Speichern von Bildern zu ermöglichen, die von einer HTML5-Leinwand generiert wurden , Sie sind auf Schwierigkeiten gestoßen. Um dieses Problem zu beheben, finden Sie hier einen verbesserten Ansatz:

JavaScript-Code:

function saveImage() {
  var canvasData = canvas.toDataURL("image/png");
  var formData = new FormData();

  formData.append("canvasData", canvasData);

  var ajax = new XMLHttpRequest();
  ajax.open("POST", "save-image.php", false);
  ajax.onreadystatechange = function() {
    console.log(ajax.responseText);
  };
  ajax.send(formData);
}

PHP-Code (save-image.php):

if (isset($_POST["canvasData"])) {
  $data = $_POST["canvasData"];
  $uri = substr($data, strpos($data, ",") + 1);

  $fp = fopen('/path/to/file.png', 'wb');
  fwrite($fp, base64_decode($uri));
  fclose($fp);
}

Aufschlüsselung:

1. Wir sammeln die Canvas-Daten in der JavaScript-Funktion.
2. Anstatt einer direkten XHR-Anfrage verwenden wir FormData, das mehrteilige/Formulardatenanfragen ermöglicht.
3. Ein Auf der PHP-Seite akzeptieren wir die CanvasData per POST und extrahieren die eigentlichen Bilddaten.
4. Wir erstellen eine beschreibbare Datei und schreiben die dekodierten Base64-kodierten Bilddaten hinein.

Tipps:

• Stellen Sie sicher, dass „/path/to/file.png“ richtig geschrieben ist Berechtigungen.
• Wenn das Bild beschädigt oder leer erscheint, überprüfen Sie, ob der von der JavaScript-Funktion gesendete Datentyp mit dem erwarteten Datentyp im PHP-Skript übereinstimmt.

Das obige ist der detaillierte Inhalt vonWie speichere ich ein HTML5-Canvas-Bild mit JavaScript und PHP auf einem Server?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!