Dokumentation (canvas.quaese.de)

Anwendungen - Grafik speichern 2 (Ajax, toDataURL)

Diese Anwendung wird nur theoretisch abgehandelt. Sie beschäftigt sich mit der Methode, aus einem <canvas>-Element ein Bild zu erzeugen und zu speichern.

HTML

Zunächst wird das HTML-Dokument betrachtet. Dieses stellt zum einen das <canvas>-Element mit seinen Attributen und Methden zur Verfügung, zum anderen eine Reihe von Ajax-Routinen, die den Austausch mit dem Server ermöglichen.

Serverseitiges Verarbeiten

Im Beispiel wird ein PHP-Script (data2img.php) aufgerufen, das die übergebenen Parameter auswertet, ein File erstellt und den data:-URL darin speichert.

Schematische Vorgehensweise

Benutzer wählt aus einem Listenfeld den gewünschten Bildtyp
Die Funktion imgFromDataUrl erstellt den notwendigen data:-URL. Außerdem werden die notwendigen Parameter für das PHP-Script extrahiert.
Die Funktion ruft zuletzt die Ajax-Routine theRequest auf.
theRequest erstellt den URL mit den erforderlichen Parametern und initiiert den Ajax-Request.
Das aufgerufene serverseitige Script data2img.php analysiert die übergebenen Parameter, erstellt eine neue Datei und speichert darin den data:-URL-String.
Das generierte Bild wird als HTML-String zurückgegeben und in das DIV mit der ID outID angezeigt.

HTML-Dokument

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
  <!--
// Sicherungsstring
var strSave = "";
var objCanvas = null;
var objContext = null;

// Ajax-Request-Objekt
var objRequest = false;


/* ******* [START - Ajax-Routinen] *********************/
function instanceRequest(){
  if(window.XMLHttpRequest){
    objRequest = new XMLHttpRequest();
  }else if(window.ActiveXObject){ // IE
    try{
      objRequest = new ActiveXObject("Msxml2.XMLHTTP");
    }catch(e){
      try{
        objRequest = new ActiveXObject("Microsoft.objRequest");
      }catch(e){}
    }
  }

  if(!objRequest){
    alert('Es konnte keine XMLHTTP-Instanz erzeugt werden!');
    return false;
  }
}


function theRequest(strURL, objParams) {
  // Falls noch ein Request-Objekt existiert -> zunächst beenden
  if(objRequest && objRequest.readyState){
    objRequest.abort();
    objRequest = false;
  }

  if(!objRequest){
    instanceRequest();
  }

  // Parameterstring generieren
  strParams = "";
  for(strEntry in objParams){
    
    strParams += strEntry + "=" + encodeURIComponent(objParams[strEntry]) + "&";
  }
  // Letztes Kaufmanns-UND entfernen
  strParams = strParams.substring(0, strParams.length-1);

  objRequest.open('POST', strURL, true);
  objRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

  self.objRequest.onreadystatechange = function(){
    if(objRequest.readyState == 4){
      if(objRequest.status == 200){
        document.getElementById("outID").innerHTML += unescape(objRequest.responseText);
      }else{
        alert("Anfrage nicht erfolgreich!");
      }
    }
  };
  objRequest.send(strParams);
}
/* ******* [ENDE  - Ajax-Routinen] *********************/

/* ******* [START - Canvas-Routinen] *******************/
function drawIt(){
  objCanvas = document.getElementById("canvas_id");
  // Falls das Objekt unterstützt wird
  if(objCanvas.getContext){
    // Kontext
    objContext = objCanvas.getContext('2d');

    someRects();
  }else{
    // Sonstiger Code
  }
}

// Einige Rechtecke zeichnen
function someRects(){
   objContext.fillStyle = "#f00";
   objContext.fillRect(0, 0, 50, 50);
   objContext.fillStyle = "#000";
   objContext.translate(25, 25);
   objContext.save();
   objContext.rotate(Math.PI/4);
   objContext.fillRect(-18, -18, 36, 36);
   objContext.restore();
   objContext.fillStyle = "#fff";
   objContext.fillRect(-10, -10, 20, 20);
   objContext.translate(-25, -25);
}


// Bildspeichern anstossen
function imgFromDataUrl(){
  // Falls das Canvas-Element unterstützt wird und die Methode toDataURL unterstützt wird
  if(objCanvas.getContext && (typeof objCanvas.toDataURL != "undefined")){
    // Ausgewählten Mime-Typ ermitteln
    var strMimeTmp = document.getElementById("selMime").options[document.getElementById("selMime").selectedIndex].value;
    // DataURL-String ermitteln
    var strDataUrl = objCanvas.toDataURL(strMimeTmp);

    // DataURL-String teilen
    var arrHelp = strDataUrl.split(";");
    var strMime = arrHelp[0].split(":")[1];  // MIME-Typ ermitteln
    var strCode = arrHelp[1].split(",")[0];  // Codierung ermitteln (Base64)
    var strData = arrHelp[1].split(",")[1];  // Kodierten String extrahieren

    // Falls tatsächlich ein Bild erstellt werden soll
    if(strMime.split("/")[0].toLowerCase() == "image")
      theRequest("data2img.php", {"mime": strMime, "code": strCode, "data": strData});
  }
}
/* ******* [ENDE  - Canvas-Routinen] *******************/

window.onload = function(){ drawIt();}
 //-->
</script>
</head>
<body>
<div><canvas width="50" height="50" id="canvas_id" style="margin-top: 12px; border: 1px solid #333;"><p>Ihr Browser unterstützt das canvas-Element leider nicht.</p></canvas></div>
<div>
  <select id="selMime">
    <option value="image/png" selected="selected">png</option>
    <option value="image/jpeg">jpg</option>
  </select>
  <button onclick="imgFromDataUrl();">Datei speichern</button>
</div>
<div id="outID"></div>
</body>
</html>

PHP-Script

<?php
  // Pfadvariable zum Verzeichnis, das die gespeicherten Canvas-Grafiken aufnimmt
  define(STR_CANVAS_SAVE_PATH, 'Pfad/zu/Bilddateien');
  define(STR_CANVAS_HTTP_PATH, 'http://Pfad/zu/Bilddateien/');

  // Verzeichnis wechseln
  chdir(STR_CANVAS_SAVE_PATH);

  // DataURL-String auswerten
  $strData = base64_decode(rawurldecode($_POST['data']));
  // Mime-Type-Array
  $arrMime = explode("/", rawurldecode($_POST['mime']));
  // Passenden Dateiname generieren
  $intTimestamp = mktime();
  $strFileName = $intTimestamp . "." . (($arrMime[1] == "png")? "png" : (($arrMime[1] == "jpeg")? "jpg" : "png"));

  // Datei öffnen, leeren und neuen Grafik-Data-String einfügen
  $hFile = fopen($strFileName, "wb");
  fwrite($hFile, $strData);
  fclose($hFile);

  // HTML-IMG-Element als Ajax-Antwort generieren
  echo(rawurlencode("<img src=".STR_CANVAS_HTTP_PATH.$strFileName." title=\"".date("H-i-s_d-m-Y", (int)$intTimestamp)."_".$strFileName."\" alt=\"".date("H-i-s_d-m-Y", (int)$intTimestamp)."_".$strFileName."\" />"));
?>