HTML5 Canvas als Bild an Server senden und speichern

In diesem Tutorial möchte ich euch zeigen, wie ihr ein normales HTML-Formular dazu verwenden könnt, zusammen mit den anderen Formular-Daten einen HTML5 Canvas als Bild mit an den Server zu senden und dort zu speichern.

Am Ende dieses Tutorials findet ihr noch einmal die komplette HTML-Seite ohne Erklärungen, zunächst möchte ich aber das Procedere Schritt für Schritt erläutern. Dieses Tutorial kommt ohne Ajax und jQuery aus. Falls ihr daran interessiert seit, den Canvas ohne Formular und ohne einen Reload der Seite per Ajax an euren Server zu senden, könnt ihr in das Tutorial wie man mit Ajax einen HTML5 Canvas an den Server sendet schauen. Dieses Tutorial is ansonsten ähnlich diesem Tutorial aufgebaut.

Die HTML Seite

Unserer HTML-Seite benötigt eigentlich nur zwei Teile. Zum einen ist da der Canvas, zum anderen das Formular. Für unser Beispiel haben wir einen Canvas mit einer Größe von 200 x 200 Pixeln gewählt.

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

<form method="post" action="" onsubmit="prepareImg();">
  <input id="inp_img" name="img" type="hidden" value="">
  <input id="bt_upload" type="submit" value="Upload">
</form>

Das Formular enthält einen Submit-Button und ein verstecktes Feld. In das versteckte Feld möchten wir vor dem Absenden des Formulars die Bild-Daten von unserem Canvas hinein schreiben, so dass diese Daten zusammen mit dem Formular abgesendet werden können. Dies macht die Funktion prepareImg(), die durch onsubmit="prepareImg();" automatisch vor dem Submit aufgerufen wird. Eine Erklärung dieser Funktion findet ihr weiter unten.

Natürlich können wir gerne noch beliebige weitere Eingabefelder zu unserem Formular hinzufügen (die dann mit abgesendet werden), hier beschränken wir uns aber zunächst auf das Wesentliche.

Der Canvas

Für unser Beispiel würde auch ein leeres Bild ausreichend sein, aber damit wir auch etwas sehen können, zeichnen wir auf unseren Canvas einen simplen roten Kreis.

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

Zu erklären, wie man auf einen HTML5 Canvas zeichnet, würde über dieses Tutorial hinausgehen. Daher möchte ich an dieser Stelle auf das mehrteilige HTML5 Canvas Einsteiger Tutorial verweisen, indem Schritt für Schritt erklärt wird, wie man auf einen Canvas zeichnet.

Das JavaScript

Wir hatten oben bereits von der JavaScript-Funktion prepareImg() gehört, die automatisch aufgerufen wird, sobald jemand den Submit-Button des Formulars klickt. Diese Funktion möchten wir uns nun genauer ansehen.

function prepareImg() {
   var canvas = document.getElementById('canv');
   document.getElementById('inp_img').value = canvas.toDataURL();
}
  

Als erstes holen wir uns den Canvas und benutzen die Funktion .toDataURL(). Diese Funktion wandelt die Bild-Daten des Canvas in einen BASE64 kodierten String um, den wir problemlos über das Formular versenden können. Der String enthält die Daten im PNG-Format und beginnt etwa so: "data:image/png;base64;iVBORw0KGgoA...".

Mit document.getElementById('inp_img').value schreiben wir besagten String in das versteckte Feld unseres Formulars, so dass beim Absenden des Formulars die Daten automatisch mitgesendet werden.

PHP-Skript zum Empfangen

Zuletzt benötigen wir nur noch das PHP-Skript, das die gesendeten Formular-Daten empfängt und den Canvas für uns abspeichert.

$img = $_POST['img'];
$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 "<p>Der Canvas wurde gespeichert als $file.</p>";
} else {
   echo "<p>Der Canvas konnte nicht gespeichert werden.</p>";
}	

Unser Bild finden wir in $_POST['img'], da das versteckte Feld den Namen "img" trägt. Bevor wir die Rohdaten allerdings als Bild abspeichern können, müssen wir als erstes die BASE64-Kodierung wieder rückgängig machen. Dafür muss als erstes das "data:image/png;base64," aus dem String entfernt werden und alle Leerzeichen müssen mit einem Plus-Zeichen ersetzt werden. Anschließend können wir die Funktion base64_decode() benutzen und erhalten die Daten, die wir abspeichern können zurück.

Zum Speichern verwenden wir als Dateinamen die Variable $file. Die Speicherung erfolgt im Ordner "uploads", als Dateinamen verwenden wir das aktuelle Datum. Ist die Speicherung geglückt, geben wir eine entsprechende Meldung aus, ansonsten einen Fehler.

Die komplette Datei

Damit sind wir auch schon fertig. Damit nun niemand alle Einzelteile selber zusammen kopieren muss, habe ich hier noch einmal die gesamte HTML-Datei mit allen verwendeten PHP- und JavaScript-Codes.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
</head><body>

<?php

if (count($_POST) && (strpos($_POST['img'], 'data:image/png;base64') === 0)) {
	
  $img = $_POST['img'];
  $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 "<p>Der Canvas wurde gespeichert als $file.</p>";
  } else {
     echo "<p>Der Canvas konnte nicht gespeichert werden.</p>";
  }	
  
}
					 
?>

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

<form method="post" action="" onsubmit="prepareImg();">
  <input id="inp_img" name="img" type="hidden" value="">
  <input id="bt_upload" type="submit" value="Upload">
</form>



<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();
	
	
  function prepareImg() {
     var canvas = document.getElementById('canv');
     document.getElementById('inp_img').value = canvas.toDataURL();
  }
  
</script>

</body></html>

Die Datei kann man zum Beispiel abspeichern unter dem Namen canvas_form_upload.php, aber natürlich könnte er auch jeden beliebigen anderen Namen verwenden.