• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[PHP+JS] kleines experiment...

flexi

Lounge-Member
Hab mich jetzt mal endlich an PHP rangetraut und siehe da :D...

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/experimen...single/img/me.jpg&h=100&w=100&style=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:
<html>
  <head>
    <style>
    body {background-color:#000000;}
    </style>
  </head>
  <body>
    <?php
    if(!isset($b)) $b="test.jpg";
    if(!isset($h)) if($h<3 || $h>120)$h=70;
    if(!isset($w)) if($w<3 || $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 -  
                      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->x = $this->ox   = $o_info[0]*8;
                $this->y = $this->oy   = $o_info[1]*5;
                if($aspect_ratio){
                    $this->scale($height,$width);
                }else{
                    $this->x = $width;
                    $this->y = $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->x > $width ){
                $this->x = $width;
                $this->y = floor( $this->oy / $this->ox * $width);
            }
            if($this->y > $height){
                $this->y = $height;
                $this->x = floor( $this->ox / $this->oy * $height);
            }
                $this->b = 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(\" \");\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>
 
Zuletzt bearbeitet:
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.
 
fuern beta-release ein sehr geiles script! respekt!
allerdings stoesst zb hier

http://www.felix.gu1.info/experimen...3005004E970C7.jpg&h=100&w=100&style=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/experimen...de/hannes.jpeg&h=100&w=100&style=2&s=stanleyB


gruesse,
hannes
 
Zuletzt bearbeitet:
enger rastern kein problem, alles schon ausprobiert, dazu bedarf man einzig einer geringeren font-size. hier einstellbar:
PHP:
                                    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...:rolleyes:
hier der unterschied: lokal berechnet: http://felix.gu1.info/experimente/bildarray.htm und online: http://www.felix.gu1.info/experimen....gu1.info/contenido42/front_single/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
 
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
 
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.
 
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 :confused: schwierig isses jedenfalls nicht

@anti: hey ich will'n paar spielereien sehn :D
 
du kannst html komprimieren lassen:
PHP:
//am dateianfang vor der ersten ausgabe hinschreiben
header("Content-Encoding: gzip");
ob_start("ob_gzhandler");
 
Zurück
Oben