Bilder automatisch einbetten ohne Quelldatei (via JS ? | jQuery image dropdown)

dreamcatcher · 22.08.2011, 03:45

Guten Abend

Ich benötige ein Bild, welches möglichst auf dem ClientPC erstellt wird.

Der Hexcode liegt in der DB und wird als Array übergeben.

Das ganze soll zum Schluss in einem Dropdown Menü landen:

Plugin:
http://www.marghoobsuleman.com/jquery-image-dropdown
Demo:
http://www.marghoobsuleman.com/mywor...les/index.html

Nun ist es so, dass man als title Attribut bei dem Plugin den Link zum Bild hinterlegen muss, oder als Styleattribut via url() hinterlegt.

Am Anfang dachte ich mir, dass ich die Bilder via imagecreate() auf dem Server dynamisch erstelle, dann merkte ich jedoch dass dafür die GB Library benötigt wird.

Da diese bei vielen PHP Installationen nicht standardmäßig installiert ist, möchte ich lieber auf eine clientseitige Erstellung der Bilder zurückgreifen.

Via google habe ich leider keine native "Cross Browser Support Methode" gefunden.

Es geht via SVG, wobei viele Browser das nicht mitmachen.
Es geht via Canvas, wobei es dann beim IE eine extra Library gibt da dieser es nicht automatisch unterstützt.
Leider sehe ich keine Möglichkeit ein Canvas Bild in das Menü (Plugin siehe oben) einzubinden.
Und dann gibt es noch den MS Pendanten zu Canvas (Habe gerade den Namen vergessen), welcher jedoch nirgends geht außer im IE.

Ich hab komischer Weise keine Möglichkeit gefunden via jQuery o.Ä. solch ein Bild dynamisch zu erstellen.

Wie würdet ihr das mit dem Einbinden in das Menü machen ?
Was ist der beste & sinnvollste Weg ?

Randinfos:
Es geht darum, dass ich eine Liste habe welche durch Farben auf den Seiten dargestellt werden.
Durch die "Preview" der Farbe in der Liste, sieht der User sofort welches Listenelement welche Farbe auf dem Bildschirm darstellt.

ChrisB · 22.08.2011, 03:53

Zitat:

Zitat von dreamcatcher

dann merkte ich jedoch dass dafür die GB Library benötigt wird.

Da diese bei vielen PHP Installationen nicht standardmäßig installiert ist,

Die GD-Lib kann man durchaus als Quasi-Standard betrachten.

Zitat:

möchte ich lieber auf eine clientseitige Erstellung der Bilder zurückgreifen.

Ich kann's nur immer wieder sagen: In meinen Augen ist es ziemlicher Blödsinn, irgendwelche abenteuerlichen Klimmzüge zu machen und Zusatzaufwand zu betreiben (und dann letztendlich immer noch keine cross-browser-taugliche Lösung zu haben), wenn es eine etablierte und verbreitete Möglichkeit gibt, die eventuell mal irgendwo nicht verfügbar sein könnte.

Man schreibt einfach in die System Requirements, dass die GD-Lib benötigt wird, und fertig. Keine Arme, keine Kekse.

dreamcatcher · 22.08.2011, 06:29

Keine Arme, keine Kekse.

PHP-Code:

      public function createimageAction()
    {
        $this->_helper->layout()->disableLayout();
        $this->_helper->viewRenderer->setNoRender(true);
        
        function validHexColor($input = '000000', $default = '000000') {
            // 6 characters, 1-8 & A-F
            return (eregi('^[0-9a-f]{6}$', $input)) ? $input : $default ;
        }
 
        function hex2int($hex) {
                return array( 'r' => hexdec(substr($hex, 0, 2)), // 1st pair of digits
                              'g' => hexdec(substr($hex, 2, 2)), // 2nd pair
                              'b' => hexdec(substr($hex, 4, 2))  // 3rd pair
                            );
        }
        
        $imColor = hex2int(validHexColor($_REQUEST['color']));
        $im = imageCreate(50,50);
        $background = imageColorAllocate($im, $imColor['r'], $imColor['g'], $imColor['b']);
        header('Content-type: image/png');
        imagePNG($im);
        imageDestroy($im);
    }

Ursprungsquelle:
http://static.nyphp.org/talks/gd-Lib...nipulation.pdf

Die ersten zwei Befehle bzgl. ZF habe ich durch testen herausgefunden... alleine das Layout zu disablen scheint nicht zu reichen.

Quellcode ist für alle, die den Thread per SuFu finden.
Dein Post war/ist eine Inspiration für mich

eagle275 · 22.08.2011, 08:49

aus dem wievielten VORCHRISTLICHEN JAHRTAUSEND stammt der Code denn ?

eregi ? da knallt dir PHP ne deprecated Message entgegen - und zwar schon unter 5.2 ....

mquadrat · 22.08.2011, 12:35

Canvas kann der IE ab v9, wenn ich nicht irre.

Musst du ältere Varianten (egal welcher Browser) ohne Canvas-Support verwenden, dann musst du wirklich für jeden Browser die passende Technologie verwenden.

Insofern wäre ich da auch für das Erzeugen auf dem Server. Single-Point-Of-Failure programmiert sich immer angenehmer

nikosch · 22.08.2011, 13:47

Wäre mal sinnvoll zu wissen, was für Bilder Du da erzeugen willst? Canvas? Na ich glaube eher nicht.

zwutz · 22.08.2011, 17:42

es gibt doch auch noch die Möglichkeit, die Daten als base64-string auszuliefern. nur etwas mehr payload.

Code:

background: url(data:image/png;base64,xxxx);

und bei den xxxx kommt dein base64-enkodierter hex-output rein

dreamcatcher · 23.08.2011, 01:13

@nikosch
Du hast mich auf eine gute Idee gebracht.
Anstatt dieses vorgefertigte Plugin kann ich mir auch ein eigenen DIV Box Element setzen, darin links einfach nen Bild setzen via einem erneuten div Element mit einer festen Größe und dort dann die background-color setzen.

Es ist halt ein Workaround, da ich dann via jQuery sagen müsste "Wenn du angeklickt wirst dann füge die und die CSS Klasse hinzu damit du grau hinterlegt wirst etc..

@zwutz
Ich hab jetzt schon verschiedene Varianten ausprobiert, dynmisch kann ich aber dadurch kein (nicht vorhandenes) Bild in einen base64 String umwandeln ?!

Mein Versuch:

PHP-Code:

 
<html>
<body>

    <div style="min-height: 100%; min-width: 100%;">
        <img src="data:image/png;base64,<?php echo base64_encode('#000000'); ?> " />
    </div>
</body>
</html>

Habe ebenfalls 000000 versucht sowie #000 und 000.
Habe mir das Tutorial auf Wikipedia angeschaut und den base64 String dort dekodiert, der hat ganz oben einen "PNG Identifier".
Mit 'PNG #000000' gehts aber ebenfalls nicht.

Bist du dir sicher, dass es so einfach klappt ?

Allg. geht es nur um ein Auswahlmenü, bei welchem ich links eine Farbvorschau für den Optionspunkt benötige.
Die Farbe liegt als Hexcode vor.

eagle275 · 23.08.2011, 08:35

hm, wenn es dabei um eine einfarbige kleine Fläche geht, warum legst du dann nicht für ein kleines Div die Hintergrundfarbe auf deinen Hexcode - per Style-Attribut, welches du per PHP mit dem div ausgibst ?

ChrisB · 23.08.2011, 09:27

Zitat:

Zitat von dreamcatcher

PHP-Code:

 
<img src="data:image/png;base64,<?php echo base64_encode('#000000'); ?> " />

Habe ebenfalls 000000 versucht sowie #000 und 000.
Habe mir das Tutorial auf Wikipedia angeschaut und den base64 String dort dekodiert, der hat ganz oben einen "PNG Identifier".
Mit 'PNG #000000' gehts aber ebenfalls nicht.

Du nimmst doch hoffentlich nicht ernsthaft an, dass ein PNG-Bild aus Base64-kodierten hexadezimalen Farbangaben in Klartextschreibweise besteht ...?

Sag bitte bitte bitte, dass du nicht soo naiv/dämlich bist

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
[Erledigt] JQuery Tab aktualisiert sich nicht automatisch	ProCoder2025	JavaScript, Ajax und mehr	2	17.06.2011 14:13
Bilder auslesen aus Ordner und per dropdown anzeigen	Sp1n	PHP Tipps 2010	2	11.06.2010 13:10
jQuery Plug scroll to - wie einbetten?	mxxxx	JavaScript, Ajax und mehr	5	24.04.2010 18:12
Bildschirmauflösung des Besuchers automatisch ermitteln und Bilder auf die Größe . .	Nabonid	Scriptbörse	20	14.04.2010 22:21
Bilder hochladen und automatisch kleines Vorschau-Bild erstellen	Moe LaRoqua	PHP Tipps 2009	7	24.11.2009 22:20
variable mit onclick an php	drombusch	PHP Tipps 2009	8	30.08.2009 14:45
Bilder in Dropdown werden nicht angezeigt?	SimStar001	HTML, Usability und Barrierefreiheit	3	06.05.2009 09:43
Bilder aus Datenbank / <img>-Tags automatisch generieren	Teela	PHP Tipps 2009	2	14.03.2009 17:40
Bilder Klasse	snatch-ic	Beitragsarchiv	1	13.06.2007 11:45
Bilder automatisch auslesen	Zangelo	PHP Tipps 2006	5	15.01.2006 18:45
Bilder Automatisch anzeigen lassen?	test022	PHP Tipps 2004-2	7	23.12.2004 00:11
Problem mit Wasserzeichen auf Bildern	pixelcut	PHP-Fortgeschrittene	16	14.12.2004 02:36
Bilder automatisch bei der Anzeige verkleinern.		PHP Tipps 2004	3	16.08.2004 07:27
Dropdown Liste automatisch erstellen		PHP Tipps 2004	2	20.06.2004 12:41
Automatisch Logo in upgeloadene Bilder einblenden		PHP-Fortgeschrittene	3	16.06.2004 10:33

22.08.2011, 03:45
dreamcatcher Erfahrener Benutzer Registriert seit: 28.12.2010 Beiträge: 599 PHP-Kenntnisse: Anfänger	Bilder automatisch einbetten ohne Quelldatei (via JS ? \| jQuery image dropdown) Guten Abend Ich benötige ein Bild, welches möglichst auf dem ClientPC erstellt wird. Der Hexcode liegt in der DB und wird als Array übergeben. Das ganze soll zum Schluss in einem Dropdown Menü landen: Plugin: http://www.marghoobsuleman.com/jquery-image-dropdown Demo: http://www.marghoobsuleman.com/mywor...les/index.html Nun ist es so, dass man als title Attribut bei dem Plugin den Link zum Bild hinterlegen muss, oder als Styleattribut via url() hinterlegt. Am Anfang dachte ich mir, dass ich die Bilder via imagecreate() auf dem Server dynamisch erstelle, dann merkte ich jedoch dass dafür die GB Library benötigt wird. Da diese bei vielen PHP Installationen nicht standardmäßig installiert ist, möchte ich lieber auf eine clientseitige Erstellung der Bilder zurückgreifen. Via google habe ich leider keine native "Cross Browser Support Methode" gefunden. Es geht via SVG, wobei viele Browser das nicht mitmachen. Es geht via Canvas, wobei es dann beim IE eine extra Library gibt da dieser es nicht automatisch unterstützt. Leider sehe ich keine Möglichkeit ein Canvas Bild in das Menü (Plugin siehe oben) einzubinden. Und dann gibt es noch den MS Pendanten zu Canvas (Habe gerade den Namen vergessen), welcher jedoch nirgends geht außer im IE. Ich hab komischer Weise keine Möglichkeit gefunden via jQuery o.Ä. solch ein Bild dynamisch zu erstellen. Wie würdet ihr das mit dem Einbinden in das Menü machen ? Was ist der beste & sinnvollste Weg ? Randinfos: Es geht darum, dass ich eine Liste habe welche durch Farben auf den Seiten dargestellt werden. Durch die "Preview" der Farbe in der Liste, sieht der User sofort welches Listenelement welche Farbe auf dem Bildschirm darstellt.


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

22.08.2011, 06:29
dreamcatcher Erfahrener Benutzer Registriert seit: 28.12.2010 Beiträge: 599 PHP-Kenntnisse: Anfänger	Keine Arme, keine Kekse. PHP-Code: public function createimageAction() { $this->_helper->layout()->disableLayout(); $this->_helper->viewRenderer->setNoRender(true); function validHexColor($input = '000000', $default = '000000') { // 6 characters, 1-8 & A-F return (eregi('^[0-9a-f]{6}$', $input)) ? $input : $default ; } function hex2int($hex) { return array( 'r' => hexdec(substr($hex, 0, 2)), // 1st pair of digits 'g' => hexdec(substr($hex, 2, 2)), // 2nd pair 'b' => hexdec(substr($hex, 4, 2)) // 3rd pair ); } $imColor = hex2int(validHexColor($_REQUEST['color'])); $im = imageCreate(50,50); $background = imageColorAllocate($im, $imColor['r'], $imColor['g'], $imColor['b']); header('Content-type: image/png'); imagePNG($im); imageDestroy($im); } Ursprungsquelle: http://static.nyphp.org/talks/gd-Lib...nipulation.pdf Die ersten zwei Befehle bzgl. ZF habe ich durch testen herausgefunden... alleine das Layout zu disablen scheint nicht zu reichen. Quellcode ist für alle, die den Thread per SuFu finden. Dein Post war/ist eine Inspiration für mich

22.08.2011, 08:49
eagle275 Erfahrener Benutzer Registriert seit: 01.09.2010 Beiträge: 4.561 PHP-Kenntnisse: Fortgeschritten	aus dem wievielten VORCHRISTLICHEN JAHRTAUSEND stammt der Code denn ? eregi ? da knallt dir PHP ne deprecated Message entgegen - und zwar schon unter 5.2 .... __________________ "Irren ist männlich", sprach der Igel und stieg von der Drahtbürste

22.08.2011, 12:35
mquadrat Erfahrener Benutzer Registriert seit: 02.09.2009 Beiträge: 1.019 PHP-Kenntnisse: Fortgeschritten	Canvas kann der IE ab v9, wenn ich nicht irre. Musst du ältere Varianten (egal welcher Browser) ohne Canvas-Support verwenden, dann musst du wirklich für jeden Browser die passende Technologie verwenden. Insofern wäre ich da auch für das Erzeugen auf dem Server. Single-Point-Of-Failure programmiert sich immer angenehmer __________________ Wir suchen PHP Entwickler (Vollzeit) im Raum Darmstadt / Rhein-Main. Infos via E-Mail mueller@new-frontiers.de

22.08.2011, 13:47
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Wäre mal sinnvoll zu wissen, was für Bilder Du da erzeugen willst? Canvas? Na ich glaube eher nicht. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

22.08.2011, 17:42
zwutz Erfahrener Benutzer Registriert seit: 04.08.2010 Beiträge: 287 PHP-Kenntnisse: Fortgeschritten	es gibt doch auch noch die Möglichkeit, die Daten als base64-string auszuliefern. nur etwas mehr payload. Code: background: url(data:image/png;base64,xxxx); und bei den xxxx kommt dein base64-enkodierter hex-output rein

23.08.2011, 01:13
dreamcatcher Erfahrener Benutzer Registriert seit: 28.12.2010 Beiträge: 599 PHP-Kenntnisse: Anfänger	@nikosch Du hast mich auf eine gute Idee gebracht. Anstatt dieses vorgefertigte Plugin kann ich mir auch ein eigenen DIV Box Element setzen, darin links einfach nen Bild setzen via einem erneuten div Element mit einer festen Größe und dort dann die background-color setzen. Es ist halt ein Workaround, da ich dann via jQuery sagen müsste "Wenn du angeklickt wirst dann füge die und die CSS Klasse hinzu damit du grau hinterlegt wirst etc.. @zwutz Ich hab jetzt schon verschiedene Varianten ausprobiert, dynmisch kann ich aber dadurch kein (nicht vorhandenes) Bild in einen base64 String umwandeln ?! Mein Versuch: PHP-Code: `<html> <body> <div style="min-height: 100%; min-width: 100%;"> <img src="data:image/png;base64,<?php echo base64_encode('#000000'); ?> " /> </div> </body> </html>` Habe ebenfalls 000000 versucht sowie #000 und 000. Habe mir das Tutorial auf Wikipedia angeschaut und den base64 String dort dekodiert, der hat ganz oben einen "PNG Identifier". Mit 'PNG #000000' gehts aber ebenfalls nicht. Bist du dir sicher, dass es so einfach klappt ? Allg. geht es nur um ein Auswahlmenü, bei welchem ich links eine Farbvorschau für den Optionspunkt benötige. Die Farbe liegt als Hexcode vor. Geändert von dreamcatcher (23.08.2011 um 01:18 Uhr).

23.08.2011, 08:35
eagle275 Erfahrener Benutzer Registriert seit: 01.09.2010 Beiträge: 4.561 PHP-Kenntnisse: Fortgeschritten	hm, wenn es dabei um eine einfarbige kleine Fläche geht, warum legst du dann nicht für ein kleines Div die Hintergrundfarbe auf deinen Hexcode - per Style-Attribut, welches du per PHP mit dem div ausgibst ? __________________ "Irren ist männlich", sprach der Igel und stieg von der Drahtbürste