# Ein Bild mit Javascript erstellen



## sharK223 (3. Juni 2010)

Guten Tag Comunity,

ein Freund von mir hat mich gefrag ob ich es hinbekomme einen Countdown auf Schueler.vz einzurichten.
Nun habe ich vor mit hilfe von JavaScript ein Bild zu ertsellen auf dem immer die restzeit ausgegeben wird.
Sowas kenne ich von diversen Foren. Dort hatten einige in ihren Signaturen bilder bei denen meine aktuelle IP Adresse und son zeug ausgegeben wurde.
Ich weis nur leider nicht genau wie ich das hinbekomme.
Ich hoffe ihr könnt mir helfen.

Grüße
sharK


----------



## Maik (3. Juni 2010)

Hi,

zum Erstellen eines Countdowns stellt dir Javascript das Date-Objekt zur Verfügung.

Inwieweit du dies in ein Bild integrieren willst bzw. kannst, entzieht sich meiner Kenntnis. Aus dem Bauch heraus würde ich sagen, dass dies mittels Javascript so nicht möglich ist.

Ich denke eher, du müsstest dir zunächst eine Grafik erstellen, in der die einzelnen Countdown-Schritte enthalten sind (CSS-Sprites), und diese als Hintergrundbild in einem Element mit begrenzten Anzeigebereich nutzen, dessen Hintergrund-Position (backgroundPosition) im entsprechenden Intervall geändert wird.

mfg Maik


----------



## Yaslaw (3. Juni 2010)

Das Bild kannst du in PHP erstellen und über javascript regelmässig neu abrufen (refresh)

Das Bild könnte etwa so aussehen (mehrmals F5 dücken...):
http://yaslaw.info/tools/font/signatur.php
PHP-Code dazu http://wiki.yaslaw.info/wikka/PhpFontClassSignatur


----------



## CPoly (3. Juni 2010)

sharK223 hat gesagt.:


> Dort hatten einige in ihren Signaturen bilder bei denen meine aktuelle IP Adresse und son zeug ausgegeben wurde.



Das wird serverseitig gemacht. Das kommt für dich nicht in Frage, weil du schlecht jede Sekunde eine Anfrage schicken kannst (klar kannst du, aber das ist absolut nicht empfehlenswert), um ein neues Bild erzeugen zu lassen.
Üblicherweise würde man für jede Zahl von 0 bis 9 eine Grafik auf dem Server ablegen und den Countdown aus mehreren img-Tags zusammensetzen. Ein solchen Countdown habe ich mal erstellst. Er besteht aus einem einzigen Bild, welches per css-Sprites jeweils zurecht-geschoben wird. http://www.cpoly-design.de/countdown/

Wenn du "echte" Bilder erzeugen willst, geht das nur mit dem canvas-Tag (HTML 5), welches aber noch nicht von jedem Browser korrekt interpretiert wird.


----------



## Maik (3. Juni 2010)

Ein ähnliches Vorhaben hatten wir hier schon mal: grafischer Countdown

mfg Maik


----------



## sharK223 (3. Juni 2010)

zuerstmal danke für die antworten.

Ich hatte garnicht vor dass das Bild regelmäßig aktualisiert wird. Es soll nur beim Seiten reload den den aktuellen rest anzeigen.


----------



## Chef_De_Loup (3. Juni 2010)

Man koennte das Ganze auch mittels Kacheln realisieren. Das Bild wuerde dann aus mehreren Kacheln zusammengesetzt welche Weiss und Schwarz annehmen koennen. Mittels Javascript werden dann die Kacheln entsprechend des Countdowns angepasst. Das ist jetzt erstmal nur eine Idee, wie man es machen koennte.

Edit: Mit dem neuen Zusatz ist das natuerlich dann nicht das Treffende.


----------



## CPoly (3. Juni 2010)

sharK223 hat gesagt.:


> Ich hatte garnicht vor dass das Bild regelmäßig aktualisiert wird. Es soll nur beim Seiten reload den den aktuellen rest anzeigen.



Dann brauchst du kein Javascript. Siehe yaslaw's post. Ich habe sowas auch vor kurzem gemacht. Jeder kann bei circle-driver eine Grafik als Signatur einbinden, die immer anzeigt, wie viele Fotos man hochgeladen hat.
http://www.circle-driver.de/external/signature.aspx?u=1&t=099de837ee48d74ed048f810846b69b1


----------



## sharK223 (3. Juni 2010)

schön und gut aber wie programmiere ich das denn?
ich kann mit .aspx leider nichts anfangen.


----------



## ComFreek (3. Juni 2010)

Ich weiß nicht mehr wer, aber jemand hat hier auf tutorials.de mal so einen JavaScript-Bildgenerator vorgestellt. Er/Sie nutze dafür die Base64-Kodierung.


----------



## Maik (3. Juni 2010)

ComFreek hat gesagt.:


> Ich weiß nicht mehr wer, aber jemand hat hier auf tutorials.de mal so einen JavaScript-Bildgenerator vorgestellt. Er/Sie nutze dafür die Base64-Kodierung.


Sprichst du von dem (als "Wichtig" markierten) Sticky-Thread  Pixeloperationen in JavaScript + Bitmap-Erzeugung?

mfg Maik


----------



## sharK223 (3. Juni 2010)

Maik hat gesagt.:


> Sprichst du von dem (als "Wichtig" markierten) Sticky-Thread  Pixeloperationen in JavaScript + Bitmap-Erzeugung?
> 
> mfg Maik



Ja sowas in der Art dachte ich mir. So das halt ein Bitmap ausgegeben wird welches dann auf Schueler.vz angezeigt wird.
Hatte halt vermutet, dass es in Javascript (so wie in C++ oder C#) eine Classe gibt mit deren hilfe ich ein Graphics objekt erstelle
und dann dabei eine .DrawString(); funktion benutzen kann.


----------



## CPoly (3. Juni 2010)

sharK223 hat gesagt.:


> schön und gut aber wie programmiere ich das denn?



Yaslaw hat einen Link zum Quelltext samt Anleitung gepostet.



yaslaw hat gesagt.:


> Das Bild kannst du in PHP erstellen und über javascript regelmässig neu abrufen (refresh)
> 
> Das Bild könnte etwa so aussehen (mehrmals F5 dücken...):
> http://yaslaw.info/tools/font/signatur.php
> PHP-Code dazu http://wiki.yaslaw.info/wikka/PhpFontClassSignatur


----------



## ComFreek (3. Juni 2010)

Maik hat gesagt.:


> Sprichst du von dem (als "Wichtig" markierten) Sticky-Thread  Pixeloperationen in JavaScript + Bitmap-Erzeugung?
> 
> mfg Maik



Ja genau dieser Thread!


----------

