ilch Forum » Allgemein » HTML, PHP, SQL,... » Avatar Layering

Geschlossen
  1. Di. 09.04.2013 10:47 Uhr #1
    User Pic
    CeeJay Hall Of Fame
    Registriert seit
    23.03.2007
    Beiträge
    2.425
    Beitragswertungen
    18 Beitragspunkte
    Ilch-Version: 1.1 p

    Ich habe folgendes vor:

    Wenn ein User sich registriert und ein Bild hochlädt (jpg, gif oder png), soll über das Bild ein weiteres Bild gelayered werden. Als Ausgabe möchte ich dann ein Bild, was auf 100x100 px geschrumpft wird und im png format abgespeichert wird.

    Folgenden Code habe ich schon: 

    // BILD LAYERING START
$avatar1 = imageCreateFromPNG("1.png");//Bild, das hochgeladen wurde
$avatar2 = imageCreateFromPNG("2.png");//Bild, das rübergelegt wird
imageCopy($avatar1, $avatar2,
               0, 0,
               0, 0,
               400, 600);

imagePNG($1);
echo "ob das geklappt hat? :/";
// BILD LAYERING ENDE


    Wie muss ich das jetzt wo einbasteln, damit das funktioniert?

    betroffene Homepage: externer Link


    Zuletzt modifiziert von CeeJay am 09.04.2013 - 10:57:22
    Nichts ist so sicher, wie die Änderung.
    0 Mitglieder finden den Beitrag gut.
  2. Di. 09.04.2013 11:44 Uhr #2
    User Pic
    holz Hall Of Fame
    Registriert seit
    17.11.2005
    Beiträge
    4.606
    Beitragswertungen
    117 Beitragspunkte
    vielleicht erklärst du das etwas genauer was du damit machen willst? soll das für den avatar sein oder was?
    0 Mitglieder finden den Beitrag gut.
  3. Di. 09.04.2013 12:13 Uhr #3
    User Pic
    CeeJay Hall Of Fame
    Registriert seit
    23.03.2007
    Beiträge
    2.425
    Beitragswertungen
    18 Beitragspunkte
    Wenn ein User sich z.B. registriert, sein Profil ändert oder wenn ein Admin das Profilbild ändert, dann soll folgendes passieren:

    Das Avatarbild, was hochgeladen wird, soll auf eine größe von 100x100 px geschrumpft werden und ein weiteres Bild soll drübergelegt werden (png-datei, quasi ein Wasserzeichen)
    Nichts ist so sicher, wie die Änderung.
    0 Mitglieder finden den Beitrag gut.
  4. Di. 09.04.2013 16:07 Uhr #4
    User Pic
    Saarlonz Hall Of Fame
    Registriert seit
    07.08.2008
    Beiträge
    3.003
    Beitragswertungen
    235 Beitragspunkte
    Ich würde das ganze mit 2 übereinander liegenden div´s machen statt so wie du es vorhast.
    0 Mitglieder finden den Beitrag gut.
  5. Di. 09.04.2013 18:22 Uhr #5
    User Pic
    mic_pt Mitglied
    Registriert seit
    03.01.2008
    Beiträge
    319
    Beitragswertungen
    19 Beitragspunkte
    Yo, so kann der user hochladen was er will : gif, jpg oder png und dein wasserzeichen oder rahmen oder was auch immer liegt dann ein layer drüber.

    Hat auch den vorteil das es schneller ist da nix gerendert werden muss ...
    0 Mitglieder finden den Beitrag gut.
  6. Di. 09.04.2013 18:25 Uhr #6
    User Pic
    holz Hall Of Fame
    Registriert seit
    17.11.2005
    Beiträge
    4.606
    Beitragswertungen
    117 Beitragspunkte
    ein weiterer vorteil wäre die flexibilität wenn sich das design der seite ändert ist das auch schnell angepass

    bei deiner idee muss dann von jedem user ein neues bild hochgeladen werden ...
    0 Mitglieder finden den Beitrag gut.
  7. Di. 09.04.2013 19:03 Uhr #7
    User Pic
    Saarlonz Hall Of Fame
    Registriert seit
    07.08.2008
    Beiträge
    3.003
    Beitragswertungen
    235 Beitragspunkte
    ZitatZitat geschrieben von holz

    ein weiterer vorteil wäre die flexibilität wenn sich das design der seite ändert ist das auch schnell angepass

    bei deiner idee muss dann von jedem user ein neues bild hochgeladen werden ...


    Was wieder mal nicht stimmt da das Bild bei seiner Variante immer wieder neu generiert wird. So müsste er nur das obere Bild anpassen und fertig.
    0 Mitglieder finden den Beitrag gut.
  8. Di. 09.04.2013 19:22 Uhr #8
    User Pic
    holz Hall Of Fame
    Registriert seit
    17.11.2005
    Beiträge
    4.606
    Beitragswertungen
    117 Beitragspunkte
    was er will das jedesmal beim seitenaufbau neu rendern lassen oder wie? ...

    das ist ja quark ... finde ich
    0 Mitglieder finden den Beitrag gut.
  9. Mi. 10.04.2013 08:13 Uhr #9
    User Pic
    CeeJay Hall Of Fame
    Registriert seit
    23.03.2007
    Beiträge
    2.425
    Beitragswertungen
    18 Beitragspunkte
    das mit dem div darüber finde ich gut, das werde ich mal testen. vielen dank
    -----
    Ich habe jetzt mal folgendes gemacht:

    css: 
    #avatar
{
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
width: 120px;
height: 120px;
z-index: 1;
}
#avatarlayer
{
position: top;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
width: 120px;
height: 120px;
z-index: 2;
}


    userdetails.htm: 
    <div id="avatar" width="120" height="120"><img>{AVATA}</img>
		  <div id="avatarlayer"><img src="include/images/avatars/layer.png" width="120" height="120"></img>


    zu bewundern unter:
    externer Link

    Leider liegen die Bilder nun direkt untereinander, nicht exakt übereinander...

    hat jemand eine Idee für mich?


    Zuletzt modifiziert von CeeJay am 10.04.2013 - 08:49:49
    Nichts ist so sicher, wie die Änderung.
    0 Mitglieder finden den Beitrag gut.
  10. Mi. 10.04.2013 09:33 Uhr #10
    User Pic
    holz Hall Of Fame
    Registriert seit
    17.11.2005
    Beiträge
    4.606
    Beitragswertungen
    117 Beitragspunkte
    da musst du mit z-index arbeiten

    damit kannst du eine art ebenen schicht erstellen
    0 Mitglieder finden den Beitrag gut.
  11. Mi. 10.04.2013 09:43 Uhr #11
    User Pic
    CeeJay Hall Of Fame
    Registriert seit
    23.03.2007
    Beiträge
    2.425
    Beitragswertungen
    18 Beitragspunkte
    ZitatZitat geschrieben von holz

    da musst du mit z-index arbeiten

    damit kannst du eine art ebenen schicht erstellen


    Liest du auch mal was ich poste? Oder habe ich was falsch gemacht?
    Nichts ist so sicher, wie die Änderung.
    0 Mitglieder finden den Beitrag gut.
  12. Mi. 10.04.2013 11:45 Uhr #12
    User Pic
    holz Hall Of Fame
    Registriert seit
    17.11.2005
    Beiträge
    4.606
    Beitragswertungen
    117 Beitragspunkte
    ZitatZitat geschrieben von CeeJay

    ZitatZitat geschrieben von holz

    da musst du mit z-index arbeiten

    damit kannst du eine art ebenen schicht erstellen


    Liest du auch mal was ich poste? Oder habe ich was falsch gemacht?


    Schalte mal ein Gang zurück .... ich hab das CSS übersehen!

    -------------------------------
    wieso hast du deinen Divs eine breite und höhe als Atribut mitgegeben? und per css auch? ....

    mach mal bei dem das unten liegen soll den Z-index weg ...
    0 Mitglieder finden den Beitrag gut.
  13. Mi. 10.04.2013 13:56 Uhr #13
    User Pic
    CeeJay Hall Of Fame
    Registriert seit
    23.03.2007
    Beiträge
    2.425
    Beitragswertungen
    18 Beitragspunkte
    hat noch jemand eine Idee?
    Nichts ist so sicher, wie die Änderung.
    0 Mitglieder finden den Beitrag gut.
  14. Mi. 10.04.2013 16:18 Uhr #14
    User Pic
    marco1978 Mitglied
    Registriert seit
    03.12.2008
    Beiträge
    116
    Beitragswertungen
    1 Beitragspunkte
    versuch das mal 

    <style type="text/css">
 #user_bild_1{
position:relative;
width:120px;
height:120px;
border-top:none; 
}

#user_bild_ram{
position:absolute;
top:0px;
left:0px;
width:120px;
height:120px;
}
#user_bild_2{
position:absolute;
top:0px;
left:0px;
width:120px;
height:120px;
}
</style>
<div id="user_bild_ram">
<div id="user_bild_avata">{AVATA}</div>	
<div id="user_bild_2"><img src="include/images/avatars/layer.png" width="120" height="120"></div>
</div>
    0 Mitglieder finden den Beitrag gut.
  15. Mi. 10.04.2013 16:40 Uhr #15
    User Pic
    CeeJay Hall Of Fame
    Registriert seit
    23.03.2007
    Beiträge
    2.425
    Beitragswertungen
    18 Beitragspunkte
    haha wie geil - jetzt ist das Bild genau oben links im Design.. zunge macht es an dieser stelle sinn, das Ding in eine tabelle zu packen?

    Der "Layering-Effekt" hat übrigens funktioniert
    Es klappt leider immer noch nicht -.- die Bilder sind untereinander, nicht übereinander...


    Zuletzt modifiziert von CeeJay am 10.04.2013 - 16:47:24
    Nichts ist so sicher, wie die Änderung.
    0 Mitglieder finden den Beitrag gut.
Geschlossen

Zurück zu HTML, PHP, SQL,...

Optionen: Bei einer Antwort zu diesem Thema eine eMail erhalten