Pourquoi mes images HTML5 Canvas sont-elles corrompues lors de l'enregistrement sur le serveur ?

Dépannage lors de l'enregistrement d'un canevas HTML5 en tant qu'image sur le serveur

Problème

Après avoir suivi les didacticiels en ligne, tentative d'enregistrement d'un canevas HTML5 en tant qu'image sur le serveur entraîne des fichiers corrompus ou vides. La cause reste inconnue.

Solution

1. Configurez correctement XMLHttpRequest :

• Remplacez la création XMLHttpRequest personnalisée par ce qui suit pour prendre en charge les navigateurs anciens et modernes :

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

• Définissez le Type de contenu à application/x-www-form-urlencoded :

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

2. Modifiez le script PHP :

• Changez substr($imageData, strpos($imageData, ",")) en substr($imageData, strpos($imageData, ",")) 1 .
• Gérez les erreurs potentielles en vérifiant si le descripteur de fichier est valide avant écriture :

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

Code JavaScript et PHP révisé :

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!