Comment enregistrer une image Canvas HTML5 sur un serveur à l'aide de JavaScript et PHP ?

Comment enregistrer un canevas HTML5 en tant qu'image sur un serveur

Dans votre quête visant à permettre aux utilisateurs d'enregistrer des images générées à partir d'un canevas HTML5 , vous avez rencontré des difficultés. Pour résoudre ce problème, voici une approche améliorée :

Code JavaScript :

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

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

Code PHP (save-image.php) :

1. Répartition :
3. Nous rassemblons les données du canevas dans la fonction JavaScript.
Au lieu d'utiliser une requête XHR directe, nous utilisons FormData, qui permet les requêtes multipart/form-data.

Sur du côté PHP, nous acceptons les canvasData via POST et extrayons les données d'image réelles.Nous créons un fichier inscriptible et y écrivons les données d'image décodées encodées en base64.

• Conseils :

Assurez-vous que '/path/to/file.png' est correctement écrit autorisations.Si l'image semble corrompue ou vide, vérifiez que le type de données envoyé par la fonction JavaScript correspond au type de données attendu dans le script PHP.

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!