javascript - 通过 AJAX 请求获取图像/PNG

Question

我有一个看起来像这样的图像/PNG，由我的 python 服务返回。

PNG


IHDRX,(ã=¤tEXtSoftwareAdobe ImageReadyqÉe< iTXtXML:com.adobe.xmp<?xpacket begin="" id="W5M0MpCehiHzreSzNTczkc9d"?> <x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="Adobe XMP Core 5.0-c060 61.134777, 2010/02/12-17:32:00        "> <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"> <rdf:Description rdf:about="" xmlns:xmp="http://ns.adobe.com/xap/1.0/" xmlns:xmpMM="http://ns.adobe.com/xap/1.0/mm/" xmlns:stRef="http://ns.adobe.com/xap/1.0/sType/ResourceRef#" xmp:CreatorTool="Adobe Photoshop CS5 Windows" xmpMM:InstanceID="xmp.iid:8A9233331E5811E49DC3AD8FB4C1BE20" xmpMM:DocumentID="xmp.did:8A9233341E5811E49DC3AD8FB4C1BE20"> <xmpMM:DerivedFrom stRef:instanceID="xmp.iid:8A9233311E5811E49DC3AD8FB4C1BE20" stRef:documentID="xmp.did:8A9233321E5811E49DC3AD8FB4C1BE20"/> </rdf:Description> </rdf:RDF> </x:xmpmeta> <?xpacket end="r"?>+xÝÇPLTEõÌÌsssÈÈÈÌ'&í±±ÕÕÕÓ²²ÑÑÑÍÍͶµ¶öööøøøüüüVVXâkk°°°ÆÆÆØ88óóóúúú###®­®ÄÄÄ^]ÀÀÀkklªªªÑnmÛGGºººØÛäÜÜÜäääòòòùääßßßÞÞÞ¾¾¾áááéìô®¦¦¦ÙÙÙÙéééØØØäÖ++ïïðëëëDDE~~~êêêxxxÑ&&¡¡¡¹»Âeee¼¼¼ííí¥65²´¼¸¸¸ëÊÌÔæææ444ɪ­´íñúÜWWøTS£¤«üññú55ÒÕÝ¿¤¦ÁÄËÐ..¢î²áäìuuwØ**Ö--ñôý{|Ê77ÝÇǧyyº«±ÍÐÙþþþøklqcdiÜß轿ÆËAA¼²³®°·ûË]]ŽÂÀ´º[\]Ø%%Ï((°¥«ñòõµ·¾ËÅËÝ??ÅÇÏ´³´z00·¹¿ÏÀÀ¨©°ñÞÞxzãÓÓ¬¢§ÇÉÑÕ((õùÿåèðéêí¦§­ÀÁÈ¡¢§Â¹¼·±³±²¹ÚÛàýýýopu»º»øììÐ++¿¼Áñññ­©¬èàà×11KKMàãä½½½Õ&&vw|ÐÑÔÇ  ;;<ñê꿾½þüü°©©ûûûôõ÷æèë¹¹¹ÕØáÀ¿¾Ë..+++º·¸óóöÄÅÈü÷÷QQT×,, §··»``bòðð½¾½¼»Áhhi002Ã00¨¨¨Òùùù»»»ûüüÌÌÌùúúúúùÂÂÁ¹º¹¤£¤ííðëëï¿¿¿´´¸ÅÇÇßàã×''¹ºº½¾¿Ó,,õõõÏÏÖ ËËÐÊÊÊ···ÙÏÏpppõööööõ³³³´´´Ý'(÷÷÷ÆÀÈÅÅŬ«¬­­«ÁÁÁÁÂÄÁÁÀïôññ§§§@@D×ØÜ{{{ÿÿÿ8$tZL¿IDATxÚì@Óçÿ%4   CIC´`0Mø×H2£æÔÙê6ª®ú§snÔÕ³çZë:=m7éõ¥N÷'îÒ»aI.w;zÙ­;ʸÁ¸Ëàr·£ßóyï÷oþàz-èóFoB4/ßÏóy>Ïó,¢¢ú?Ð"úO@EÁ¢¢`Ý1ªGbo©(XïT|Ñ
ÖûC'i``@×lÖ×7R´(X6Tî9úe/17R²(XU@ÆËl·{(Y¬[§*UÃUI¹QÚHÿ(X·U
+,À±EÁº¬#©"`¡À®jjÜ4R°æ[Îã*))¹3\Õä&Q²(X·Á+W¹¹),
Ö¸GÙËU^Rw#ËUnn¦þQ°fÉU#«$ÂUaÙy~EÉ¢`Í+¨0ðÝá*×JÁ¢Xá¡`OâªÇUn®ÝÝHÁ¢º¹añ3ö(®H$,à*×pÇ(X³ãjZ!Y® uÇ9<° ;}hHÁM $1p ,yØ°bÀºÓx
Ö,+2
AXlÑãÊÀè'5KÃÀ  £
ËÀ©<³E5KÃ
²j
¹Ñ`3ë)XTÓåf°
©"`ÉÙZC,BT>}½g
)X³0¬«

我想通过 AJAX 请求获取此图像，我已经做了类似的事情

$http.get(site_url + "mwf/" + $scope.viewmodel.dataSet + "/" + $scope.viewmodel.varName + "/" + $scope.viewmodel.region + "/" + date + "/map/, {'cache': true}).then(function(data){
          console.log(data);
          map.src=data.data;
          map.flag=false;

        })

但这不起作用，我必须先将其编码为 Base64 吗？我该怎么做？

Answer 1

您需要创建数据 URI 并将二进制数据编码为 base64:

var arr = new Uint8Array(data.data);
var raw = String.fromCharCode.apply(null, arr);
var b64=btoa(raw);
map.src='data:image/png;base64,' + b64;