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：

{{1}}

Answer 2

我找到了这个答案，而且效果很好：

 var xhr = new XMLHttpRequest();
        xhr.open( "GET", site_url + "mwf/" + $scope.viewmodel.dataSet + "/" + $scope.viewmodel.varName + "/" + $scope.viewmodel.region + "/" + date + "/map/, true );

        // Ask for the result as an ArrayBuffer.
        xhr.responseType = "arraybuffer";

        xhr.onload = function( e ) {
          // Obtain a blob: URL for the image data.
          var arrayBufferView = new Uint8Array( this.response );
          var blob = new Blob( [ arrayBufferView ], { type: "image/png" } );
          var urlCreator = window.URL || window.webkitURL;
          var imageUrl = urlCreator.createObjectURL( blob );
          map.src = imageUrl;
          map.flag=false;
        };

        xhr.send();

致谢：Jan_Miksovsky http://jsfiddle.net/jan_miksovsky/yy7zs/

编辑：使用AngularJS $ http：

 $http.get(site_url + "mwf/" + $scope.viewmodel.dataSet + "/" + $scope.viewmodel.varName + "/" + $scope.viewmodel.region + "/" + date + "/map/" + $scope.viewmodel.cmap, {responseType: "arraybuffer"}).
            success(function(data) {

              var arrayBufferView = new Uint8Array( data );
              var blob = new Blob( [ arrayBufferView ], { type: "image/png" } );
              var urlCreator = window.URL || window.webkitURL;
              var imageUrl = urlCreator.createObjectURL( blob );
              map.src = imageUrl;
              map.flag=false;
            }).
            error(function(data, status) {
              console.log( $scope.info = "Request failed with status: " + status);
            });

使用AJAX请求获取图像/ PNG

2 个答案: