canvas @ tutorials.de: Tutorials, Forum & Hilfe

versuch13 · 08.08.08 13:28

Ich bin auf der Suche nach Informationen zum Thema Canvas.

http://developer.mozilla.org/en/docs/HTML:Canvas

Wie schaffe ich es, eine Grafik aus dem Canvas Element zu erstellen und auf dem
Server zu speichern oder auf irgendeine Art und Weise (dataurl string) in einer Datenbank
abzulegen o.ä.

Ich möchte also eine Zeichenfläche erstellen (was soweit kein Problem sein dürfte) und
diese soll speicherbar sein.

Vielleicht hat mal jemand etwas in der Richtung gemacht? Links, Beispiele, ich freue mich über jegliche Informationen. Danke.

**Quaese** · 08.08.08 21:17

Hi,

eine Möglichkeit wäre eine Art Pseude-Serialisierung. Mit Hilfe des ImageData-Objekts und seiner Methoden getImageData und putImageData kannst du über das data-Array die Informationen speichern bzw. zurückschreiben (weitere Infos). Leider sind diese Methoden noch nicht in allen Browsern verfügbar.

Zum Speichern wird das array-Feld in einen durch Kommata getrennten String konvertiert, der anschliessend weiterverarbeitet werden kann.

Zum Wiederherstellen wird dieser String unter Verwendung von split wieder in ein Feld umgewandelt. Die enthaltenen Informationen werden in einer for-Schleife dem data-Array wieder zugänglich gemacht.

Beispiel:

Code :

<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
</head>
<body>
<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>
 
<script type="text/javascript">
  <!--
// 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(){
   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);
}
 
function saveRects(){
  // 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
}
 
function restoreRects(){
  // 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);
}
 
window.onload = function(){ drawIt();}
 //-->
</script>
<div>
  <button onclick="saveRects();">save</button>
  <button onclick="objContext.clearRect(0, 0, 50, 50);">clear</button>
  <button onclick="restoreRects();">restore</button>
</div>
<div id="outID"></div>
</body>
</html>

Ciao
Quaese

Sven Mintel · 08.08.08 21:36

Moin,

gemacht hab ich damit noch nichts, aber etwas gefunden, was dich ruhiger schlafen lässt

http://www.nihilogic.dk/labs/canvas2image/

Eine gute Einführung zum Thema:
http://www.ajaxschmiede.de/canvas/ei...ung-in-canvas/

Und etwas, was mich davon überzeugt, dass ich mir das auch mal näher anschauen muss

http://www.nihilogic.dk/labs/mariokart/

versuch13 · 09.08.08 11:37

Zitat von Sven Mintel

http://www.nihilogic.dk/labs/canvas2image/

Habe ich auch gefunden, nur wird hier die Datei an den Client ausgegeben und
ich möchte ja wie gesagt die Datei auf dem Server ablegen. Oder sehe ich hier
nur die Möglichkeit einer Abwandlung nicht?

Zitat von Sven Mintel

Und etwas, was mich davon überzeugt, dass ich mir das auch mal näher anschauen muss

http://www.nihilogic.dk/labs/mariokart/

Ja in der Tat, ich habe gestern noch viele andere wirklich interessante Sachen zum Thema gefunden.

Danke Quaese für das Beispiel! An etwas in der Richtung hatte ich gedacht.
Mittlerweile aber auch herausgefunden (noch nicht getestet) dass ich mir eine
DataURL per objCanvas.toDataURL() erzeugen lassen kann.
Speichern würde ich den String dann in einer Datenbank (per Ajax an ein Script
übergeben usw..). Nur dachte ich es gibt evtl eine Möglichkeit eine "echte" Grafik
zu erzeugen, vllt eher ein Problem der Weiterverarbeitung auf PHP Seite. Gibt
es eine Möglichkeit Daten von Javascript an PHP so zu übergeben dass ich mit
PHP eine ImageResource erstellen kann oder bleibt nur die Möglichkeit einen
String in der Datenbank zu speichern?

Sven Mintel · 09.08.08 12:02

Naja, man könnte es ja folgendermaßen probieren:

Dieser String enthält ja 3 Sachen, den Grafik-Typ, die Art der Kodierung und den kodierten String.

Es sollte gehen, wenn man die ersten beiden Sachen herausschnibbelt, das kodierte wieder dekodiert und dann in einer Datei speichert.

versuch13 · 09.08.08 12:07

Ok, danke, ich war nur nicht sicher wie der dataURL String kodiert ist (aber Wikipedia wußte es) und so werde ich es dann auch versuchen. Ergebnis werde ich hier dann nochmal veröffentlichen. Bis dahin schon mal wieder recht herzlichen Dank!

Hier eine mögliche Lösung: http://canvaspaint.org/blog/2007/01/saving-images

versuch13 · 24.09.08 23:13

So, ich hole das Thema nochmal hoch. Ich habe es wie erwähnt gelöst, jetzt besteht nur das Problem das Safari die Methode toDataURL() nicht unterstützt. Hat jemand dazu eine Idee oder bleibt es für Safari unmöglich?

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Viertelkreise mit JS und Canvas

Canvas

3d Canvas wie boolea ich?

<canvas> html Tag

3D Canvas...

E-Mail:

Abonnieren Abbestellen