Jak zapisać płótno HTML5 Jako obraz na serwerze?

Grałem tym dwa tygodnie temu, to bardzo proste. Jedynym problemem jest to, że wszystkie samouczki mówią tylko o zapisywaniu obrazu lokalnie. Tak to zrobiłem:

1) skonfigurowałem formularz, aby móc korzystać z metody POST.

2) po zakończeniu rysowania użytkownik może kliknąć przycisk" Zapisz".

3) Po kliknięciu przycisku biorę dane obrazu i umieszczam je w ukrytym polu. Następnie przesyłam formularz.

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

4) po przesłaniu formularza mam taki mały php skrypt:

<?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']);
?>

Myślę, że powinieneś przenieść obraz w base64 na obraz z blobem, ponieważ gdy używasz obrazu base64, zajmuje to dużo linii logów lub dużo linii wyśle na serwer. Z blob, to tylko plik. Możesz użyć tego kodu poniżej:

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')

I Kod płótna tutaj:

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

Następnie możesz użyć ajax z formularzem:

  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

Ten kod używa składni CoffeeScript.

Jeśli chcesz zapisać dane pochodzące z funkcji Javascript canvas.toDataURL(), musisz przekonwertować spacje na plusy. Jeśli tego nie zrobisz, zdekodowane dane zostaną uszkodzone:

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

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

Wyślij obraz canvas do PHP:

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

Oto skrypt 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;
?>

Oprócz odpowiedzi Salvadora Dali:

Po stronie serwera nie zapomnij, że dane są w formacie base64 string . Jest to ważne, ponieważ w niektórych językach programowania należy wyraźnie powiedzieć, że łańcuch ten powinien być traktowany jako bajty , a nie prosty łańcuch Unicode.

W Przeciwnym Razie dekodowanie nie zadziała: obraz zostanie zapisany, ale będzie to plik nieczytelny.

Pracowałem nad czymś podobnym. Musiałem przekonwertować obraz canvas kodowany base64 na 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);