Novica Vukobratovic
Novica Vukobratovic

Reputation: 93

Display returned PNG image string in HTML

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.

Upvotes: 2

Views: 2816

Answers (1)

VolkerK
VolkerK

Reputation: 96159

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.

Upvotes: 4

Related Questions