Wie kann ich einen HTML5-Canvas als Bild auf einem Server speichern?

Einen HTML5-Canvas als Bild auf einem Server speichern

Um einen HTML5-Canvas als Bild auf einem Server zu speichern, führen Sie die folgenden Schritte aus:

1. Konvertieren Sie die Leinwand in eine Bilddaten-URL

var canvasData = canvas.toDataURL("image/png");

2. Erstellen Sie ein XMLHttpRequest-Objekt

var ajax = new XMLHttpRequest();

3. Öffnen Sie eine POST-Anfrage und legen Sie den Anforderungsheader fest

ajax.open("POST", "testSave.php", false);
ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

4. Canvas-Daten senden

ajax.send("imgData=" + canvasData);

5. Handle-Antwort

ajax.onreadystatechange = function() {
  console.log(ajax.responseText);
}

6. Auf PHP-Server

Erhalten Sie die Canvas-Daten und schreiben Sie sie als PNG-Datei auf den Server:

<?php
if (!empty($_POST['imgData'])) {
  // Convert base64 data to raw data
  $imgData = base64_decode($_POST['imgData']);

  // Set path and open file
  $fp = fopen('/path/to/file.png', 'wb');

  // Write raw data to file and close
  fwrite($fp, $imgData);
  fclose($fp);
}
?>

Zusätzliche Hinweise:

• Ersetzen Sie /path/to/file.png durch den gewünschten Dateipfad.
• Stellen Sie sicher, dass das Serververzeichnis vorhanden ist ist beschreibbar.
• Der AJAX-Anfrageheader kann bei Bedarf auch auf multipart/form-data gesetzt werden.
• Wenn die Bilddaten-URL nicht standardmäßige Zeichen enthält, verwenden Sie encodeURIComponent(), um diese zu maskieren .

Das obige ist der detaillierte Inhalt vonWie kann ich einen HTML5-Canvas als Bild auf einem Server speichern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!