Reputation: 93
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.
Upvotes: 2
Views: 2816
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