javascript - example - jquery canvas




Come salvare un Canvas HTML5 come un'immagine su un server? (5)

Ecco un esempio su come ottenere ciò di cui hai bisogno:

1) Disegna qualcosa (tratto dal tutorial su tela )

<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) Converti immagine canvas in formato URL (base64)

var dataURL = canvas.toDataURL();

3) Invia al tuo server tramite 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) Salva base64 sul tuo server come immagine (ecco come farlo in PHP , le stesse idee sono in tutte le lingue. Il lato server in PHP può essere trovato qui ):

Sto lavorando a un progetto di arte generativa in cui vorrei consentire agli utenti di salvare le immagini risultanti da un algoritmo. L'idea generale è:

  • Crea un'immagine su una tela HTML5 utilizzando un algoritmo generativo
  • Al termine dell'immagine, consentire agli utenti di salvare la tela come file immagine sul server
  • Consenti all'utente di scaricare l'immagine o aggiungerla a una galleria di pezzi prodotti utilizzando l'algoritmo.

Tuttavia, sono bloccato sul secondo passaggio. Dopo l'aiuto di Google, ho trovato questo post sul blog , che sembrava essere esattamente quello che volevo:

Che ha portato al codice 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);
}

e PHP corrispondente (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);
}
?>

Ma questo non sembra fare nulla.

Più Googling apre questo post sul blog che si basa sul tutorial precedente. Non molto diverso, ma forse vale la pena provare:

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

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

Questo crea un file (yay) ma è corrotto e non sembra contenere nulla. Sembra anche essere vuoto (dimensione del file di 0).

C'è qualcosa di veramente ovvio che sto sbagliando? Il percorso in cui sto archiviando il mio file è scrivibile, quindi non è un problema, ma non sembra che stia accadendo nulla e non sono sicuro di come eseguire il debug di questo.

modificare

Seguendo il link di Salvidor Dali ho cambiato la richiesta AJAX come:

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

E ora il file immagine è stato creato e non è vuoto! Sembra che il tipo di contenuto sia importante e che cambiandolo in x-www-form-urlencoded permesso l'invio dei dati dell'immagine.

La console restituisce la stringa (piuttosto grande) del codice base64 e il file di dati è ~ 140 kB. Tuttavia, non riesco ancora ad aprirlo e sembra non essere formattato come un'immagine.


Ho giocato con questo due settimane fa, è molto semplice. L'unico problema è che tutti i tutorial parlano di come salvare l'immagine localmente. Ecco come l'ho fatto:

1) Ho creato un modulo in modo da poter usare un metodo POST.

2) Quando l'utente ha finito di disegnare, può fare clic sul pulsante "Salva".

3) Quando si fa clic sul pulsante, prendo i dati dell'immagine e li inserisco in un campo nascosto. Successivamente, invio il modulo.

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

4) Quando il modulo è stato inviato, ho questo piccolo 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']);
?>

Invia immagine canvas a PHP:

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

Ecco lo 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;
?>

Oltre alla risposta di Salvador Dali:

sul lato server non dimenticare che i dati sono in formato stringa base64. È importante perché in alcuni linguaggi di programmazione è necessario dire esplicitamente che questa stringa deve essere considerata come byte non semplice stringa Unicode.

Altrimenti la decodifica non funzionerà: l'immagine verrà salvata ma sarà un file illeggibile.


Se si desidera salvare i dati derivati ​​da una funzione canvas.toDataURL() Javascript, è necessario convertire spazi vuoti in file vuoti. Se non lo fai, i dati decodificati sono corrotti:

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

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







html5-canvas