How to display binary data as image - extjs 4

Question

Here is the binary for a valid  JPEG image  http   pastebin ca raw 2314500  I have tried to use Python to save this binary data into an image     How can I convert this data to a viewable  JPEG image with extjs 4   I tried this  but it doesn t work   data image jpeg base64   binary data

User · Answer

In ExtJs  you can use     xtype   image    to render a image   Here is a fiddle showing rendering of binary data with extjs   atob --   converts ascii to binary  btoa --   converts binary to ascii  Ext application       name   Fiddle        launch  function              var srcBase64    data image jpeg base64     btoa atob  iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8H8hYDwAFegHS8 X7mgAAAABJRU5ErkJggg                Ext create  Ext panel Panel                 title   Test               renderTo  Ext getBody                height  400              items                     xtype   image                   width  100                  height  100                  src  srcBase64                                       https   fiddle sencha com  view editor amp fiddle 28h0

User · Answer

The data URI format is       data  lt headers gt   lt encoding gt   lt data gt    So  you need only append your data to the  data image jpeg    string   var your binary data   document body innerText replace       gim    1       parse text data to URI format  window open  data image jpeg    your binary data

User · Answer

Need to convert it in base64   JS have btoa   function for it   For example   var img   document createElement  img    img src    data image jpeg base64     btoa  your-binary-data    document body appendChild img     But i think what your binary data in pastebin is invalid - the jpeg data must be ended on  ffd9    Update   Need to write simple hex to base64 converter   function hexToBase64 str        return btoa String fromCharCode apply null  str replace   r  n g      replace     da-fA-F  2     g   0x 1    replace            split             And use it    img src    data image jpeg base64     hexToBase64  your-binary-data      See working example with your hex data on jsfiddle

User · Answer

In front-end JavaScript HTML  you can load a binary file as an image  you do not have to convert to base64    lt img src  http   engci nabisco com artifactory repo folder my-image  gt    my-image is a binary image file  This will load just fine

[javascript] How to display binary data as image - extjs 4

Examples related to javascript

Examples related to ajax

Examples related to extjs

Examples related to extjs4