Dokumentation (canvas.quaese.de)

Anwendungen - Grafik speichern

Sicherlich gibt es Gelegenheiten, zu denen das gerade gerenderte Bild gespeichert werden muss. Folgender Workaround kann dabei helfen.

Speichern

Mit Hilfe des ImageData-Objekts und seiner Methode getImageData ist es möglich, das data-Array (siehe Pixel-Manipulation) in einen String zu konvertieren und mit entsprechenden Methoden zu sichern. Es wäre zum Beispiel vorstellbar, mittels einer AJAX-Routine den String zu übermitteln und in einer Datenbank zu speichern.

Wiederherstellen

Der Sicherungsstring wird zunächst mit Hilfe der split-Methode in ein Array konvertiert. Dieses enthält nur alle Pixelwerte, die in einer for-Schleife dem data-Array des ImageData-Objekts zugewiesen werden. Hier ist zu beachten, dass die Einzelwerte in Integerwerte umgewandelt werden müssen!

Zuletzt wird das manipulierte Objekt mit Hilfe der Methode putImageData wieder in den Context gerendert.

Achtung

Die Methoden getImageData und putImageData sind nicht in allen Browsern implementiert.

Demonstration

Die Grafik kann gespeichert, gelöscht und anschliessend wieder hergestellt werden.

Quellcode

Folgend der verwendete Quellcode. Tiefergehende Erklärungen können den Kommentaren entnommen werden.

// Sicherungsstring
var strSave = "";
var objCanvas = null;
var objContext = null;

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

function someRects(){
  // Einige Rechtecke erstellen
  objContext.fillStyle = "#f00";
  objContext.fillRect(0, 0, 150, 150);
  objContext.fillStyle = "#000";
  objContext.translate(75, 75);
  objContext.save();
  objContext.rotate(Math.PI/4);
  objContext.fillRect(-50, -50, 100, 100);
  objContext.restore();
  objContext.fillStyle = "#fff";
  objContext.fillRect(-25, -25, 50, 50);
  objContext.translate(-75, -75);
}

// Context-Infos sichern
function saveRects(){
  // Falls das Objekt unterstützt wird
  if(objCanvas.getContext){

    // Falls die benötigte Methode nicht verfügbar ist
    if(typeof objContext.getImageData != "function") return;

    // ImageData-Objekt des aktuellen Canvas-Zustands erstellen
    var objImageData = objContext.getImageData(0, 0, objCanvas.width, objCanvas.height);

    // Sicherungsstring generieren (über for und String wg. Opera)
    var strSerialize = "";
    for(var i=0; i<objImageData.data.length; i++){
      strSerialize += objImageData.data[i].toString() + ",";
    }
    strSerialize = strSerialize.substring(0, strSerialize.length-1);

    // Testausgabe und Testspeichern
    document.getElementById("outID").innerHTML = "Sicherungsstring = " + strSerialize;
    strData = strSerialize;

    // TODO: Sicherungsstring (strSerialize) speichern - z.B. über AJAX in Datenbank
  }
}

// Context-Infos wiederherstellen
function restoreRects(){
  // Falls das Objekt unterstützt wird
  if(objCanvas.getContext){

    // Falls die benötigte Methode nicht verfügbar ist
    if(typeof objContext.getImageData != "function") return;

    // Image-Daten-Objekt erstellen
    var objImageData = objContext.getImageData(0, 0, objCanvas.width, objCanvas.height);
    // Wg. FF2
    if(!window.opera){
      var objElem = objCanvas.cloneNode(true);
      objCanvas.parentNode.replaceChild(objElem, objCanvas);
      objCanvas = objElem;
      objContext = objCanvas.getContext('2d');
    }

    // Werte des gespeicherten Strings in Array
    var arrData = String(strData).split(",");

    // data-Array des Objekts durchlaufen
    for(var i=0; i<objImageData.data.length; i++){
      // Integerwerte des Sicherungsarrays zurückschreiben
      objImageData.data[i] = parseInt(arrData[i]);
    }

    // Objekt wieder in Canvas rendern
    objContext.putImageData(objImageData, 0, 0);
  }
}

// Context leeren
function clearRects(){
  // Falls das Objekt unterstützt wird
  if(objCanvas.getContext){
    objContext.clearRect(0, 0, 150, 150);

    document.getElementById("outID").innerHTML = "";
  }
}

window.onload = function(){ drawIt();}