Warum sind meine HTML5-Canvas-Bilder beim Speichern auf dem Server beschädigt?

Fehlerbehebung beim Speichern eines HTML5-Canvas als Bild auf dem Server

Problem

Nachdem Sie die Online-Tutorials befolgt haben, wird versucht, einen HTML5-Canvas als Bild zu speichern auf dem Server führen zu beschädigten oder leeren Dateien. Die Ursache bleibt unbekannt.

Lösung

1. Konfigurieren Sie die XMLHttpRequest korrekt:

• Ersetzen Sie die benutzerdefinierte XMLHttpRequest-Erstellung durch Folgendes, um sowohl alte als auch moderne Browser zu unterstützen:

var xmlHttpReq = false;
if (window.XMLHttpRequest) {
  ajax = new XMLHttpRequest();
} else if (window.ActiveXObject) {
  ajax = new ActiveXObject("Microsoft.XMLHTTP");
}

• Legen Sie die fest Inhaltstyp zu application/x-www-form-urlencoded:

ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

2. Ändern Sie das PHP-Skript:

• Ändern Sie substr($imageData, strpos($imageData, ","")) in substr($imageData, strpos($imageData, ","")) 1 .
• Behandeln Sie potenzielle Fehler, indem Sie vorher prüfen, ob das Dateihandle gültig ist Schreiben:

if ($fp) {
  fwrite($fp, $unencodedData);
  fclose($fp);
}

Überarbeiteter JavaScript- und PHP-Code:

JavaScript

function saveImage() {
  var canvasData = canvas.toDataURL("image/png");
  var xmlHttpReq = false;

  if (window.XMLHttpRequest) {
    ajax = new XMLHttpRequest();
  } else if (window.ActiveXObject) {
    ajax = new ActiveXObject("Microsoft.XMLHTTP");
  }

  ajax.open("POST", "testSave.php", false);
  ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  ajax.onreadystatechange = function() {
    console.log(ajax.responseText);
  }
  ajax.send("imgData=" + canvasData);
}

PHP

<?php
if (isset($GLOBALS["HTTP_RAW_POST_DATA"])) {
  $imageData = $GLOBALS['HTTP_RAW_POST_DATA'];
  $filteredData = substr($imageData, strpos($imageData, ",")+1);
  $unencodedData = base64_decode($filteredData);

  if ($fp = fopen('/path/to/file.png', 'wb')) {
    fwrite($fp, $unencodedData);
    fclose($fp);
  }
}
?>

Das obige ist der detaillierte Inhalt vonWarum sind meine HTML5-Canvas-Bilder beim Speichern auf dem Server beschädigt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!