jQuery: HTML5 Canvas mit Ajax an Server senden

In diesem Tutorial möchte ich euch zeigen, wie ihr mit JavaScript und jQuery einen HTML5 Canvas per Ajax an ein PHP-Skript auf eurem Server senden könnt, um den Canvas dort als Bild zu empfangen und abzuspeichern.

Zunächst möchte ich auf die einzelnen Teile der Vorgehensweise eingehen, am Ende dieser Seite findet ihr die beiden verwendeten Dateien in komplett. Dieses Tutorial sendet den Canvas mithilfe von Ajax und jQuery an den Server und kommt daher ohne Formular und neuem Laden der Seite aus. Ich habe ein weiteres Tutorial verfasst, das erklärt, wie man einen HTML5 Canvas zusammen mit einem Formular absendet und das Bild damit quasi an ein vorhandenes Formular anhängt. Je nachdem woran ihr eher interessiert seid, sollt ihr eher dieses oder das andere Tutorial lesen.

Die HTML-Seite

Für unser Beispiel kommen wir mit relativ wenig HTML aus. Eigentlich brauchen wir nur unseren Canvas und einen Button.

<canvas id="canv" width="200" height="200"></canvas>

<button id="bt_upload">Upload</button>

Durch einen Klick auf den Button soll dann später der Canvas an unser Skript gesendet werden.

Canvas zeichnen

Der Inhalt von unserem Canvas ist für das Beispiel relativ egal. Damit wir aber keinen leeren Canvas speichern müssen, zeichnen wir einfach einen roten Kreis in die Mitte der Leinwand. Das macht der folgende Code für uns.

var canvas = document.getElementById('canv');
var context = canvas.getContext('2d');

context.arc(100, 100, 50, 0, 2 * Math.PI);
context.lineWidth = 5;
context.fillStyle = '#EE1111';
context.fill();	
context.strokeStyle = '#CC0000';
context.stroke();

Wer mehr über das Zeichnen auf einem Canvas erfahren möchte, sollte einen Blick in das HTML5 Canvas Einsteiger Tutorial werfen.

JavaScript zum Senden

Der interessante Teil unseres Tutorials kommt jetzt. Im folgenden sehen wir den jQuery-Code der dafür zuständig ist, den Canvas an unser PHP-Skript zu senden.

Da das Absenden durch unseren Button (er hat im HTML die ID bt_upload bekommen) geschehen soll, definieren wir zunächst eine .click() Funktion für unseren Button.

Innerhalb dieser Funktion holen wir uns zunächst unseren Canvas und benutzen dann die Funktion toDataURL(). Damit erhalten wir eine Base64 enkodierte String-Repräsentation des Inhalts von unserem Canvas in der Form "data:image/png;base64;iVBORw0KGgoA...". Diese benötigen wir, damit wir die Daten an unser Skript übertragen können.

$(document).ready(function() {	
							   
   $("#bt_upload").click(function() {
      var canvas = document.getElementById('canv');
      var dataURL = canvas.toDataURL();
      $.ajax({
         type: "POST", 
         url: "canvas_ajax_upload_post.php", 
         data: { img: dataURL } 	 
      }).done(function(msg){ 
         alert(msg); 
      });
   });
							   
});	

Anschließend nutzen wir jQuerys $.ajax() um die Daten zu senden. Das Skript haben wir in unserem Beispiel unter dem Namen "canvas_ajax_upload_post.php" gespeichert, man kann aber natürlich auch jeden anderen beliebigen Namen nehmen. Die Antwort des Skripts erhalten wir in der Variable "msg", die wir einfach durch einen simplen Dialog ausgeben. In einer realen Anwendung würde man vielleicht eher den Inhalt eines DIV-Containers für die Meldung setzen.

PHP-Skript zum Empfangen

Nun kommen wir zu dem PHP-Skript, das auf unserem Server unter dem Namen "canvas_ajax_upload_post.php" gespeichert ist und unser gesendetes Bild speichern soll. Im JavaScript zum Absenden hatten wir type: "POST" und data: { img: dataURL } verwendet. Daher können wir unsere vorbereitete dataURL nun mit $_POST['img'] entgegennehmen. Ob wir die Variablen nun img und dataURL oder anders nennen ist uns natürlich selbst überlassen.

Desweiteren hatten wir im JavaScript canvas.toDataURL() geschrieben, was uns das Bild standardmäßig als PNG liefern sollte. Deswegen müsste der String immer mit "data:image/png;base64;" beginnen. Dies prüfen wir in der ersten if-Bedingung und möchten nur dann fortfahren, falls das Format tatsächlich PNG und richtig ist.

<?php

   $img = $_POST['img'];
  
   if (strpos($img, 'data:image/png;base64') === 0) {
	  
      $img = str_replace('data:image/png;base64,', '', $img);
      $img = str_replace(' ', '+', $img);
      $data = base64_decode($img);
      $file = 'uploads/img'.date("YmdHis").'.png';
  
      if (file_put_contents($file, $data)) {
         echo "Der Canvas wurde gespeichert als $file.";
      } else {
         echo 'Der Canvas konnte nicht gespeichert werden.';
      }	  
	
   }

?>

Bevor wir das Bild allerdings speichern können, müssen wir die BASE64-Codierung wieder rückgängig machen. Zunächst brauchen wir das "data:image/png;base64;" nicht mehr und löschen diesen Teil aus unserem String. Leerzeichen müssen wir anschließend noch durch ein + ersetzen, dann können wir base64_decode() verwenden, um wieder an die puren Daten zu kommen.

Diese Daten brauchen wir nun nur noch zu speichern und wir sind fertig. Als Dateinamen benutzen wir 'uploads/img'.date("YmdHis").'.png'. Das bedeutet, dass der Ordner "uploads" auf unserem Server existieren muss und die Bilder immer unter dem aktuellen Datum gespeichert werden. Je nachdem ob das Speichern gelungen oder fehlgeschlagen ist, geben wir üer echo einen anderen Text aus. Dies ist der Text, den wir im JavaScript in unserer Variable msg empfangen und ausgeben können.

Komplette HTML Datei

Das war's auch schon. Hier ist noch die vollständige HTML-Datei, aus der die einzelnen Code-Schnipsel von oben stammen. Diese Datei kann man zum Beispiel als "canvas_ajax_upload.php" speichern.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head><body>

<canvas id="canv" width="200" height="200"></canvas>

<button id="bt_upload">Upload</button>

<script>
  
  var canvas = document.getElementById('canv');
  var context = canvas.getContext('2d');

  context.arc(100, 100, 50, 0, 2 * Math.PI);
  context.lineWidth = 5;
  context.fillStyle = '#EE1111';
  context.fill();	
  context.strokeStyle = '#CC0000';
  context.stroke();
	
  $(document).ready(function() {	
							   
    $("#bt_upload").click(function() {
      var canvas = document.getElementById('canv');
      var dataURL = canvas.toDataURL();
      $.ajax({
         type: "POST", 
         url: "canvas_ajax_upload_post.php", 
         data: { img: dataURL } 	 
      }).done(function(msg){ 
         alert(msg); 
      });
    });
							   
  });	
  
</script>

</body></html>

Neben dieser Datei ist außerdem das PHP-Skript zum Empfangen und Speichern des Bildes notwendig. Das PHP-Skript von oben kann dafür unter dem Namen "canvas_ajax_upload_post.php" im selben Verzeichnis gespeichert werden.