Canvas als .jpg speichern auf verständliche Art?

@comfreak - Danke für die Anregung. Wie würde das mit KineticsJS aussehen? Ich habe von HTML5 und JavaScript leider wenig Ahnung und bin am ehesten in der Lage Codeschnipsel abzuändern *g*. Ich teste aber mal ......
 
Hast du ein KineticsJS-Canvas-Objekt? Wenn ja, dann hat dieses Objekt die Methode "toDataURL", siehe http://agavestorm.com/kineticjs/Kinetic.Canvas.html (ganz unten).

Javascript: 
var canvas = new Canvas(/* ... */)
// Tue irgendwas...
// Das Canvas ist nun fertig zum Speichern

// Im DOM hast du ein <image id="img" /> Element
var img = document.getElementById("img");
img.src = canvas.toDataURL("image/jpeg", 1);
 
@comfreak - Danke, ich bin schon am wursteln in dieser Richtung. Meine "Lehrseite" ist: http://www.html5canvastutorials.com/advanced/html5-canvas-get-image-data-url/.

Mein Code ist:

Code: 
<script defer>
// =================================================================================
// Collage im Canvas mit Kinetic.JS
// =================================================================================
var stage = new Kinetic.Stage({
    container: 'container', width: <?php echo $CanvasWidth;?>, height: <?php echo $CanvasHeight;?>
    // container: 'container',     width: 578,    height: 220
});

var layer = new Kinetic.Layer();

window.onload = function(){
// Bild laden
    var img = new Image();
    img.src ="<?php echo $HintergrundBild;?>";
    img.onload = function(){ZitatBild = new Kinetic.Image({ x: 0, y: 0, width:<?php echo $CanvasWidth;?>, height:<?php echo $CanvasHeight;?>,image: img});   

//  Höhe des Textes berechnen .... Komplexer Text über mehrere Zeilen
    var TextZitat2 = new Kinetic.Text({x: 00,     y: 0,        text: '<?php echo $CanvasZitat;?>',<?php echo $CanvasZitatSchrift;?>});
   
// Komplexer Text über mehrere Zeilen
    var TextZitat = new Kinetic.Text({x: 00,     y: <?php echo $CanvasHeight;?>-<?php echo $CanvasHeightAutor;?>-TextZitat2.getHeight(), text: '<?php echo $CanvasZitat;?>', <?php echo $CanvasZitatSchrift;?>});
   
    layer.add(ZitatBild);

    var group = new Kinetic.Group({
        draggable: true
    });
    group.add(TextZitat);
    layer.add(group);
    group.on('dragend',function(){
        console.log(group.getPosition());
    });

    layer.draw();
    stage.add(layer);
    }

}
</script>
 
Zuerst ein großes "Danke" an alle helfenden Hirnchen und die Auflösung unten.

Code: 
<head>
<script src="kinetic.min.js"></script>
</head>

<body>
<div id="container"></div>
<div id="savePanel"><button onclick="speicherbild()">Dieses Bild im Canvas speichern!</button></div>

<script>
var stage = new Kinetic.Stage({
    container: 'container', width: <?php echo $CanvasWidth;?>, height: <?php echo $CanvasHeight;?>
});

var layer = new Kinetic.Layer();

window.onload = function(){
    // Bild laden
    var img = new Image();
    img.src ="<?php echo $HintergrundBild;?>";
    img.onload = function(){
    ZitatBild = new Kinetic.Image({ x: 0, y: 0, width:<?php echo $CanvasWidth;?>, height:<?php echo $CanvasHeight;?>,image: img});  

    layer.add(ZitatBild);
    layer.draw();
    stage.add(layer);
    }
}

function speicherbild() {
        var dataURL = layer.toDataURL("image/jpeg";
        window.open(dataURL, "MeinVanvasBild");
}
</script>


....
Code
....

</body>

In Zeile 30:

Code: 
var dataURL = layer.toDataURL("image/jpeg";


... gab ich immer "stage" statt "layer" ein. Jetzt klappt es von der Sache her. Nicht perfekt, aber ansatzweise die richtige Richtung. Geplant war nicht eine neue Seite für das Bild zu öffnen, aber damit bin ich erst einmal zufrieden.


Einfach Frage hätte ich noch: Das Bild wird dennoch nach .PNG konvertiert, nicht .jpeg wie angegeben. Sieht jemand den Fehler in meinem Code?
 
Hallo Crome, nee, sorry, das ist es nicht. Ich habe das nur fehlerhaft getippt/rein kopiert. Im produktiven Code steht es scheinbar richtig drin:
Code: 
function speicherbild() {
    var dataURL = layer.toDataURL("image/jpg");
    window.open(dataURL, "MeinCanvasBild"); // öffnet Bild in neuen Browserfenster
}
 
Danke Cromon, ich habe natürlich auch "jpeg" genutzt. Das jpg ist vom letzten Versuch noch drin. Bei "richtiger" Syntax speichert der FF es als .png ab, der Safari hingegen als Datei ohne Extension. Alles für die Katz. Andere Ideen? Ich meine, ich sitze ja selber tagelang vor Google und lese das ganze (deutsche) Web durch. Auch während meiner Arbeitszeit wo andere Dinge anstehen. Aber es klappt nicht. Es ist der Teufel im Detail.

Sag mal, wie kann ich hier PNs versenden, ich sehe keinen Link?
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück