HTML5 Canvas Hintergrund hineinkopieren

[stroyer]

Ich beschäftige mich im Moment mit HTML5 und habe (ohne Erfolg) versucht mit Javascript den Hintergrund in ein (transparentes) Canvas zu bringen, das genau darüber liegt.
Unter Hintergrund verstehe ich DIVs, Text, ...; alles das, was hinter dem Canvas liegt und durschscheint.
Mit getImageData und toDataURL habe ich keine Erfolge erziehlt (gibt mir nur ein durchsichiges Schwarz (0,0,0,0) zurück.
Kann mein Vorhaben überhaupt irgendwie realisiert werden?

 

[fexx]

AW: HTML5 Canvas Hintergrund hineinkopieren

ich verstehe nur bahnhof ;-) könntest du bitte mal dein beispiel posten...

 

[cebito]

AW: HTML5 Canvas Hintergrund hineinkopieren

Versteh ich grad nicht ganz, du willst das was hinter dem Canvas liegt, egal ob Bild oder Schrift, als Bild IN das Canvas holen?

 

[stroyer]

AW: HTML5 Canvas Hintergrund hineinkopieren

klar.

Besteht aus einem canvas (border:thin solid black;position:absolute; ) und einem roten div im hintergrund.
Jetzt will ich, primitiv ausgedrückt, irgendwie die rote farbe auslesen.
(Wenn ich den Inhalt vom Canvas auslese, ist er in dem Fall leer oder wenn ich was zeichne bekomme ich das, was ich gezeichnet habe.)
Ich will sozusagen im Canvas das, was dahinter ist, "abpausen". Bis jetzt habe ich keine anderen Ansatz gefunden, ich weiß nicht, ob das überhaupt möglich ist.
(Ziel wäre, dass ich so den Übergang von Texten 3d animieren kann.)

 

[cebito]

AW: HTML5 Canvas Hintergrund hineinkopieren

Jetzt will ich, primitiv ausgedrückt, irgendwie die rote farbe auslesen.

Du kannst das nur aus nem Bild auslesen. Sprich, du müsstest per php nen Screenshot machen und dann irgendwie genau den Teil als Bild abspeichern.

 

[stroyer]

AW: HTML5 Canvas Hintergrund hineinkopieren

Ich möchte es als Bild/Pixeldaten aus dem Canvas holen bzw. dort drinnen haben (ungefähr wie es mit den Windows-Canvas geht)...
Vielen Dank,
dann werde ich wohl eine HTML-Rendering-Engine für Canvas schreiben müssen.

 

[cebito]

AW: HTML5 Canvas Hintergrund hineinkopieren

Hier ein kleines Bsp., wie das mit dem Canvas und den Bilddaten funktioniert...



Wenn er das Bild beim ersten mal nicht läd, einfach F5 drücken.

 

[stroyer]

AW: HTML5 Canvas Hintergrund hineinkopieren

danke, so ähnlich habe ich das auch gehabt (bezgl. Bild laden: einfach alles nach $objImg.src = $pfad; ins onload vom bild reinpacken.)
Ich bekomme halt nicht so einfach ein bild vom gerenderten html rein.
Aber da der DOM-Baum ja so wie so schon generiert ist, dürfte eine Rendering-Enginge gar nicht so schwer sein (zumindest bis jetzt )...


PS: Schöne HTML5-Website!
Das NAV-Element wird aber in alten IE Browsern im DOM nicht als childfähig gesetzt () Ich verwende http://remysharp.com/2009/01/07/html5-enabling-script/ um das Problem zu umgehen.

 

[cebito]

AW: HTML5 Canvas Hintergrund hineinkopieren

Hab grad mal noch ein putImageData eingefügt - invertiert bei Klick ins Bild (zeichnet also neu)...



... Seite ist noch im Probestadium den Link schau ich mir mal an

Scheint 'n bissl buggy zu sein, hat mir dreimal hintereinander den IE-Tester abstürzen lassen, aber im Endeffekt hab ich ja meine IE.js, die mir die Sachen erledigt, dazu die für die Mediaqueries und alles funzt bis runter zum 7er - der 6er interessiert mich hier nicht mehr, das Ding wird und bleibt privat

 

[stroyer]

AW: HTML5 Canvas Hintergrund hineinkopieren

Ich habe übrigens einen Befehl gefunden unter (ctx.drawWindow).
Funktioniert im Moment aber nur im Firefox und im Moment wegen einer Sicherheitslücke auch nur für Addons.