Javascript - Canvas zu Image zu Server

[christian1]

Hallo Leute,

ich habe folgendes Problem:

Ich habe ein Bild aus einem canvas mit Javascript erstellt und in einer Variable gespeichert.
<-kleiner codeschnipsel ->

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);

Nun möchte ich dieses Bild mit einem anderen Bild, welches in PHP erstellt wurde zusammenfügen.

Dazu boten sich mir folgende Möglichkeiten:

1. Das Javascript-Bild auf dem Server speichern/hochladen mit zb. AJAX oder Javascript.
2. Das Javascript-Bild an PHP übergeben, zb. mit einer POST Form.

Leider bin ich bei beiden möglichen Wegen auf keine mögliche Lösung gestoßen, daher wäre ich über jede Hilfe dankbar.

Liebe Grüße,

Christian

 

[mikdoe]

Was genau verstehst du denn unter "zusammenfügen"?

 

[christian1]

Hallo und danke das du dir die Zeit nimmst mir zu helfen, ich versuche das mal genauer zu beschreiben was ich vor habe.

Ich habe aus einem div ein Canvas erstellt und aus dem Canvas ein IMG. - > nach dieser Anleitung: https://developer.mozilla.org/en-US/docs/Web/HTML/Canvas/Drawing_DOM_objects_into_a_canvas

Klappt wunderbar, ich erhalte ein Img direkt auf der Webseite. Ich möchte nun dieses IMG auf den Server herunterladen oder an eine andere PHP Seite übergeben.

Damit ich später dieses "javascript Bild" mit einem anderen Bild zusammenfügen kann.

 

[kkapsner]

Dazu boten sich mir folgende Möglichkeiten:

1. Das Javascript-Bild auf dem Server speichern/hochladen mit zb. AJAX oder Javascript.
2. Das Javascript-Bild an PHP übergeben, zb. mit einer POST Form.

Diese beiden Möglichkeiten sind ziemlich identisch...

Aber du kannst aus dem <canvas> eine Data-URI machen und dann diese an den Server schicken.

PS: Du hast immer noch nicht beantwortet, was du mit "zusammenfügen" meinst. Auch ist mir nicht ganz klar, was du mit

an eine andere PHP Seite übergeben

genau meinst.