Avatar Layering

Gehe zu Seite:

Geschlossen

Di. 09.04.2013 10:47 Uhr #1

CeeJay Hall Of Fame

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.

zitieren

Di. 09.04.2013 11:44 Uhr #2

holz Hall Of Fame

Registriert seit
17.11.2005

Beiträge
4.606

Beitragswertungen

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.
- zitieren
Di. 09.04.2013 12:13 Uhr #3

CeeJay Hall Of Fame

Registriert seit
23.03.2007

Beiträge
2.425

Beitragswertungen

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.
- zitieren
Di. 09.04.2013 16:07 Uhr #4

Saarlonz Hall Of Fame

Registriert seit
07.08.2008

Beiträge
3.003

Beitragswertungen

Ich würde das ganze mit 2 übereinander liegenden div´s machen statt so wie du es vorhast.
0 Mitglieder finden den Beitrag gut.
- zitieren
Di. 09.04.2013 18:22 Uhr #5

mic_pt Mitglied

Registriert seit
03.01.2008

Beiträge
319

Beitragswertungen

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.
- zitieren
Di. 09.04.2013 18:25 Uhr #6

holz Hall Of Fame

Registriert seit
17.11.2005

Beiträge
4.606

Beitragswertungen

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.
- zitieren
Di. 09.04.2013 19:03 Uhr #7

Saarlonz Hall Of Fame

Registriert seit
07.08.2008

Beiträge
3.003

Beitragswertungen

Zitat 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.
- zitieren
Di. 09.04.2013 19:22 Uhr #8

holz Hall Of Fame

Registriert seit
17.11.2005

Beiträge
4.606

Beitragswertungen

was er will das jedesmal beim seitenaufbau neu rendern lassen oder wie? ...

das ist ja quark ... finde ich
0 Mitglieder finden den Beitrag gut.
- zitieren

Mi. 10.04.2013 08:13 Uhr #9

CeeJay Hall Of Fame

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:

1 2	`<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.

zitieren

Mi. 10.04.2013 09:33 Uhr #10

holz Hall Of Fame

Registriert seit
17.11.2005

Beiträge
4.606

Beitragswertungen

da musst du mit z-index arbeiten

damit kannst du eine art ebenen schicht erstellen
0 Mitglieder finden den Beitrag gut.
- zitieren
Mi. 10.04.2013 09:43 Uhr #11

CeeJay Hall Of Fame

Registriert seit
23.03.2007

Beiträge
2.425

Beitragswertungen

Zitat 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.
- zitieren
Mi. 10.04.2013 11:45 Uhr #12

holz Hall Of Fame

Registriert seit
17.11.2005

Beiträge
4.606

Beitragswertungen

Zitat geschrieben von CeeJay

Zitat 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.
- zitieren
Mi. 10.04.2013 13:56 Uhr #13

CeeJay Hall Of Fame

Registriert seit
23.03.2007

Beiträge
2.425

Beitragswertungen

hat noch jemand eine Idee?

Nichts ist so sicher, wie die Änderung.
0 Mitglieder finden den Beitrag gut.
- zitieren

Mi. 10.04.2013 16:18 Uhr #14

marco1978 Mitglied

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.

zitieren

Mi. 10.04.2013 16:40 Uhr #15

CeeJay Hall Of Fame

Registriert seit
23.03.2007

Beiträge
2.425

Beitragswertungen

haha wie geil - jetzt ist das Bild genau oben links im Design.. 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.
- zitieren

Beitrag zur Merkliste hinzufügen

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