Photoshop Question posted in
The official user guide can be found here.

Get Image/PNG with an AJAX Request – Photoshop

I have a Image/PNG which looks like this, returned by my python service. 

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¬«

and i want to get this image by an AJAX request i have done something like this 

$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;

        })

But this is not working do i have to encode it to base64 first ? how can i do this ?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I have found this answer, and it works perfectly :

     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();

    Credits : Jan_Miksovsky http://jsfiddle.net/jan_miksovsky/yy7zs/

    EDIT : with 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);
            });

  2. 0

    You need to create data URI and encode your binary data as 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;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search