kostenloser Webspace werbefrei: lima-city


Background-Transparenzverlauf als Image?

lima-cityForumProgrammiersprachenPHP, MySQL & .htaccess

  1. Autor dieses Themas

    h***********r

    Hi,
    jedes Bild läßt sich ja z.B. streifenweise als background mit transparentem Verlauf im browser darstellen.
    Das sieht dann wie nach einer Bildbearbeitung aus.
    Man kann es damit per php auf die Spitze treiben, bis dahin, jedem Pixel eine eigene Transparenz zuzuordnen, also entsprechende Algorithmen anwenden.
    So lassen sich auch Bilder und Farbflächen überlagern.
    Wie bekommt man bitte ein derartiges Hintergrundbild als Image zustande?
    Denn den html-Qualtext will man natürlich nicht immer wieder generieren lassen müssen, bzw. sonst wäre der gewünschte Ausschnitt erst per screenshot aus dem Browser zu kopieren und nachzubearbeiten.
    Geht wohl nicht, schätze ich mal.
    Im PHP Handbuch steht:
    Mit PHP können Sie nicht nur HTML ausgeben, sondern auch Grafiken in vielen Formaten - wie gif, png, jpg, wbmp, und xpm - erzeugen und/oder manipulieren. Noch besser, Sie können Grafiken mit PHP direkt als Datenstrom ausgeben. Damit das funktioniert, müssen Sie PHP mit der GD-Bibliothek zur Grafikbearbeitung kompilieren. GD und PHP benötigen, je nachdem mit welchen Grafikformaten Sie arbeiten wollen, zusätzliche Bibliotheken.

    Das läuft zwar, aber wie schreibt man das wie auf den background in eine Grafik?
    z.B.
    <?php
    $im = imagegrabscreen();
    imagepng($im, "myscreenshot.png");
    imagedestroy($im);
    ?>
    bringt kein derart gewünschtes variabel transparentes Bild.
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. Sorry, aber der Text/die Frage ist mir zu wirr! Dem kann ich nicht folgen.

    Klar, mit php kannst Du Graphiken erstellen, die auch Transparenz enthalten.
    Der Browser kann aber kein php, sondern nur HTML.
    Ergo: Bild per php generieren und mittels HTML im Browser anzeigen:
    <beliebigesTag style="background:url(DeinBildgenerator.php);">Inhalte</beliebigesTag>


    Der kleine Hinweis "This function is only available on Windows. " im Manual zu imagegrabscreen sollte Denkanstöße geben, daß diese Funktion nicht geeignet ist, bei einem Webhoster einsetzbar zu sein. Darüberhinaus ist diese Funktion auch für andere Zwecke gedacht, als die, für die Du sie, so wie ich das interpretiere, einsetzen willst.

    imagecreatefromPNG() und die entsprechenden Switches für den Alphakanal werden dir bei der Erzeugung deines Bildes eher helfen.

    FF



  4. hi hobbypfuscher,

    ich denke mal, ich versteh was du meinst.
    auf der folgenden seite findest du eine referenz zu allen funktionen, die man so benötigt:
    php.net

    hoffe, das hilft dir weiter :wink:

    lg, navarr
  5. Autor dieses Themas

    h***********r

    Danke, viell. mal einfach ein schnell reingepfriemeltes Beispiel eines Transparenzverlaufs
    Das hätte ich gern als transparentes img abgespeichert.
    Ausgangsbild
    Ach so, viell. den kurzen code dazu, was dann ebenso in ein img rein soll:
    <?php
    function imgtranspverlauf_vertnachrechts($w,$h,$img,$starttransp,$endtransp)
    {
      $ret='<div style="position:absolute;float:left;top:0px;left:0px;height:'.$h.'px;">'."\n";
      for($x=0,$op=$opacityperc=($endtransp-$starttransp)/$w;$x<$w;$opacityperc+=$op) $ret.='<div style="float:left;width:1px;height:'.$h.'px;'.
         'filter:alpha(opacity='.(string)$opacityperc.');-moz-opacity:'.(string)($opacityperc/100).';opacity:'.(string) ($opacityperc/100).';'.'background:url(\''.$img.'\') '.($x++).' ;"></div>'."\n";
      return $ret.='</div>';
    }
    echo imgtranspverlauf_vertnachrechts(400,768,"rosen.png",0,100) ;
    ?>

    Damit lassen sich interessante Effekte mit mehreren Bildern erzeugen, deren unterschiedlich verschobenen Ausschnitte unterschiedlich transparent überlagern.
    Und das eben auch in ein img schreiben.

    Beitrag zuletzt geändert: 10.1.2011 18:35:34 von hobbypfuscher
  6. Wenn ich das richtig verstanden habe, suchst du nicht zwingend eine realisierung in PHP, sonder schlicht eine einfachere, als die deine, oder irre ich?
    Jedenfalls habe ich das mal ausprobiert und in meinem Beispiel gelöst, in dem ich erst ein Bild mit transparentem Verlauf über deine Rosen gelegt habe, und dann noch ein zweiter Versuch, indem ich den Verlauf direkt im Bild "eingebaut" habe.
    Erstere Variante ist eher umständlich, und nur sinnvoll, wenn du nicht beabsichtigst, dein Originalbild zu verädnern, zweitere ist da komfortabler, und in jedem beliebigem html-Element als Hintergrund verwendbar.

    Zur PHP-Realisierung:
    Ich kenne mich mit der gd-Bibliothek nicht sehr gut aus, aber ich glaube, das Bild in einzelne Streifen zu zerlegen, denen unterschiedliche Transparenz zuzuweisen und wieder zusammensetzen wäre ein möglicher Ansatz. Am besten wühlst du dich mal durch die PHP-Doku, auf die hat ja bereits navarr verwiesen.
    Du solltest dir aber bewusst sein, das Bildbearbeitung sehr rechenaufwändig ist, und daher ungeeignet, um bei jedem Aufruf deiner Seite das Hintergrundbild neu zu generieren!
  7. Autor dieses Themas

    h***********r

    @metalmachine,
    der Hintergrund läßt sich ja per CSS, html und damit ganz einfach mit php z.B. im Extremfall sogar als individuell frei verschiebbarer Punktausschnitt von Hintergrundbildern herstellen. Dabei läßt sich jedem Punkt eine andere Transparenz zuordnen.
    Damit kann man mit sich überlagernden Hintergründen, also mit Bildern und Farbflächen rel. aufwendige Grafikbearbeitung betreiben.
    Da gibts gar keine Grenze, nur der html-Quelltext wird immer länger.
    Selbstverständlich ist das damit jeweils generierte htm-file elend lang und eben nur zum Aufbau derart erstellter Bilder erforderlich.
    Sowas soll natürlich nur einmal stattfinden, um es damit gleich in ein img rauszuschreiben.

    Dazu meine Frage: läßt sich das auch gleichzeitig oder ganz ohne html-Quelltext auf ein img schreiben, was im browser als HintergrundbilderBearbeitung darstellbar ist?

    Der html-Text kann dazu "km-lang" sein, er dient nur zur Bildbearbeitung von Hintergründen, was dann ebenso als img abzuspeichern wäre, womit dann dieser elende Quelltext nie mehr auftaucht, sondern eben das damit erzeugte resultierende img hergenommen wird.
    PHP generiert für den browser html. Damit kann man Bilder bearbeiten, was man ohne php niemals tun würde. Der html-Text ist nur ein vorübergehendes Abfallprodukt zur einmaligen BildGenerierung. Die sollte analog dazu ein img aufbauen, genau so, wie das die backgrounds per CSS und html tun, wozu php elend langen Quelltext ganz einfach herstellt, der danach nie mehr benutzt wird.
    Ich benutze also bei diesem Spaß html nur als Abfallprodukt zwecks Bildverarbeitung.
    Prinzipiell geht das unbegrenzt.
    Deswegen hätte ichs gerne in ein img rein bekommen.
    Einfach mal einen einzigen Punkt eines Bildes als einen auf der Zielfläche woanders dargestellten und mit Transparenz versehenen Punkt der Zielgrafik des img einfügen. Dann demselben Zielpunkt einen anderen ebenfalls transparenten Punkt eines anderen oder desselben Ausgangsbildes überlagern, wie das eben bei html im browser erfolgt.
    Dafür evtl. bitte einfach mal den php code zeigen, falls es geht.
    Wenn es geht, gibts damit Bildbearbeitung vom Feinsten, wie das html und css bereits andeuten.
    Dann hat man jedes Pixel unter absoluter Kontrolle. Man kann es mit weiteren Pixeln beliebig überlagern und sich dazu Bildverarbeitungs- und Bildüberlagerungs-Algorithmen ausdenken.
    Das kann faszinierend sein, schätze ich mal.

    Solche Bilder werden damit nur ein einziges Mal generiert.
    Also Bildverarbeitung per php pixel für pixel, so, wie das mit den backgrounds per html möglich ist.
    Ich vermute mal, damit läßt sich alles und noch mehr umsetzen, was z.B. gimp so drauf hat.
    Man kann sich leckere Algorithmen zurecht basteln, die per php immer gleich ein img aufbauen, das man dann als Bild auf der Festplatte hat.
    Wäre ne super Geschichte.



    Beitrag zuletzt geändert: 11.1.2011 13:19:52 von hobbypfuscher
  8. Nun, wenn du einfach nur ein fertiges Bild mit diesem Effekt haben willst, wäre es am einfachsten ein Bildbearbeitungsprogramm wie zB GIMP zu verwenden, damit erzielt man das gewünschte Ergebnis in weniger als einer Minute (Stichwort "Farbverlauf").

    Wenn du das ganze aber nicht "händisch" sondern mittels PHP automatisieren möchtest, verwende die GD-Bibliothek.
    Dafür evtl. bitte einfach mal den php code zeigen, falls es geht.
    Wie bereits erwähnt, kenn ich mich mit der Bildbearbeitung über PHP nicht allzugut aus, und so wie es aussieht auch nicht viele andere in diesem Forum. Du wirst also nicht drum herumkommen, selbst herauszufinden, wie das geht, indem du mal das "Google-Orakel" oder eine Suchmaschine deiner Wahl befragst.
  9. Autor dieses Themas

    h***********r

    Danke, mit php könnte jedes Pixel für sich mit Transparenz versehen werden und mit anderen derartigen Pixeln an einer anderen Stelle der damit erzeugten neuen Grafik als img abgespeichert werden.
    Das geht sicher weit über Verläufe hinaus, wobei damit zudem Verläufe beliebig verlaufen können - wellenförmig, exponenziell, gefärbt oder wie auch immer.
    Ich würde eben gerne mit php eigene Algorithmen ausprobieren, um so von keinen Standardverläufen oder sonstigen Superponierungen eingeschränkt zu sein.
    Zudem läuft ja php super - bei mir laufend, weils bereits beim Start der ersten Webseite sowas wie desktops und Neue Symbolleisten aus der aktuellen Festplatte erzeugt.
    Da möchte man immer mehr damit abhandeln können.
    Und es geht ja sogar nur mit html und css - nur eben als km-langer Quelltext, während das Resultat damit dann leider nur als screenshot zugänglich ist.
    Damit wären php scripts denkbar, die das und noch weit mehr dessen abdecken, was gimp kann.
    Ok, ich guck grad im PHP Handbuch nach, es geht - nur leider nicht so supereinfach wie als transparente background-pixel per html und css.
    Das ist schade, weils damit ja wirklich total einfach wäre. Nur eben nicht per backgrounds auf die Webseite in den browser, sondern in ein img.
    Aber das kann man leider vergessen.

    Beitrag zuletzt geändert: 11.1.2011 18:15:37 von hobbypfuscher
  10. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!