Comment sauvegarder une toile HTML5 comme une image sur un serveur?

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 sauvegarder l'image localement. C'est comme ça que je l'ai fait:

1) j'ai mis en place un formulaire pour pouvoir utiliser une méthode de POST.

2) Lorsque l'Utilisateur a terminé le dessin, il peut cliquer sur le bouton "Enregistrer".

3) lorsque le bouton est cliqué je prends les données de l'image et les mets dans un champ caché. Après cela, j'ai envoyer 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 dans base64 à l'image avec blob, parce que lorsque vous utilisez base64 image, il faut beaucoup de lignes de log ou beaucoup de ligne va envoyer 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 Code canvas ici:

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

après cela, vous pouvez utiliser ajax avec la forme:

  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 voulez enregistrer des données qui sont dérivées de la fonction Javascript canvas.toDataURL() , vous devez convertir des 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

envoyer l'image de la toile à 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;
?>

en plus de la réponse de Salvador Dali:

côté serveur n'oubliez pas que les données sont au format base64 string . C'est important parce que dans certains langages de programmation vous devez expliquer que cette chaîne doit être considérée comme bytes pas une simple chaîne Unicode.

sinon le décodage ne fonctionnera pas: l'image sera sauvegardée mais ce sera un fichier illisible.

j'ai travaillé sur quelque chose de similaire. Avait pour convertir toile Base64 image 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);