Ergebnis 1 bis 14 von 14
  1. #1
    Avatar von flexi
    flexi ist offline Lounge-Member
    registriert
    28-01-2002
    Ort
    Rostock an der schönen Ostsee
    Beiträge
    1.022

    Talking [PHP+JS] kleines experiment...

    Hab mich jetzt mal endlich an PHP rangetraut und siehe da ...

    unter http://www.felix.gu1.info/experimente/jpg2ascii.php findet sich mein Erstlingswerk. zugegeben das Standardbild zeigt nur recht schwach wozu das ding in der Lage ist. - einfach mal folgende Parameter übergeben:

    b = url für ein .jpg-Bild (Achtung hab noch keine Erkennung eingebastelt - also fehler, wenn kein jpg oder falsche url)

    h und w geben die maximale höhe oder breite in ascii zeichen an (max 120)

    style= 0, 1 oder 2 -einfach testen

    s = string aus dem (je nach style) die buchstaben genommen werden

    bg = auch ne style-eigenschaft. boolean also true oder false

    (so ists gemeint: http://www.felix.gu1.info/experiment...tyle=2&s=FLEXI )

    Optimal siehts im InternetExplorer aus. welche CSS Eigenschaft ist das nochmal, mit der man den zeilenabstand in netscape und mozilla auf null setzen kann?

    hier der quelltext:
    PHP-Code:
    <html>
      <head>
        <style>
        body {background-color:#000000;}
        </style>
      </head>
      <body>
        <?php
        
    if(!isset($b)) $b="test.jpg";
        if(!isset(
    $h)) if($h<|| $h>120)$h=70;
        if(!isset(
    $w)) if($w<|| $w>120)$w=70;
        if(!isset(
    $s)) if($s==""$s "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
        if(!isset(
    $bg)) $bg=false;
        if(!isset(
    $style)) $style=1;


        class 
    pic2array{
            var 
    $x;     // result width (in chars)
            
    var $y;     // result height
            
    var $url;
            var 
    $str;   // chars for output
            
    var $b;     // scaled image object
            
    var $o;     // original image object
            
    var $ox;    // original image width
            
    var $oy;    // original image height
            
    var $style/*
                          style=0 - &nbsp;
                          style=1 - random chars from string
                          style=2 - repeated string
                        */
            
    var $bg;

            function 
    pic2array($url="test.jpg",$aspect_ratio=true,$height=150,$width=120,$style=false,$bg=false,$str="01"){
                    
    $this->url $url;
                    
    $this->bg $bg;
                    
    $this->o    ImageCreateFromJpeg($this->url);
                    
    $o_info GetImageSize($this->url);
                    
    $this->$this->ox   $o_info[0]*8;
                    
    $this->$this->oy   $o_info[1]*5;
                    if(
    $aspect_ratio){
                        
    $this->scale($height,$width);
                    }else{
                        
    $this->$width;
                        
    $this->$height;
                    }
                    
    $this->setStyle($style);
                    
    $this->str $str;
            }

            function 
    setStyle($style)
            {
                   switch(
    $style){
                           case 
    0$this->style=0$this->bg=true; break;
                           case 
    2$this->style=2; break;
                           default:
    $this->style=1; break;
                   }
            }

            function 
    scale($height,$width){     //skaliert das bild entweder auf max. breite oder max. höhe unter berücksichtigung des seitenverhältnisses
                
    if($this->$width ){
                    
    $this->$width;
                    
    $this->floor$this->oy $this->ox $width);
                }
                if(
    $this->$height){
                    
    $this->$height;
                    
    $this->floor$this->ox $this->oy $height);
                }
                    
    $this->ImageCreate($this->x,$this->y);
                    
    ImageCopyResized($this->b,$this->o,0,0,0,0,$this->x,$this->y,$this->ox/8+1,$this->oy/5+1);
            }

            function 
    show_js(){
                    echo 
    "<script>\n";
                    echo 
    "bild=new Array();\n";
                    for(
    $j=0;$j<($this->y-1);$j++){
                            echo 
    "bild[$j]=new Array(";
                            for(
    $k=0;$k<($this->x-1);$k++){
                                 
    $col ImageColorsForIndex($this->b,ImageColorAt($this->b,$k,$j));
                                 
    $red   dechex($col[red]);   while(strlen($red)  <2$red  ="0".$red;
                                 
    $green dechex($col[green]); while(strlen($green)<2$green="0".$green;
                                 
    $blue  dechex($col[blue]);  while(strlen($blue) <2$blue ="0".$blue;
                                 
    $col=$red.$green.$blue;
                                 echo 
    "\"$col\"";
                                 if(
    $k<($this->x-2))echo",";
                            }
                            echo 
    ");\n";
                    }

                    if(
    $this->style==2) echo "        index=0\n";
                    if(
    $this->style!=0) echo "        txt=\"".$this->str."\"\n";
                    if(
    $this->style!=0) echo "        txt=txt.split(\"\");\n";
                                        echo 
    "function zeichen(){\n";
                    if(
    $this->style==2) echo "        index++; if(index>=txt.length)index=0;\n";
                    if(
    $this->style==1) echo "        return(txt[Math.floor(txt.length*Math.random())])\n";
                    if(
    $this->style==2) echo "        return(txt[index]);\n";
                    if(
    $this->style==0) echo "        return(\"&nbsp;\");\n";
                                        echo 
    "}\n";
                                        echo 
    "                document.write(\"<span style=\\\"white-space:nowrap;font-family:'lucida console';font-size:7pt;\\\">\");\n";
                                        echo 
    "for(y in bild){\n";
                                        echo 
    "        for(x in bild[y]){\n";
                    if(
    $this->bg==false)echo "                document.write(\"<span style=\\\"color:#\"+bild[y][x]+\"\\\"><b>\"+zeichen()+\"</b></span>\");\n";
                    if(
    $this->bg)       echo "                document.write(\"<span style=\\\"background-color:#\"+bild[y][x]+\"\\\"><b>\"+zeichen()+\"</b></span>\");\n";
                                        echo 
    "        }\n";
                                        echo 
    "                document.write(\"<br>\");\n";
                                        echo 
    "}\n";
                                        echo 
    "                document.write(\"</span>\");\n";
                                        echo 
    "</script>\n";
           }
        }
        
    $bild1 = &new pic2array($b,true,$h,$w,$style,$bg,$s);
        
    $bild1->show_js();
          
    ?>
      </body>
    </html>
    Geändert von flexi (28-07-2003 um 15:25 Uhr)
    <META NAME="GENERATOR" CONTENT="Notepad">

  2. #2
    Julien ist offline Lounge-Member
    registriert
    26-06-2002
    Beiträge
    1.993
    Geil.

    Nein, im Ernst, das gefällt mir jetzt wirklich! Kompliment!

    Die CSS-Eigenschaft sagt mir nichts, aber bei SelfHTML solltest du fündig werden, falls diese existiert.

  3. #3
    Avatar von sanchez
    sanchez ist offline Lounge-Member
    registriert
    16-07-2002
    Ort
    Bremen
    Beiträge
    3.472
    ich finds genial...nette spielerei...
    Niemals aufgeben...aufgeben gilt nicht

  4. #4
    Avatar von flexi
    flexi ist offline Lounge-Member
    registriert
    28-01-2002
    Ort
    Rostock an der schönen Ostsee
    Beiträge
    1.022
    war bisher bloß zu faul selbst nachzusuchen kommt noch
    <META NAME="GENERATOR" CONTENT="Notepad">

  5. #5
    Avatar von stanleyB
    stanleyB ist offline Doppel-As
    registriert
    09-05-2001
    Ort
    /dev/null
    Beiträge
    116
    fuern beta-release ein sehr geiles script! respekt!
    allerdings stoesst zb hier

    http://www.felix.gu1.info/experiment...tyle=2&s=FLEXI

    der IE an seine grenzen und sagt, er sei zu langsam dafuer.
    erinnert mich stark an die aalib unter *NIX. kann man den ascii-wirr-warr auch enger rastern? *duck*

    // edit1: ist es eigentlich auch moeglich die konturen im foto mit
    // jeweiligen chars abzudecken, also nicht nur mit nem
    // festgelegten string?!
    // zu sehen hier: http://aa-project.sourceforge.net/gallery/

    // edit2: aber solche ergebnisse, nach etwas rumspielerei
    // sind schon mehr als genial:
    // http://www.felix.gu1.info/experiment...e=2&s=stanleyB


    gruesse,
    hannes
    Geändert von stanleyB (29-07-2003 um 10:13 Uhr)
    Homefucking Kills Prostitution!

  6. #6
    Avatar von flexi
    flexi ist offline Lounge-Member
    registriert
    28-01-2002
    Ort
    Rostock an der schönen Ostsee
    Beiträge
    1.022
    enger rastern kein problem, alles schon ausprobiert, dazu bedarf man einzig einer geringeren font-size. hier einstellbar:
    PHP-Code:
                                        echo "                document.write(\"<span style=\\"white-space:nowrap;font-family:'lucida console';font-size:7pt;">\");\n"
    allerdings hab ich mich jetzt auf die 7pt fertsgelegt, weil ich von der size weiß, dass sie ein seitenverhältnis von 5 zu 8 hat. (taucht auch wieder auf im script - siehe scale() )
    ASCII Zeichen abhängig von deren Farbwerten ist glaub ich auch nicht allzu schwierig, das würd ich dann aber lieber auf clientseite erledigen, ansonsten wird das dokument zu riesig.
    allerdings musst ich auch feststellen, dass die gd-lib bei mir lokal aufm rechner mit vollen farben rechnet, während die im netz intern nur mit 256 farben zu rechnen scheint...
    hier der unterschied: lokal berechnet: http://felix.gu1.info/experimente/bildarray.htm und online: http://www.felix.gu1.info/experiment...gle/img/me.jpg

    bin schon am überlegen ob man die zu übermittelnden daten nochmal minimieren könnte, indem man ein array mit der palette (und von der palette nur die tatsächlich benötigten farben) und anstatt der konkreten farben auch nur die indexe angibt. müsst ich mal testen, obs dadurch kleiner wird. der JS Aufwand bleibt aber der gleiche, wenn nicht höher
    <META NAME="GENERATOR" CONTENT="Notepad">

  7. #7
    Avatar von stanleyB
    stanleyB ist offline Doppel-As
    registriert
    09-05-2001
    Ort
    /dev/null
    Beiträge
    116
    allerdings musst ich auch feststellen, dass die gd-lib bei mir lokal aufm rechner mit vollen farben rechnet, während die im netz intern nur mit 256 farben zu rechnen scheint...
    jupp, mit mehr als 256farben schaut die sache wirklich sehr schoen aus.
    ob man das der gdlib beim hoster irgendwie austreiben kann?!

    //edit:
    ah und noch ein anreiz, den ich so nicht verwirklichen koennten - wenn man schon die gdlib missbraucht, koennt man doch auch nach dem jpg2ascii das erbebnis wieder als jpg ausgeben lassen oder? - also praktisch ein jpeg aus ascii eines jpegs *confused* :]

    ansonsten wirklich ganz grosse klasse,
    hannes
    Homefucking Kills Prostitution!

  8. #8
    Avatar von rasputin
    rasputin ist offline Lounge-Member
    registriert
    31-10-2001
    Beiträge
    3.102
    cooles script, aber ich verstehe nicht, wieso du javascript nutzt. du könntest das html auch per php ausgeben, dann würde sich bei grossen bildern der browser nicht verabschieden.

  9. #9
    Avatar von antiheld2000
    antiheld2000 ist offline Lebende Foren-Legende
    registriert
    02-05-2001
    Beiträge
    1.525

    Thumbs up

    HILFE! ich kann mit rumspielen nicht mehr aufhörn!!!!

  10. #10
    Avatar von flexi
    flexi ist offline Lounge-Member
    registriert
    28-01-2002
    Ort
    Rostock an der schönen Ostsee
    Beiträge
    1.022
    ganz einfach rasputin: ein auf 100x100 ascii zeichen html-formatiertes bildchen bringts schon auf nette 250kb! - mit der js-lösung hab ich die dateigröße um den faktor5 minimiert.

    @stanley: jetzt wo du's sagst - naja aber leider auch nur mit 256 farben schwierig isses jedenfalls nicht

    @anti: hey ich will'n paar spielereien sehn
    <META NAME="GENERATOR" CONTENT="Notepad">

  11. #11
    Avatar von rasputin
    rasputin ist offline Lounge-Member
    registriert
    31-10-2001
    Beiträge
    3.102
    du kannst html komprimieren lassen:
    PHP-Code:
    //am dateianfang vor der ersten ausgabe hinschreiben
    header("Content-Encoding: gzip");
    ob_start("ob_gzhandler"); 

  12. #12
    Avatar von flexi
    flexi ist offline Lounge-Member
    registriert
    28-01-2002
    Ort
    Rostock an der schönen Ostsee
    Beiträge
    1.022
    THX!!! das ist genau, das was ich gesucht habe...
    <META NAME="GENERATOR" CONTENT="Notepad">

  13. #13
    Avatar von antiheld2000
    antiheld2000 ist offline Lebende Foren-Legende
    registriert
    02-05-2001
    Beiträge
    1.525
    Original geschrieben von flexi
    @anti: hey ich will'n paar spielereien sehn
    okay, here we go:

    Der Vogelpsychologe

    Das Ich

    Dvil Inside (man beachte die zahnlücken)

    Nackte Tatsachen

    Rotten.com Style

  14. #14
    Avatar von flexi
    flexi ist offline Lounge-Member
    registriert
    28-01-2002
    Ort
    Rostock an der schönen Ostsee
    Beiträge
    1.022
    lol ja goile auswahl
    <META NAME="GENERATOR" CONTENT="Notepad">

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •