I'm trying to use GifFrameExractor. Full code for it is at the link if needed, but I dont think you will for the purposes of this question.
My code on my site is the following, using an animated gif of Homer Simpson...
$gifFilePath = 'images/homer.gif';
if (GifFrameExtractor::isAnimatedGif($gifFilePath)) { // check this is an animated GIF
$gfe = new GifFrameExtractor();
$gfe->extract($gifFilePath);
// Do something with extracted frames ...
foreach ($gfe->getFrames() as $frame) {
// The frame resource image var
$img = $frame['image'];
echo $img;
// The frame duration
$duration = $frame['duration'];
}
}
But my addition of "echo $img;" just outputs a bunch of resource IDs like "Resource id #8Resource id #10Resource id #12" and so on.
I googled and it says resource ID means you're trying to output a resource but you first need to extract info from the resource.
So how do I extract the actual img info so that I can display each frame from the animated gif?
I basically just want to display each of the frames of the animated gif down the page.
Any ideas?
I am facing an issue here, when I make a call to a proxmox API code that should return to me an image of some server graph(s), in that it just returns a string representing an actual PNG image. So, this is not base64 encoded string, or anything like that, so I am not sure how I should proceed with displaying this graph on my HTML page along with some other graphs ( that are also returned the same way from the API )
This is the data that I get back for an example, when making a call to the API for a particular graph.
Image of the returned array for the API request
Also, here is the actual code pasted.
array(2) { ["image"]=> string(16255) "PNG IHDR ÈíMbKGDÿÿÿ ½§ IDATxípTÕÝÿOäghL Ð4HBZÀÂ0F:åÖE£®ø£3D+R¥© 3 uFëc~£F$%RIÖÝl`áGß?®Í¬ûãÞ³÷=û¹÷¾_¹³ï=ç}ÏÞû¾ç088È8ã]«`0ÀXÁ#0#â]ÑØØôJeeeà`DGeeeeeeYYZ)M°ºZZXBBîüùñ®#.^¼xäȤ¤¤³gÏ< ¢8Àº24ôáæͱ¬ü`ĨQñ®À7p»Ý]]]'O¾å[ÚÛÛ³³³ P`¨¯øâÆØ?ëëç<üp¼«ð úûûçÌ3vìXÆXEEEh¸<*ÇápDúÜ/¾xù¿þëßÏ1zô};wN2EníÔÉ$÷[·:H¿íéé¹ûî»322/^ÜÛÛøÏ>«®XÀµB:hNrzÕÑÑQSS£R`à EEE.«°°°ºº:Zý½ôÒ/é½ë®_9òË#G~¤úY\>vÌÈÛñz½ÐQ>ËÑÏrtà³ø,G>Ç/þë_ÿ4É=ºßﯪªÚ¬*µ´´¬]»vüøñëÖknnV)éóù-ZôÊ+¯tTÄP[S§NAGø,G>ËÑÏrtà³ø#Ün÷¾}ûo»í¶°Ü£`mÚ´iÚ´i+V¬P)Óß߶lÙ²´´4Ï©ËåZ²dÉc=¶råÊÀׯöõ nß>1ÖÞlpö?ÿ#D§¸¸:ð9î:ð>[I>Ãç¸ë\mnjm½2eû´iÓRSS+**òòò D7É} ׮]þoØ÷æåå}ôÑG§¬¬Ìårq83fÌðz½»ví>}zh§ÓY[[Ë_±HkiI.-5®ãv»srr ø,G>ËÑÏrtà³ø¬Î¹sçô½Qs»Î»Un\½zõM7Ýôøã?÷Üs>oÛ¶maßÞÕÕuàÀ'xâ>4iRPêêê[·ê¨'ºXï¾ûîÂc×®]{ÿý÷ï¸ãÀtGá¦M>þøã¼¼¼C=ýôÓÞv×]w_¿~Å¡3®Î?o¼b±s--BtÜn7tTÏrtà³ø,G>ËÑÏ1b ÝÝÝW¯^½råJww÷Ä Äg,M` ÖèN°Î;wìر³gÏ2Æ&N8}úôqãÆ ú°g$XæÒÏrtà³ø,G>ËÑÏ1"99yÖ¬Y.\¸pá¬Y³öîÝT lî+ÆÆF+¹ÇK.uww+)ãS#Ûc Btöïßøwø¤ásÜuü~GG¾5K¿Ih$X°)6J°0Ë\:ðY|£åèÀg9:ð9^ ÁM`j#nj:ðY|£åèÀg9:ð9Fôõõµµµ½ÿþûï¿ÿ~[[[P$X°)º¬æææÔÔTÆØéÓ§=ZVVX ÔFÜÔtà³ø,G>ËÑÏrtàs¼ 7ÀRiðûýLÄm§³³è(#>Ãg;èÀgù\âa½,¡¶¹U¶ËÏR>l#Ë48q¢©©©©©©³³³¨¨(¨ÑKN§³¶¶Ö¸".G>ËÑÏrtà³!>'t±^÷tíú\ÏÕ(#ÍR>3zíæOÌ&¹`aMºÓ<ñ¶E÷«¯¯ïøñãÊÛóóóSRR»D¨9XæÒÏrtà³ø,GGϽ´ÚEMý9FtttL:µ¼¼¼¼¼<77÷ðáÃA`0+H°Ap¡N0r£åèÀg9:ðY,9:èÏ1¬Ü`Ð 0Vr× Fîrtà³ø,G>ËÑA%Gý9F4TÜë`Q>Ãg+éÀgëù¬ÂÌå}6u°cß$è·D/b,séÀg9:ðY|£#p¬Oæ¨Õó!5HùÌèµK?z/666ª!:ÀÂ,`0HìXä.*`¹tà³ø,G>ËÑÁ,9:èÏ1B}tÅ`0/H°Ap¡N0r£åèÀg9:ðY,9:èÏñ ³ÄF ²LrϤñÛ854ÑÙ¿?tàsÜuà3|¶(ïti×gjþPóZ»è\¦A$XÌ ,`} V[[[vvvFFFBBB¤2ä,ÌÁ2|£åèÀg9:%Gý9L>ýôéÓ{öì9qâ²4z(ñI°úç"Á ,`#s°ü~ww÷_|ño}ë[n0aBào£K°fϾ`Á-ÓÓÓs÷Ýwgdd,^¼¸··W_¥`K>ËÑÏrtà³$XrtÐcǨQ£¾ýíoÿð?LKK;zôhÐo£K°î»ï¾'|ò[nyï½÷Ö¯_ìرÐ2UUUiiiO<ñÄæÍÏ9ö7H° 0»_~ùåüüük×® ;6lµk×?~ݺuÍÍÍ*j>oÑ¢E¯¼òJè¯`K>ËÑÏrtà³$XrtÐãEÔÜǤINg}}}ØýýýiiiË-KKKóù|t\.×%K{ì±+W¾~µ¯opûö1/+}Âà6¹´TNNNtàsÜuà3|¶¶·IרÏÒvSúCÊgí¢3ðöÛCYÐ3Éý ¿ûÝïþñþ6//ï£>ÊÈÈðxËÑÏrtà³!>'t±^÷'sÔêÃy?¤|fôÚ%Ì]"nõÐC=õÔS&MzçwNgggghÕ«WßtÓM?þøsÏ=çóù¶mÛZÆáptuu8pà'øà&MTs°h9XÀ Tæ`UTT,Z´hÊ)[·n¾Dèp8ËlÚ´éã?ÎËË;tèÐÓO?I*--í®»îZ¿~ý+.^¼ô[ÌÁ2|£åèÀg9:¢|Æ,uÐãVr`V`J°+++_ÁJî\PqSÓÏrtà³ø,G ôçxâCµi7íÍ}mÌ ,`Ý VcȽԬK.uww+¶v{J6ÃSÄeéÀgøl%i>·}¾¨oiùCÍç;]ÚõQ4?Ô|¦Ö.!:~¿¿££CrDKå7 -âÒãÀC`ÌÁÒ ®=ËÑÏrtà³j>[uæ`ÉÑ¡Ö©é"4ÄBñéqà!0¯ïøñãÊÛóóóSRR ÁâÚ|£åèPóÙª ,9:Ôú35ÝtttL:µ¼¼¼¼¼<77÷ðáÃA`#|#úb;{»P ;Ájnn.((HMMe>}úèÑ£eee`qAmÄMM>ËÑÏrt¨ùlÕ AÑc,µµÅxe ý5EEE'Nhjjjjjêìì,** *âÓQØÙC;·] TE(¬eFø¤#ÓgõxÖy²³Ïv^§]?û;·FÖÁj!¨,H cgíÜvYɽ²²rxù+¬¥e´HÀg9:ðY5:Çs°äè,mo¢C]¢ttôÕW_%$$|õÕWçÎ9rdP$X#ÇÎÚ¹íÑ`;vìË/¿üÎw¾ÓÕÕuåÊiÓ¦M2%°,.¨¸©éÀg9:ðY5Ð Á£+FÜzëYYY¥¥¥A£+¹¶ãØÙC;·] ç`Eú/CÅ µ75ø,G>KÐiâ:ãç!ÁR $X±CåBFp¥,Óà÷ûÛ8OggÑQ|£Ný`TvB+ls«l4_»{©v}vsöõ\Öà´e|·ÇóÔGéú3{Ü°ªÏ<íúìfy>NÇÈ2 ±ÊBKô¡Óé¬5®s®¥%¹´Ô¸ÛíÎÉÉN$à³.¶´½åo3K5Kj^ Ö®^÷tm9íR|~ky©z!õá¼ÄSÐëþdý%PGÈqÇQûi:ýG³?ªIub·Ð(Ñæ`Uç[PkÌúPk»±³vn»#l´»æ`K>Ëѱê\ jsh¨ùLÍjÇ «úcÕþLM'v ÁÀXõlZ»`;{hç¶ N¬Ô)ñ°.íÇßjSëXõLZAÍgjþ Á2µþLM'v Áj(g?<à)ÖXõlZ»`;{hç¶ÄF ²LrϤñÛ8E=ÔÓ¿%ëôF¼Y}øu<]Ï<·mSk×.®~hIytxü1cu|¦Ö$ôgjí¦cpu`5pD«îjíBe.ìì¡Û.Ý V__ßñãÇ·'''çç秤¤ `)`¹tp_K<_/Ý©þSâÑÕ.jsh¨õgjþÒÁ,9:Ôú35ÝtttL:µ¼¼¼¼¼<77÷ðáÃA`5pDQûÚ¼:j} ¹°³¿ïBiRt'XÍÍÍ©©©±Ó§O=z´¬¬,°#|,á^ ¹tp$GGÏʼ:N¬ÐPëÏÔüAe"y£É=[nN8ÑÔÔÔÔÔÔÙÙYTTT ºëµ×^Û¼ysOOÏôéÓ7oÞ[ÕíÀÛoµ¶^qRYY©l3=þyqqñºuëÂþväÈýýýwÜqGÿÈ#Ãaµ··544-ðà^Á`s³®®.{ê°Îë¬SCu^_úÍrêcg9÷WÁ>ûýº¸vQ«yê#jqBª?_t|¦Ödêp¶KÓg«úÃQÂ_þòámà?íxíСC?ùÉO~üãGºüâóùÞxã ǣ̮ËOúS¯×vclܸqÑV,,É¥¥êJ<\ûæÎÙ+¢>999"dÈéümf©jí¢¦#Êç#é´Ú%¤>%Öz=iÝ3Ås·µþLmÒÑ<>sbU¨ùL]¢tbGÔ}ôÑúúú7&&ïüùókjjkjjJ#ï×;w¾øâ+V¬8uêTèo¥ÍÁâ]1ÆÎüÖ5cj:Ôæ¬XUs°ThâÒáùÊSëÏÔöµ¹AVõÏõá|víò´üÑÍðõÁH¢»0hy¯×;nܸ [=raqqq]]]FFFXå-;vìؾ}û;ï¼3fÌÀÒî"´ó(<À:à.BsáÚ¾0#vöÚ]ÔÖØãDÔ]Aè¬ ëʼ !ZffæîÝ»½^ïîݻîßrÏ=÷477®½»q¤µ3~«ê Á£C?SÛ_Ô«úCÍgÎúh®±WÐKëIºQ¿a%w;ýðè`ÆjíBe.ìì!ÍK]sÞ³úpB%Á,séP;ã·ª,9:Ôú3µýE-Y±ª?Ô|R½¬+Ö$b¹Ö¥Kº»»ý~?û}F¶§³³5Ë(_Nõ2 ÆëcF>»YÛgjí2£Ï¢ú3µïÌvÙÙg:<ÇgjýÏ<íùwæÖï÷wttx½^fÐÙîD/:ÎÚÚZã:Êk*8ãå^÷'sÜêv»ÜY*MÓ¥í-o-/P;ëðø,ª?s^2Õ.!õ¨#Äg&îûeÕãæñjýY¦g»üXi:è¾DtM0ô!Ñæ`þÐÁsx Ö.ÌÁ2vöÐs°dêpbdô æ`é×øÕ¡6gŪ:%GZ¦¶¿Déàø,GÔ,:F¨ ô·H°³ëÙðfLhx Ö.$XæÂÎRK¨ép"ê.ÂP`q3$u¨ñ[U jýÚþ¢¬XÕj>SkK$XÙõìøC3&4<Çg3¶K Îõ\ÖàVÙþ¯_ÏÔú³´ýedM^"t:µµµÆuêϽ¨v ©¿&B|fâ¾_B?Ôö;ã8>ó#°]¢?¢þîù;Èõg:ÄîQ9DXE«úÃùQjçñ ³Î¢V37ã¼(jû]flçñGÚªúÔæNhVÐ+¥K^ã¨CmÎ §Îõ\µ&q¿xXBÆÃ,Ã:{35vºòóÿ·©éüáDT»4Ïßjírü¾ügÌÁÊJîeee,dh¥1³ýÈĪþPk¨3Z$Xtê,JÇ% ßXµ>Ôt81rPYÌýÌ3³fÍjoo¯¨¨ü-,.Lz$MǤ &÷»´dZ¦ÐP;ã§æ´KAZÒCíø#ÙgM¨µ+î ÛíÞ·o_rròm·ÝÖÞÞT cf;«Uý¡Ö.j)µ¶±Î¢tÌøY¢0i"¢UëCMÝ ÖÁo½õÖ±cÇF*#.ÁRiPî4~«¨§y=³îÓÚöwmÍØ.û§>ý9¡¶EÜr¶KÚÓìÖGÔþuÜ Ö©íwj>S;þØÙgiþY¦¡¸¸XetÅ`ñ¬wKÑjíõYÔîã ¬H4ÑĪõ¡¦ÃIìi `)`AÎg,ù·ú`:¢ê£Ù9ï£6gÚ#jsV¨ù#?sÂYͤåI}6Nì#ÅÙÎêx°êI¢ Ö.jRk»U÷,u$'»B>«úLM«%XC½,9:V}v5p&ªµÏÔü1]æIv=Lç³IubGt ÖðÀHå]===UUU9sf]]]zzzXõÏEe$XêPk5©µÝªû :fܧÔ>jÉM¬ÁÁAÍÙ \.Waaauuµ¾j!Á£Kjûݪg¢Ôj>SóǪý?VõNìÐ3K=ÊËËÛ³gOff¦Çã)++s¹\|>ߪU«V®\¹råÊ H°Kjí¢æ!µ¶[uñ·KKÞlÆ}Jí³x <Ù4Áâ¡¿¿?--mÙ²eiii>/R1˵dÉÇ{,htuµ¯opûö==Ê ÛàVùQ)£D/e zÝ?z½%¡©lK<Úõq»ÝBÚ¥©Ãß.!:KÛ5|Õ.jþȬO\!ûK`?µ¿4}åÎúÃ-½n¥¤Ê¶uHÏ¢ö»LEõCÎ-©ïµþLÍ·ßjm½òØf!Ä$Áúè£222Ô¬3fx½Þ]»vM>=´©ÿM4Ï2©_eƳ^¨µÔÚnÕý%V:ò`Æ}Jí³x Ù`aþüù555555¥¥¥íܹóÅ_\±bÅ©S§BKjÖÞLÖàV¿eÞh.)Íu§$¯_9XêP!¤?3ëúlÕ9X:Çÿ>Ck¿SóÚ÷ݪ>SÓ:ï"TPÞhy<å.Âââ⺺º°:Ê[vìر}ûöwÞygÌ1H%X2?˪e¨A]Ô<¤Öv«î/;ïw̸O©}Ôú³M¬Áo2üb`ÌÌÌÝ»w{½ÞÝ»w]¾å{îinn]1b £wDMgi{Kè²ÈA?%mjg6þx4Z thjý٪߫úLMÏH°Ô¡Ö.«%XÒ#e¢2ÔVIæA¬?<ÐI_x°ê÷B2ïì¨vZ?4ãgñ#-y²i% ! Vçë[üT~8¡vDJgo&<Ù¢>Gjg6þh¶É:¤ú3ãðYÔKN¨ÍåÕ.jý :ÔÚE?Á"7ÀºtéRww·ßïgÿ±O÷¶u}vs6ûÏ×&ÒVø©®¦`°>HB+lsGÚ×Êx}dêÎÎVNIù#Ógjþ±>>ßø¢²%Ø.Míâ35êêÏëCMGsë÷û;::¼^/D/:ÎÚÚZ" ]li{Ë[ËK×Çívçää)ñ°3ÿvI×ÐṬPЫÃ8.©ôº?£¦ÃÕkiI|Ç(¿yt8/9 ñG¦Ïpú£ O?äìÏr|æDÏ÷»´ï2}éÀv 9þðèp"Ígj:Äî!Ñ9XÔ®sÚZYËü¾ó,ÍsãAZÅ´~8o4×ß÷3ÿv³LõfM°¨ÝíbF¨%X¢îÈU3&Ô|§*©ï»U÷»UQwCñoµKòg!Á ÏYj¼>ÔÎ ©%4Ïøyæ¬h¤PýPÝþDëÏB¾_¦Û_êÏ<ßwþDVÎ\.NHù,PGHâSè&X¿ý¹ö,sùQCf* yÝ)RëY5ÉàÁÎm7cêƵïLd¦ì21ãz¿_6ZKY¦A¹gÒøò Ç4Ëðl÷ïßo=½¬íÔ~õ[²¯ç²ÿõñç¶Û;]í7Z£W([Çamxê#ji¶³>fìÏBö»äv ñYà÷ÔqCÙ_êËÍ?½#E§ÄÃVïh²l48?vÒÚ_Çgõ}Ñ:ôõ÷ÔøßeR¿ì¸L´Ü¨Í¯"¸ê73ÛY/Ôö0ç*Y«¦Ø(ÁR°ê³ª#jåkåìÇ8ÊÙüÏz5ibÕþLmm«ú,Dg¯7 CIDATx1RãOnXÚ®ñë¹\ÑIùCPG³?ïÍÔØÊ?± °6?#,{bçÔ$X:Á¨R>óaôÌÏü:i",ép&Öë·¯3¡?uÐã,#¬# ,`ä.G>ËÑ1Ï&Ûa:MªåèÀçxAn¥,Óà÷ûÛSy"γU|ÏvÐÏðÙJ:ðYekÇeNgmmq«®`KM>ËÑÏrtà³ø,G>«»KDXX9X:Áµg9:ðY|£åèÀg9:ð9^ ÁMA¥ÜåèÀg9:ðY|£åèÀçx6 N0r£åèÀg9:ðY|£ã¹ÖÁ2£|ÏVÒÏðÙJ:ðYeu°ôõ?äèÀg9:ðY|£åèÀgu°`0K'¸ö,G>ËÑÏrtà³ø,G>Ç謪ªªÎ9³®®.==]_M` Ö( Ö[?¼à©§&L"P9ºkà EEE.«°°°ººZwM`K>ËÑÏrtà³ø,G>óеgÏËKì«©¹â÷Ò.ÁÊËËÛ³gOff¦Çã)++s¹\úÊh"/Á*)aÚÅæÍc{÷ƾ6ô?öÄÎûÝÎm7#Ø_ÀJµµ #ùï)S<ùd®ÛFDUº¿¿?--mÙ²eþó}>î2aq¹\¯¾úêu¿ÿÊç·÷öþ2+ëóç/gd{í/_Ö(¢©sv``¢ú8qâÙ³&ÓáðçÇh[$êpõgûݪßk¹¹Ú>=zY«íÔÚEMGX1C»>6Þ_RÄtF$'ûo»-馮z½a·W¾ø"aÄvåÊ·¢ñÝ+%%Åçó½ñÆ'55Uw°äççoܸQù·ÓéÜøÂQÕ-,C£çÍ3®ÓÝÝ}óÍ7C'ðY|£åèÀg9:ð#Fuÿý³W¯1jÍèæ`Í?¿¦¦fpp°¦¦¦4BÆSF1cÆè{c¢£oª¾}tà³ø,G>ËÑÏrtà3¹óçß·sçÜÿ\ÔèE;Ëãñ(w×ÕÕedd0ÆG HØ2ÑR]]=fáj__Ò7×êÀg9Àg9Àg9Àg9ÀçxAt¡QËïZèèB££«»ï¾;##cñ⎽½1GÙÙÙaßX&$ÔÆÆÆâââÔÔÔâââwß}ó]ðY}>uæ°: }>¿öÚkßýîw'MTZZÚÖÖV¢ÏçÙ³g§§§/X°àÀau# ú|Vغu+þÆ¢,MBWÛü<ðÀý÷ßéÃÅ"é#Býy衶lÙòå_nÞ¼yÍ5ïÏêèó9°'GÒèóy÷îݯ¾úêÉ'׬Y³jÕª°: }>¿ùæ;vì8yòä/~ñ{ï½7¬Dϱ èî"¤CKKË={Æ¿nݺ²²²á×^ýuåìÌceee]»v¤¤ä^¾>«£Ïg>wìØ¡ücîܹ}}}/_Ïêèóùå_f]¼xqhhhìرau# ú|öûýUUU7o^½zu$ ³&Xëm¥¥¥®¶õ§?ýé;îYô×hppðäÉÊÉÉyðÁUtB¨?/¾øâ½÷Þ{ã7Þwß}¿ÿýïbA>¾>«£ÏgûúúVZµfÍn¸>«£ÛgÃ1iÒ$§ÓY__V¢ÏçM6M6mÅ*:#f` ¯¶uúôéáÕ¶®\¹²mÛ¶~Xý½©©©O>ùd{{{$0L¨?UUUõõõ>¯®®îà||VGÏ<: Ý>:thþüùóçÏægÂê#tû<88ØÛÛ»eËå>«£Ïç?üáo¾ù¦2KÙÂçaÖVØÕ¶vîÜ9eÊïÿûêï=wî\MMÍ÷¾÷½H:`PúúúcJé\'ô]ðY}>óè#ôù¼cÇG}´¾¾~ãÆau# ú|~衺»»F¥Ïêèóy```xú¦²Ï1è2 ]m«¬¬ìGYºtép± kÏÊh=99yîܹ¿ýío³³³¬ÚeaBýyûí·7lØpòäɬ¬¬_ÿú×-bk¡Águôùxÿ clpp>«#Äg¯×;00UÐçó_ÿúק~Úëõæçç?óÌ3¥¥¥èÏêèóyá×ás0ë,f½D#°`0ÀXÁ#0`,ÁªtÐÆÄnÁÒH«ÐÀÔÄe\!èX1Öy=ÌSW%Ò#Êì áFLÀ¨Âp#cðí¸D ذǶmÛ²²²òòòvíÚ¥¼xêÔ©åËgddÌ=ûÿü§RL ÿ1üö W"iÀòW¸Ý§/\¸Ðívk꫼=*b`={öÓO?ݲe˯~õ+åõë×/[¶ìóÏ?öÙg×®]ËTR¸á(ýWEvÀȸÂétVTTtvv9ÎHéíQÕ;G¤9XauGooïرc¯^½zã7={1uæÌ¥#bbâÀÀÀpáH"¯Õép8æ`Åb\1yòäO?ýÔáp|õÕW·Þzë_~T,Ò¿uý$÷(;v,c,))éêÕ«Ê+;5`+©¤¤¤.«e\&¹WWW0?~ü±cÇä×æ\qûí·ÿñ<þüK/½tûí·+/feeíܹóÂ555êo8°~óßø|¾Â ¹c<òÈB'¹3c³Ì`aøÇÏ?ÿü{ï½ÛÔÔôüóÏ+/>óÌ3ëׯ6mÚÄeCßÑÏÁV«#TXx\ÝhF`0ÀXÁ#0`,Á` ÿ¸°.ü<¾ôIEND®B`" ["filename"]=> string(50) "/var/lib/rrdcached/db/pve2-vm/102_netin_netout.png" }
I've tried saving this string to a file with .png extension and then trying to open it in an image viewer, however, my guess it that it always gets corrupted due to file encoding issues.
Either via
<img src="script.php?id=something" />
where script.php will make the request you've used to get the array and then serve
header('Content-type: image/png')
echo $result['image'];
or by embedding the png data within the image tag like
<img alt="Embedded Image" src="data:image/png;base64,<?php echo base64_encode($result['image']); ?>" />
for the second approach the amount of image data should be feasibly small. And then the image won't be cached separately from the html document. But that might be ok, depending on the use case.
To get it out of the way here is my code
<!-- Start Slider -->
<?php
// Get Data From Meta
$images = rwmb_meta( 'cam_slider_images', 'type=image_advanced' );
// Blank Variable To Append Too
$slider_image_output = "";
// Append Meta Value To Variable
foreach ( $images as $image )
{
$slider_image_output.= '[slide][image src="'.$image['url'].'" alt="'.$image['alt'].'"][/slide]';
}
// Echo The Shortcode With WordPress :)
echo (do_shortcode('[slider animation="fade, slide" slide_time="4000" slide_speed="500" slideshow="true" random="true" control_nav="false" prev_next_nav="true" no_container="true"]'. $slider_image_output . '[/slider]'));
?>
<!-- End Slider -->
I am attempting to display the images in the slider shortcode, now it works great however on the page the images only come out to be 150x150 pixels which is thumbnail size. So if you look at the image src url in firebug etc its -150x150.. so I was wondering how could I make WordPress export fullsize.
I am using the X theme and its shortcodes.
Thanks in advance.
EDIT
Also using the following plugin for my meta box
http://metabox.io/docs/get-meta-value/
I don't 100% get what exactly you are trying to achieve , but using documentation page you sent,
you can try change your line :
$slider_image_output.= '[slide][image src="'.$image['url'].'" alt="'.$image['alt'].'"][/slide]';
to this one:
$slider_image_output.= '[slide][image src="'.$image['full_url'].'" alt="'.$image['alt'].'"][/slide]';
I'm trying to embed an image with it's data inline.however when I don't encode my data as base64 it doesn't work and some random characters are displayed.here are the two variations in php:
....
//$img-->image data read from database
$data = stream_get_contents($img);
$data64 = base64_encode($data);//when I don't use this it doesn't work
$image64 = '<img src="data:image/jpeg;base64,'.$data64.'>';
$image = '<img src="data:image/jpeg,'.$data.'>';
$img64 works but `$img' doesn't.what's the problem?
That's to be expected. JPEG data will naturally contain > and " and other HTML metacharacters. As soon as a " and then > are encounter, your browser will think the <img> tag has been closed, and everything else will be treated as text
e.g, if you don't base64_encode, you'll get something like
<img src="data:image/jpeg,randomgarbagewitha"andthena>andsome more random garbage">
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
the binary contents of the jpg here
^--end of src attribute
^---end of img tag
I have a plugin in a cakephp application located at app/plugins/my_plugin in which I have a webroot folder which contains some images in the app/plugins/my_plugin/webroot/img/ folder. I'm trying to put an image as the background of a span in one of the views of my_plugin. My span is for example:
<span class="my_span"><p>Content...</p></span>
And the css I use to but the image as background is:
.my_span
{
background-image:url('<?php echo $this->Html->image('/my_plugin/img/my_image.png', array('alt' => 'My Image'))?>');
}
When I do this, I get the following error:
Resource interpreted as Image but transferred with MIME type text/html
But the weird thing is, when I just try to put the image within my span tags (without putting it as a background through CSS) like:
<span class="my_span"><p><?php echo $this->Html->image('/my_plugin/img/my_image.png', array('alt' => 'My Image'))?></p></span>
My image displays just fine and I don't have any errors.
Can anybody tell me why I can't put the image as background of my span?
NOTE: I already tried display:block; or everything else for my span
The issue is that this code:
<?php echo $this->Html->image('/my_plugin/img/my_image.png', array('alt' => 'My Image'))?>
produces this
<img src="/my_plugin/img/my_image.png" alt="My Image" />
In your case you want to use this code:
.my_span
{
background-image:url(/my_plugin/img/my_image.png);
}
Reference: here