Comment puis-je enregistrer un canevas HTML5 en tant qu'image sur un serveur ?

Enregistrement d'un canevas HTML5 en tant qu'image sur un serveur

Pour enregistrer un canevas HTML5 en tant qu'image sur un serveur, procédez comme suit :

1. Convertir le canevas en URL de données d'image

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

2. Créez un objet XMLHttpRequest

var ajax = new XMLHttpRequest();

3. Ouvrez une requête POST et définissez l'en-tête de la requête

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

4. Envoyer des données Canvas

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

5. Gérer la réponse

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

6. Sur le serveur PHP

Recevez les données du canevas et écrivez-les sur le serveur sous forme de fichier PNG :

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

Notes supplémentaires :

• Remplacez /path/to/file.png par le chemin de fichier souhaité.
• Assurez-vous que le répertoire du serveur est accessible en écriture.
• L'en-tête de requête AJAX peut également être défini sur multipart/form-data si nécessaire.
• Si l'URL des données d'image contient des caractères non standard, utilisez encodeURIComponent() pour les échapper. .

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!