Display returned PNG image string in HTML - php

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ðöÛC­­YÐ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} ¹°³¿ïB­iRt'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ÇeNgmm­q«®`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ûúúV­Zµ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.

Related

PHP check if file_exists without extension then Ajax a div with appropriate media tag (img or video) based on filepath

First posting here. I know inline php is not preferred but I haven't converted all my scripts to echo json_encoded arrays to work in javascript on the client side...so for now, I have inline php.
I do not know the extension of the user uploaded media because it could be a jpg,mp4,etc and upon upload it goes into a media folder with the user id as an identifier.
When my user first loads the div (and html page), the php script cycles through an array and does a fetch_assoc from sql query to the database each time; It returns the (media_id #) and prints out an li with the respective media displayed next to some other values from the query.
I only know the (media_id) and the file path name without the extension. When the page first loads, everything works great and the file_exists function returns correctly.
THE PROBLEM
When I AJAX the div and do the query again, because the user added a row to the database, the new list prints out with all info, BUT the file_exists function doesn't recognize the exact same paths as before and I don't have an img or video on the page.
I copy/pasted the exact same code from the original div and put it in a file for ajax to re-query and print the new li's.
All variables are the same and when I hard code a test filepath, it prints fine. Maybe there's a caching issue?
THE CODE
<?php
$result=$conn->query($select);
$row=$result->fetch_assoc();
?>
<li>
<?php
if ($row['count']>0) {
echo "<div class='media-container'>";
$pathname = "uploads/".$row["id"]."media1";
$testjpg=$pathname.".jpg";
$testjpeg=$pathname.".jpeg";
$testpng=$pathname.".png";
$testmp4=$pathname.".mp4";
if (file_exists($testjpg)==TRUE || file_exists($testpng)==TRUE || file_exists($testjpeg)==TRUE) {
echo '<img src="'.$pathname.'">';
}if(file_exists($testmp4)==TRUE) {
echo "<video></video>";
}
echo "</div>";
}?>
</li>
I could use some advice on how to fix this and how to print appropriate media tags on unknown media types.
THE OUTPUT
<div class='media-container'>
</div>
DEBUGGING ATTEMPTS
echoing the exact file path of a known image in an <img> tag works fine. putting echo'test'; inside the file_exists case does nothing.
--
Solution (Kind of)
So I've used html's onerror before and I found a workaround, though I'd still like to know why I was getting an error. PSA this uses JQuery but javascript works too:
My Solution
<script>
function img2video(el, src) {
$( el ).replaceWith( '<video class="videoClass"><source src="'+src+'" type="video/mp4"></video>' );
}
</script>
<body>
<img style="width:100%" onerror="img2video(this,'<?php echo$pathname;?>')" src="<?php echo$pathname;?>">
</body>
Alright, so here's the final answer I made to best fit the problem using glob:
Javascript:
function img2video(el,src,place) {
if (place=='type') {
$( el ).replaceWith( '<video controls controlsList="nodownload" disablePictureInPicture style="width:100%;object-fit:contain;" preload="auto"><source src="'+src+'" type="video/mp4"></video>');
}
}
PHP:
<?php for ( $i=1; $i <= $limit; $i++) {
$path ="[DIRECTORY]/".$row["id"]."media".$i;
$path = (!empty(glob($path . '*.{jpg,png,jpeg,avi,mp4}', GLOB_BRACE)[0])) ? glob($path . '*.{jpg,png,jpeg,avi,mp4}', GLOB_BRACE)[0] : false;?>
<div>
<img onerror="img2video(this,'<?php echo$path;?>','type',<?php echo$row["id"];?>,<?php echo$i;?>)" src="<?php echo$path;?>">
</div>
<?php } ?>
I don't know how to mark as duplicate, if someone could help with that. My answer uses Glob_Brace from #Akif Hussain 's response on This Question.

PHP/HTML - Show PNG image data

I get the following from the Edmunds logo API:
PNG
IHDR¸X°'·gAMA±üa cHRMz&úèu0ê`:pºQ<mPLTEæææäää»»»~~mnm`a`XZXWYWOQOUWU^`^ikiz|z²³²ßàß¼½¼dedZ\Zªªª¬­¬PRPhjhµ¶µ¿¿¿ÂÂÂÊÊÊÄÄÄÀÁÀ·¸·«¬«pqpåååÃÄÃÛÛÛÏÏÏÎÎξ¿¾QSQjkjÅÅÅÑÑÑ¥¦¥­­­|}|ÜÜÜSUSÚÚÚÙÙÙ]_]ÞÞÞÑÒÑÆÆÆ~~RTRÈÈȤ¥¤tvtÓÓÓegefhfãã㧧§¸¸¸×××ßßß°°°abaÀÀÀÐÐÐÝÝÝááỼ»¨©¨cdcÔÔÔ}} âââUVUlmllnl ¡ ghgacamomVXVº»ºËË˺ºº¾¾¾½½½ÖÖÖÅÆŹº¹ÄÅÄÁÂÁÇÈÇwxw´µ´¡¢¡­®­°±°···ÍÍÍÏÐÏcec   ÂÃÂqsqnonvxvËÌËtutstsdfdyzyØØا¨§gig_a_¦§¦`b`¯°¯©ª©kmkoqoTVTY[YwywÕÕÕxyxÊËÊVWVz{z±²±³´³jljuvubdb®¯®´´´[][]^]klk{}{àààÒÒÒqrq£¤£}~}{|{±±±ÁÁÁfgf¢£¢¶·¶ª«ªsusrsrÎÏθ¹¸®®®\^\ÉÉÉÒÓÒprpxzxnpnØÙØUdò bKGDÎôÙòÿ pHYsÒÝ~ütIMEà8ít»L
IDATxÚíû{ÕÇgIWËecÁ4×M Is7#vMÝÍ^r³BP Ð#¤\ZÕbÔT±°RÅZËEjµØVÛÿ©ï¹ÎL²ÝÕäIìó~~ÈyÏe&ïwÞsÞsFÓAAAAAAAAAAAAA2ÀñÐÃóM².Z¼d飳ýTH*~°$aùÙ~.djV: Éyì+V­~<øQ^~AaQ1d8«$¯tz­,oÍl{gT¬l®\LHUf#ýêi}´ZR^7®ÓÔ?A*Ö[MOº6lÜD=
å%ä©i}¶&±fÛAsì&w-xȹØ!LOó¥æ³9¡¾Âù8þ²èÁæP8
rK*ùÛë÷ù% y|h'/"ºyLÕ¸&Ü8ÀíÁ(½¥h+;§zhGiK«ÖFH»ÖÁÓ-¢"äl­ ¤¥gµÎÒÎ4½ð=.&Þò-
qÙ9ßÇ
>ÕÑ£a¿eÌù¢Ëo¹±GÚAí\¨ûMÁ6pK÷vãÒz¸pÒG;è[Ü¢=GvúÊ Y¨[ú=÷P®5£kwívL.úüõ¼´¦mÏÞ©Dß×Wo6ÔíÏ/YoN?ÿÓ¢?Sábnva%è¿Ý.f®1CráxäÂq&G[y\0zXOõÐT«FB^Ô\Û¹pû8íïY×_Ù©½ä$å´¢ÒèÔÚ}Z²¦l­GîËéB¸þã;¨mx}xOgzìyNôÚ|ªçDòË9GúêO7Ò&göËÛÎBJKÊ7õKájhåÝTÿÒ·®+ÔÅH_y¦[8î3S,AQã¾åÓË#*/X¨R¯³1)në
bÍIEóbßå\®êFçüÁ,Vh<§ú¼|DÖÖþ[ʤåǸpó#1'7½P1Ф4»HçRVÓyAÝb7Ò+áâLÒãðä
¬"æUFÔµ]µ"ÈÔ â"àm-ÎÑf&áÄ8>#äÒ
8mËÒ£ÛHJ~é~ÅØKØÎıÂôåUjÙ»º|¸ú5Ír%Oa'q¾øáÎî×iÍ(S|ð
z+Þ¨ªÞ\IíoÍpl)ó±¿ôýgDEütqÊ OµäÂ1}ÉÓ4·PÞ*¬of7K/à¨÷ÆRçÜm´w$dY.-Õüþ ÉÛ4«©{¶Â
©æ2¥VDv¼ë×ýJÇ â
üv´AÁq(K,¼¿%¤gÙ3"ÿ
ZüæãQèfþöÈ,Äg¼¤ÂiS Çb6ªìB¸ ¿Ð<½RëFÈ£ýdÔÓq÷`ê¿sqÛ®­-Nö¬­O#3;áøëÈ!¤~ág\lºwgóFç ˽׮§ßf**étføMç«Gf º¸éb£Zy&á<J¸8«
Xó[æJÚ6Á?.<A8íÓÞOG¸Ã[oò{YÞ":è,öÁ£Â⺡»Ê-[ yD½"°®ñCnÙ#Èû0½WÞã(ot ¡ö´ÞÄo#$bñDP".ÃÔßPÐl%"´5I%\Ôæ1eÙbZ,²¨ä$ìQµaËd:±lðæÐÇÉÛþÇîqú§:Àzvrà¨é×þdÎ*á>åO!Mᥬ*©pËæÈ,Mû3<J¼Ñ-=T¯háí#ráé"G¥ðÐÝ<×,Lù5[á´äÂIåâj;6ê2AÂÓ~óÒFnÃU3^ÕÁ9¡Ñ
½;ªú®NO/QÂyí»!,pwø)áÛÕü,'û³N즺¦¸®(-k# á|áBºAÄ%x¬ó¹V§p,øDøìây³"Y÷a;Rø%«µ01öì8G
æñ¾³pí°­P:ÊÅÜWD3S²t©2îÒæ<À 5ýº©ÏAÁ¸L0&­qL|¿3½5ÎclDÄ(év
\ñáñú7F¸jå{Kaö¼Gkþ
×S q¸fÒEã%}'p%0øðóp» ØÕ!J 1s:Û!Uá(ðÇÄÕ ¶úxxL°Í#¬2nôµÉ*»,¯Ü誴¤Áa*ÓaÈþÁou§æ¸ÿøªë«û;5Õ+&Ñ~×5¨dy£÷ƳÂ}ÂòúX*á^Ö_pÃpë7Åu7ÚËNà=+Qáô°é¥÷«IÌ'§DvO.N+#SY&âï$Ü~¶].úÚ úÚú3,e1Ø®:liTßè6BÕ}ÐöZãüô+PAR çmv1KRëæÛGcØùwfp,áû¸ÒZ²>ÛÚíªbnº/¦ª¢lõ¾âLÞÇQ¿6Âüì0ͤ¨3.`M5¾¬bßå:Vû.£dÿä\ZéÁ|ìà±7µ®!¤N;
MïVö;á>ÉÖü²5}Ã7ÚËÛèZÍÙéþø0I8Ú¤A¥]¢
B±ÑtÈÌFBbÌê3a>ö7Ur¹3Î52!K¬½úϳ'nî=ì8kíÿn³ùËõ/£áÕÂU.P»ÃFá´UÆÑ鿹ºÝ4£¬u¾0àåDS©KIÓ¥¾vÂY>×ót?\/Jgî4W8nJ±GÅÌê(9Máó<SågW[Å×X#bÏ?Öû%! ü!Ø¡÷°
8p붸ũºÖÈõµx¯VN·nÓ"]2MÎ]rZK&R=vÂ5[EQÂ%<&KºÂmJG¸qksÏ9ñõø³8çÈç÷¢Úæo?\7U
Që«ªÄ ÞΪ`Q¼óÍÀÓg6´ãÞ|¸l}Õ+}Þ[¢týÂznîuiï]þO]Ü6^|¯RvÔnt>úE&b²èòµ}ðf4ñ8ïÉ&ùîñL<øá_ÀÅ2ñ;¹ïqiܽûEÞÜÜܯ(»¡t`×^¶uRS2wÂÙ%õ ps8_:ìÎÜyZ÷Íl?%2ÿÒãålÛ\yô#éÀLFDAAAAAAAAAAAAäÿÿÄ YÜIEND®B`
I want to display this logo on a <img> element. Is there anyway to set this data as the src attribute? I'v tried setting data:image/png;base64 and then the data above but it did not work. It just showed unrecognizable characters.

Embedding image data inline html

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

Display thumbnailPhoto from Active Directory in PHP

I've set up a system to display everyone's name, email address and phone number from Active Directory however I can't get the 'thumbailPhoto' to work.
I have searched around on the internet but haven't been able to find if this is possible or at the very least what format is returned from Active Directory.
I am currently using the adldap class so if it is possible to use this that would be ideal.
Thanks in advance.
Edit:
I can retrieve the data in the thumbnailPhoto attribute and if I dump them straight to the browser I get something like this:
ÿØÿàJFIFððÿá
PExifII*bh~†(2Ži‡¢XCanonCanon EOS 5D Mark
IIIðð2013:05:19 17:35:31š‚à‚è"ˆ'ˆ 0230ð’
’ ’ (’0’8’ ’ ’#‘’11’’11 0100
ÿÿ¢H¢P¢¤¤¤¤ 2013:04:17
11:44:522013:04:17 11:44:52H¹o#B¬ †
è»dnäWµ˜:̦®(¶’
HHÿØÿàJFIFÿÛC $.'
",#(7),01444'9=82<.342ÿÛC
2!!22222222222222222222222222222222222222222222222222ÿÀ–d"ÿÄ
ÿĵ}!1AQa"q2‘¡#B±ÁRÑð$3br‚
%&'()456789:CDEFGHIJSTUVWXYZcdefghijstuvwxyzƒ„…†‡ˆ‰Š’“”•–—˜™š¢£¤¥¦§¨©ª²³´µ¶·¸¹ºÂÃÄÅÆÇÈÉÊÒÓÔÕÖ×ØÙÚáâãäåæçèéêñòóôõö÷øùúÿÄ
ÿĵw!1AQaq"2B‘¡±Á #3RðbrÑ $4á%ñ&'()
That isn't all of it but it is a very long string, I am presuming is some sort of binary string?
This seems to be a JPEG-File, so you should be able to send that data together with the appropriate mime-type to the browser. It should be possible to output that image with something like:
<img src="data:image/jpeg;base64,<?php echo base64_encode($imageString); ?>"/>
But it might also be possible to save files of any image format into that thumbnailPhoto attribute. Therefore, I would put the content into a temporary file that will then be served directly from the server. You will need to pass the file through finfo to get the correct mime-type.
So you might do something like this:
$tempFile = tempnam(sys_get_temp_dir(), 'image');
file_put_contents($tempFile, $imageString);
$finfo = new finfo(FILEINFO_MIME_TYPE);
$mime = explode(';', $finfo->file($tempFile));
echo '<img src="data:' . $mime[0] . ';base64,' . base64_encode($imageString) . '"/>';
Try the code below. It is an adaptation of the answer above.
<?php
$result = ldap_search($ad , $dn , $filter, $attributes);
$aduser = ldap_get_attributes($ad, ldap_first_entry($ad,$result));
?>
<img src="data:image/jpeg;base64,<?php echo base64_encode($aduser['thumbnailPhoto'][0]); ?>" />
when you store the photo data into ldap i.e. "jpegphoto" attribute it should be done by using encode base64.
Reading the attribute is already decoded on fly. Hence I would use something less modified code
$tempFile = tempnam(sys_get_temp_dir(), 'image');
file_put_contents($tempFile, $imageString);
$finfo = new finfo(FILEINFO_MIME_TYPE);
$mime = explode(';', $finfo->file($tempFile));
header("Content-Type: $mime");
echo $imageString;
This is direct php image write example
you can directly use it under tag img i.e.
<img src="example.php" />

PHP: Image retrieval from MySQL Blob directly into <img> tag

I've stored my Images into (Medium) BLOB fields and want to retrieve them embedded within my PHP-generated web pages.
When I test retrieving the stored images using
header('Content-type: ' . $image['mime_type']);
echo $image['file_data'];
everything looks just fine.
However, I have not yet found a way to retrieve the image(s) cleanly into the middle of my documents. For example, using
$image = $row['file_data'];
echo '<img src="data:image/jpeg;base64,'.$image['file_data'].'" alt="photo"><br>';
...or...
$im = imageCreateFromString($image);
I just wind up with a bunch of hexadecimal garbage on screen.
I intitially stored the Images using:
ob_start();
imagejpeg($resizedImage, null, 100);
$content = ob_get_contents();
ob_end_clean();
$sql = sprintf(
"insert into images (filename, mime_type, file_size, file_data, event_id)
values ('%s', '%s', %d, '%s',%d)",
mysql_real_escape_string($fileName),
mysql_real_escape_string($mimeType),
$imageSize,
mysql_real_escape_string($content),
$eventID
);
$result = $cn->query($sql);
Does anyone PLEASE have a working code snippet to successfully display the stored .jpg mid-file in the PHP output?
echo '<img src="data:image/jpeg;base64,'.base64_encode($image['file_data']).'" alt="photo"><br>';
However, remember that old IE versions do not support this kind of inline images! Besides that, the browser cannot cache such an image except together with its containing HTML page.
You should create some sort of "image server". You're already close to that.
For example, create something like image.php that will get a image name and will generate it on the fly.
So, for example, say you want to get somePic.jpg image. You can get it through:
image.php?name=somePic.jpg
<?php
header('Content-type: ' . $image['mime_type']);
echo $image['file_data'];
?>
Your tag:
<img src='image.php?name=somePic.jpg' />
Or more general:
echo "<img src='image.php?name={$image['filename']}' />"
Why not just call your test page image.php, then have it called from the browser on the rendered page:
<img src="image.php?imageid=123" alt="photo" />

Categories