Comment enregistrer une image HTML5 Canvas sur un serveur ?

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

Les projets d'art génératif nécessitent souvent la possibilité d'enregistrer les images créées sur le serveur. Voici les étapes à suivre :

1. Création d'une image sur un canevas HTML5 : Utilisez un algorithme génératif pour créer une image sur un canevas HTML5.
2. Enregistrement du canevas en tant qu'image sur le serveur : Pour enregistrer le canevas en tant qu'image, utilisez JavaScript et PHP.

Code JavaScript :

function saveImage() {
  var canvasData = canvas.toDataURL("image/png");
  var ajax = new XMLHttpRequest();

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

PHP (testSave.php) :

<?php
$data = $_POST['imgData'];
$file = "/path/to/file.png";
$uri = substr($data,strpos($data, ",") + 1);

file_put_contents($file, base64_decode($uri));
echo $file;
?>

Commun Problèmes :

• Fichier vide ou corrompu : Assurez-vous que le chemin du fichier est accessible en écriture et que le type de contenu dans la requête JavaScript est défini sur "application/x-www -form-urlencoded."
• Chaîne Base64 : La console renvoie une grande chaîne base64, qui n'est pas un format d'image.
• Type de contenu incorrect : Le type de contenu doit être "image/png" lors de l'appel de canvas.toDataURL().

Conseils supplémentaires :

• Le partage de ressources d'origine croisée (CORS) peut empêcher la demande de compléter. Vérifiez les paramètres de votre serveur.
• Utilisez une visionneuse d'images pour valider le fichier enregistré.

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!