Comment enregistrer une toile HTML5 en tant qu'image sur un serveur?

Je travaille sur un projet d'art génératif où j'aimerais permettre aux utilisateurs de sauvegarder les images résultantes d'un algorithme. L'idée générale est:

• Créer une image sur un canevas HTML5 à l'aide d'un algorithme génératif
• Une fois l'image terminée, autorisez les utilisateurs à enregistrer le canevas en tant que fichier image sur le serveur
• Permettez à l'utilisateur de télécharger l'image ou de l'ajouter à une galerie de pièces produites à l'aide de l'algorithme.

Cependant, je suis coincé sur la deuxième étape. Après un peu d'aide de Google, j'ai trouvé ce billet de blog , qui semblait être exactement ce que je voulais:

Ce qui a conduit au 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/upload");
  ajax.send("imgData=" + canvasData);
}

et PHP correspondant (testSave.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);
  $fp = fopen('/path/to/file.png', 'wb');

  fwrite($fp, $unencodedData);
  fclose($fp);
}
?>

Mais cela ne semble rien faire du tout.

Plus Google recherche ce blog qui est basé sur le tutoriel précédent. Pas très différent, mais peut-être mérite un essai:

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

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

Celui-ci crée un fichier (ouais) mais il est corrompu et ne semble rien contenir. Il semble également être vide (taille de fichier de 0).

Y a-t-il quelque chose de vraiment évident que je fais mal? Le chemin où je stocke mon fichier est accessible en écriture, donc ce n'est pas un problème, mais rien ne semble se produire et je ne sais pas vraiment comment déboguer cela.

Éditer

Suite au lien de Salvidor Dali, j'ai changé la demande AJAX pour qu'elle soit:

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

Et maintenant, le fichier image est créé et n'est pas vide! Il semble que le type de contenu soit important et que le changer pour x-www-form-urlencodedautoriser l'envoi des données d'image.

La console renvoie la chaîne (plutôt volumineuse) de code base64 et le fichier de données est ~ 140 Ko. Cependant, je ne peux toujours pas l'ouvrir et il ne semble pas être formaté en tant qu'image.

Voici un exemple de réalisation de ce dont vous avez besoin:

1) Dessinez quelque chose (tiré du tutoriel de toile )

<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');

    // begin custom shape
    context.beginPath();
    context.moveTo(170, 80);
    context.bezierCurveTo(130, 100, 130, 150, 230, 150);
    context.bezierCurveTo(250, 180, 320, 180, 340, 150);
    context.bezierCurveTo(420, 150, 420, 120, 390, 100);
    context.bezierCurveTo(430, 40, 370, 30, 340, 50);
    context.bezierCurveTo(320, 5, 250, 20, 250, 50);
    context.bezierCurveTo(200, 5, 150, 20, 170, 80);

    // complete custom shape
    context.closePath();
    context.lineWidth = 5;
    context.fillStyle = '#8ED6FF';
    context.fill();
    context.strokeStyle = 'blue';
    context.stroke();
</script>

2) Convertir l'image de canevas au format URL (base64)

var dataURL = canvas.toDataURL();

3) Envoyez-le à votre serveur via Ajax

$.ajax({
  type: "POST",
  url: "script.php",
  data: { 
     imgBase64: dataURL
  }
}).done(function(o) {
  console.log('saved'); 
  // If you want the file to be visible in the browser 
  // - please modify the callback in javascript. All you
  // need is to return the url to the file, you just saved 
  // and than put the image in your browser.
});

3) Enregistrez base64 sur votre serveur en tant qu'image (voici comment faire cela en PHP , les mêmes idées sont dans tous les langages. Côté serveur en PHP peut être trouvé ici ):

J'ai joué avec ça il y a deux semaines, c'est très simple. Le seul problème est que tous les tutoriels ne parlent que de l'enregistrement local de l'image. Voici comment je l'ai fait:

1) J'ai créé un formulaire pour pouvoir utiliser une méthode POST.

2) Lorsque l'utilisateur a fini de dessiner, il peut cliquer sur le bouton "Enregistrer".

3) Lorsque le bouton est cliqué, je prends les données d'image et les mets dans un champ caché. Après cela, je soumets le formulaire.

document.getElementById('my_hidden').value = canvas.toDataURL('image/png');
document.forms["form1"].submit();

4) Lorsque le formulaire est soumis, j'ai ce petit script php:

<?php 
$upload_dir = somehow_get_upload_dir();  //implement this function yourself
$img = $_POST['my_hidden'];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = $upload_dir."image_name.png";
$success = file_put_contents($file, $data);
header('Location: '.$_POST['return_url']);
?>

Je pense que vous devriez transférer l'image en base64 vers l'image avec blob, car lorsque vous utilisez l'image base64, cela prend beaucoup de lignes de journal ou beaucoup de lignes seront envoyées au serveur. Avec blob, c'est seulement le fichier. Vous pouvez utiliser ce code ci-dessous:

dataURLtoBlob = (dataURL) ->
  # Decode the dataURL
  binary = atob(dataURL.split(',')[1])
  # Create 8-bit unsigned array
  array = []
  i = 0
  while i < binary.length
    array.push binary.charCodeAt(i)
    i++
  # Return our Blob object
  new Blob([ new Uint8Array(array) ], type: 'image/png')

Et le code canvas ici:

canvas = document.getElementById('canvas')
file = dataURLtoBlob(canvas.toDataURL())

Après cela, vous pouvez utiliser ajax avec Form:

  fd = new FormData
  # Append our Canvas image file to the form data
  fd.append 'image', file
  $.ajax
    type: 'POST'
    url: '/url-to-save'
    data: fd
    processData: false
    contentType: false

Ce code utilise la syntaxe CoffeeScript.

si vous souhaitez utiliser javascript, veuillez coller le code sur http://js2.coffee

Envoyer une image de canevas à PHP:

var photo = canvas.toDataURL('image/jpeg');                
$.ajax({
  method: 'POST',
  url: 'photo_upload.php',
  data: {
    photo: photo
  }
});

Voici le script PHP:
photo_upload.php

<?php

    $data = $_POST['photo'];
    list($type, $data) = explode(';', $data);
    list(, $data)      = explode(',', $data);
    $data = base64_decode($data);

    mkdir($_SERVER['DOCUMENT_ROOT'] . "/photos");

    file_put_contents($_SERVER['DOCUMENT_ROOT'] . "/photos/".time().'.png', $data);
    die;
?>

Si vous souhaitez enregistrer des données dérivées d'une canvas.toDataURL()fonction Javascript , vous devez convertir les blancs en plus. Si vous ne le faites pas, les données décodées sont corrompues:

<?php
  $encodedData = str_replace(' ','+',$encodedData);
  $decocedData = base64_decode($encodedData);
?>

http://php.net/manual/ro/function.base64-decode.php

J'ai travaillé sur quelque chose de similaire. J'ai dû convertir une image encodée en Base64 sur toile Uint8Array Blob.

function b64ToUint8Array(b64Image) {
   var img = atob(b64Image.split(',')[1]);
   var img_buffer = [];
   var i = 0;
   while (i < img.length) {
      img_buffer.push(img.charCodeAt(i));
      i++;
   }
   return new Uint8Array(img_buffer);
}

var b64Image = canvas.toDataURL('image/jpeg');
var u8Image  = b64ToUint8Array(b64Image);

var formData = new FormData();
formData.append("image", new Blob([ u8Image ], {type: "image/jpg"}));

var xhr = new XMLHttpRequest();
xhr.open("POST", "/api/upload", true);
xhr.send(formData);

En plus de la réponse de Salvador Dali:

côté serveur, n'oubliez pas que les données sont au format de chaîne base64 . C'est important car dans certains langages de programmation, vous devez dire explicitement que cette chaîne doit être considérée comme des octets et non comme une simple chaîne Unicode.

Sinon, le décodage ne fonctionnera pas: l'image sera enregistrée mais ce sera un fichier illisible.