Lave billede med JavaScript

Hvad mener du lige med at lave?

pixel for pixel???

Jep! pixel for pixel.. Eller også linier, cirkler m.m.

hvis du er ihærdig nok........hvorforikke loade det???

Det er bare for at lege lidt med det... Få det hele samlet i et html-dokument...

held og lykke

tak... nu venter jeg bare på et svar :o)

Det lyder for skægt! - Det bliver jeg nød til at lytte med på ;-)

Det kan ikke lade sig gøre med nuværende browsere. Den eneste man kan gøre det på er at indsætte lag i pixel- eller linje-størrelse og så give dem position, baggrundsfarve etc.etc.
Naturligvis kan du relativt nemt bygge en dims der indsætter et lag i størrelse 1x1 med en eller anden farve, der hvor brugeren trykker med musen, men den smule sjov synes jeg langt fra er besværet værd. Derudover bliver det en del mere kompliceret når du skal til at lave funktioner til linjer, cirkler, udfyldning af farver osv.

Jeg kunne til gengæld forestille mig at den rigtige måde at gøre sådan noget på ville være med en java-applet eller en active-x komponent - de har (java har ihvertfald, mon ikke også det gælder for active x) grafik klasser der gør det betydeligt lettere at skrue sådan noget sammen..

Du kan lave en tabel hvor alle td er 1x1 pixel, og så bruge bgcolor i hver enkelt celle.

Jeg vil tro at det kommer til at fylde ca 127 gange så meget som en tilsvarende gif, men det kunne da være sjovt.

Jeg har faktisk set et bllede af en åben bog, lavet på den måde.

...Jeg har altså set det et sted...

Jeg mener det var noget med:

<script>
....

PIC =  #543543;#453545;#342333;


....
</script>

...eller noget...

ldanielsen>>> sådan noget har jeg leget med, men jeg mener bestemt, at man kan lave det i javascript...

http://webcafe.dk/java/artikler/110/ja110.php3 ???

Det er godt nok i java, men måske kan det bruges til noget. Jeg gad ikke lige læse det hele igennem :-)

du kan da lave tabellen med javascript, og så huske farverne i nogle arrays

Det var ikke sådan, det var lavet...

Og pointen var, at det hele var i én fil, så appleter er udelukket...

Okai

rfogh, det kan da sagtens lade sig gøre ;)

Hele ideen er blot at du opbygger en streng, der indeholder billedets data:

billede = \"ÿØÿà JFIF

 

  ÿÛ C ...\" // Osv., Osv.!!

Derefter sætter du blot denne streng på dit img tag:

<img src=\"java script:billede\">

Dette virker af den simple grund at java script: er en pseudo-protokol og derfor kan bruges på samme måde som http://. Det forudsætter selvf. at variablen billede indeholder de rigtige data til at danne et billede ;)

Én side jeg umiddelbart kan komme i tanke om hvor det er gjort nemt at tegne virtuelle billeder med Javascript, må helt klart være www.elf.org

Han har også et par under-sider om emnet:

http://www.elf.org/colorcube/ (Demonstrerer GIF-billeder dannet med Javascript)

http://www.elf.org/pnglets/ (Demonstrerer PNG-billeder dannet med Javascript)

Fra hovedsiden kan du nok også finde mere info om hans giflets og pnglets.

Det eneste minus ved Rogers rutiner er at han er Netscape-fanatiker (utroligt nok). Derfor virker ovenstående kun i NS4.*, selvom IE4+ rent faktisk håndterer dynamisk genererede billeder (eller rettere, billed-data i Javascript streng) utroligt meget bedre end NS4.*

Jeg har selv overvejet at omskrive hans rutiner til IE, men har ikke haft tid til det endnu.

/Thor

Sejt!!! Jeg vidste det! Igen redder jumper det hele! Go Thor!

...men har du ikke noget til IE???

Tja, grundlæggende burde det ovenstående virke fint i IE, den kære Roger er dog NS-fanatiker, men jeg kan dog give dig et eksempel med et xbm-billede genereret i Javascript. XBM er også et så dejligt nemt format ;)

Prøv at kopiere det nedenstående ind i en HTML fil og åbn den i IE:

<html>
<head>
<script language=\"Javascript\">

image_text =
\"#define plaid_width 22\\n\" +
\"#define plaid_height 22\\n\" +
\"#define plaid_x_hot -1\\n\" +
\"#define plaid_y_hot -1\\n\" +
\"static char plaid_bits[] = {\\n\" +
\"  0x75, 0xfd, 0x3f, 0xaa, 0xfa, 0x3e, 0x75, 0xfd, 0x3f, 0xaa, 0xfa, 0x3e,\\n\" +
\"  0x75, 0xfd, 0x3f, 0xff, 0x57, 0x15, 0x75, 0xfd, 0x3f, 0xaa, 0xfa, 0x3e,\\n\" +
\"  0x75, 0xfd, 0x3f, 0xaa, 0xfa, 0x3e, 0x75, 0xfd, 0x3f, 0x20, 0xa8, 0x2b,\\n\" +
\"  0x20, 0x50, 0x15, 0x20, 0xa8, 0x2b, 0x20, 0x50, 0x15, 0x20, 0xa8, 0x2b,\\n\" +
\"  0xff, 0xff, 0x3f, 0x20, 0xa8, 0x2b, 0x20, 0x50, 0x15, 0x20, 0xa8, 0x2b,\\n\" +
\"  0x20, 0x50, 0x15, 0x20, 0xa8, 0x2b};\\n\";

</script>
</head>
<body>

<center>

<img src=\"java script:image_text\" width=22 height=22>

</center>

</body>
</html>

Så vidt jeg husker skulle ovenstående gerne give et \"ternet\" billede, men jeg er ikke helt sikker (skrev det mere eller mindre ud fra hukommelsen :)

Hvis du vil vide mere om at danne billeder, er det blot at kigge rundt omkring på nettet.

Hvis du gerne vil have nogle tegne-funktioner (til f.eks. XBM-billeder), kan jeg sikkert støve noget af mit gamle kode frem :)

/Thor

SEJT!!!

Gimme gimme gimme :o)

*rode rode* Jamen dog, jeg fandt et gammelt library med XBM-tegnefunktioner til Javascript! ;)

Jeg har lagt det op på http://chat.betachat.dk/temp/ImaJinXBM.zip

/Thor

I PHP kan du selv opbygge dine billeder
www.devshed.com/Server_Side/PHP/ImageGeneration/

jumper>>> Mange, mange, mange tak

_luge_>>> Der er en grund til, at spørgsmålet ligger i JAVASCRIPT ;o) Ellers mange tak...

rfogh >>>I know, det skulle også have været en kommentar

Det er helt iorden... Du skal have mange tak for forsøget :o)

rfogh, du skal egentlig også have tak for at minde mig om det XBM library. Det var lige hvad jeg stod og havde brug for til en fraktal-zoomer samt nogle 3D-rutiner i vectorspace ;)

/Thor

Sku\' det være en anden gang ;o)