raw image data to base64

3k Views Asked by At

I am using this function to convert raw image to base64 but unable to generate image.

Here is the plunker: https://plnkr.co/edit/pn9xNwgR3p1RDqZhVNne?p=preview

  <body>
    <img src="" id="myimage" />
    <script src="script.js"></script>
    <script src="jpegEncoder.js"></script>

    <script>
      var rawImage = "����JFIF���&#13;&#13;&#13;&#13;&#13;&#13;&#13;&#13;&#13;&#13;&#13;&#13;&#13;&#13;&#13;&#13;&#13;&#13;&#13;&#13;&#13;&#13;&#13;&#9;&#9;��``&quot;����?&#9;!1AQaq2B���&quot;#RT����br��3����������0&#9;!1A2Qaq�&quot;��BRS�����?���Kѐ�V��,���fu0�AկQ�w���y�x��i�|��F?���;҆�X����������(+:s��iud���c�Gf�e7�jI�;N�d�%�f����+�Uh4q;Ĭ!9ȨD��[��5�ކ�;h��gCt�͌��و1J��q�a��S��^�V���R�����U��K6�&lt;��&quot;�U��~&quot;u�|Q&#10;��c�F�IoZЩX���4����\��]Kp�3K'�(#�G�ր^�d���f�FU=#C\@9�Q��g�ݠ�8Ϧ����m���fq$�jMq;���LW����+�&#13;ڵ��G���;}�ђ׊��&lt;���sX���&gt;j���hk���~+�^����3�q4��P؝�oZ������4��P{O-j�]�d�c��pG��&lt;7��Q������zd{n��|�`�mɊ��SN�D����}�Hv��0PY�&lt;\�#�T�k!0�R(�Um�n��e�&gt;�a욶˽�8P����{�)���&quot;����;#~,&lt;+��iA����!�nխ]f�We��q��&#13;�4��}����6�`���T��!wY�� ��4�y�����+�A]U�M�ֻ⼪�d�N��EcQ`a�u�R��Z&quot;�e/���;-�vL�&lt;c���IH&quot;W2Ga���Ӄ⬨�cݻ#q��c�Y䣃F�G�$�0:�z�&quot;&#9;1���S�R�WCh��a���@%#��$�i�y�u��[�6Ή����(c�Sw˻�G��X3����R��n'�m+&gt;����'�/;�%�k�4��Z�/l^�z�/l^�z��Z�}k^��!������O����������Dzx�&quot;��&gt;��û#&gt;�#\~{�L-D�k��T�L��O=�I��\Qy$�1�'&lt;��=�����uR�b�&#13;���({�TAr9����g}׎��y�{Լ�.�у�8���^��6��&quot;9+��k��K�V�6�����p�¦�Y�~%b�F�lX����_���v����_�O����A�+�G��e]Q*���z��G|�Y{��f��Y�CI�qu*p�v�T�Z�%0�J4�l�3�ɖ�yF���&quot;�5�\�@ܧ���&#13;*R�Kx��c��Is�D�Y�-���O$��!�`��4M���VX�@v�g��U�̦��2E�W��s�7=}z#��Ԯ� c���t^��n|R2H΋�� |�����w�k�9��ٵ�o1�U��nC�r@���7���wZ��-�!n����v�p���P�h_dR�����O5�ޟ���&lt;U����&#13;�*&quot;̙����7-rr�{��&lt;��3��#O�S;:/~�&quot;f~Ϋ;IǸ,�V�[Kv�\���՗c���d4`6��ѣ��Õ]&lt;ϚN��&lt;��r/Fug&lt;֧���ӢуZ�&gt;z�Cܟ{'c��ˏO��jB��o �����c5�:�6:H�Ώ�c�S&lt;�}{���,���o�_8תޫ|{Qm~�kU w��Zi����5B��vƮ�Y�5�Hǽ��U6�^�VKd)��FZ��ʗ���ݹ�E�]tV��&#13;&quot;�� y���a�%���h�����=v�&amp;5� �ג3䒮i�Wq�#�$J  �ǖ+��`4&quot;&#13;U_c+�T&#9;D����JY!Mhv�1�N Q���ǘH��e�#�!��/X��GO��iC�8&gt;ȅ:���`$���H��m&#13;!� ��H�Op��)�&amp;Q���P۷��'�;S�������";
      var encoder = new JPEGEncoder(9);
      var jpgFile = encoder.encode(rawImage, 9);
      console.log('jpgFile: ', jpgFile);
      document.getElementById("myimage").src =jpgFile;
    </script>
  </body>

I get this output: data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAFk9Q05DOFlOSE5kXllp…rCw8TFxsfIycrS09TV1tfY2dri4+Tl5ufo6ery8/T19vf4+fr/2gAMAwEAAhEDEQA/AP8A/9k=

The raw image data I received on ajax call to google contacts api

Is there anything to do with encoding?

Update

When I hit the api directly using the url: https://www.google.com/m8/feeds/photos/media/kookootalk%40gmail.com/3e98af288ff825f7?access_token=ya29.CjDJA08-At3FiI0G1yXER2a-bWpScqI9vcopzjSjXe62CnvlrFMMq0noIghnPdxd1Yk

<img src="https://www.google.com/m8/feeds/photos/media/kookootalk%40gmail.com/3e98af288ff825f7?access_token=ya29.CjDJA08-At3FiI0G1yXER2a-bWpScqI9vcopzjSjXe62CnvlrFMMq0noIghnPdxd1Yk" />

I get the image properly and If I inspect the network, I find the raw image data as response:

`ÿØÿàJFIFÿÛ

ÿÀ``"ÿÄÿÄB !1"AQaq¡2BRb±3Sr¢ð£²Áá$csÂÃÒÿÄÿÄ2 !1AQaq¡ÁÑð2R±"#BbáÿÚ?¹p¡iÖ?&Í)§MjüÌÇ%QÅ/ ±7¤øéUø:à"h ATj9FuÅ(hlçhsìl¥ä½(¹´¢}êôO}A÷#±ßª\ôI%%È{~Óè}üªÕÂÍ[Ór­l¦3âaaçAb´) )PÀÓl´«3Af' zÆnÒõÝí³Ëâ$¡"J(µÅÈößy ¥¯Ú?XîJKéÛÓ)÷H}üW+hº×¸úúýAç®ÊF çS4jõ»ÇTp~¢2?ÛnùS¦êcTÈéð 5¸Æ$Ä»R5Ñjß'ï\^}ÓBçE"xÛ9Ñrpi%øW(i1-|Bh4í" Z®+Ùó ±D%lçENÂLó{OY(jÞb#ºf]&¬Ú±§Ä3Sâ:ãDèÏBΠáók¥$d|½èÆ01>MQx7Ìc¡5Qàÿ1¼Ghº³ÀÓNÊ5Ù¬s±$È@¸r£Ú^4Íj1 ¥ª8 b8""¸®¡Hâç0_Ùc$T¼jnÝ95QÈPA-ñêÀöcTÝ'i°ÐÀìWo@]±é^Ý8×v[ KÙ(Q¿y|÷Ä6r9×qÙ¦§^5¸´Ù{Yجr:¼É®xrSQ}'cïÆäL ÐðÇõPZçïW M÷«[ëÂñì©Ê ÄIJõ¹gÙ_äOd¶6z6оÎZ_p+{¼ÄHÐúIA¾5Ð1t¯®XzÒúOaßå¯6¯LÙ¬æâ&ãºn®%K¨´ºHÄ@ Ã#õÏÎ< @jA ó¼ÒrLÈYZÍ iÀPF£"pRÙ¾3°²ÚMðû²æ>&¤}Â} ÙδµcxA PFëåÂÞÔæKnã¾)q I£®ÑB[Ð Óöq¬eØG8äáþÙ?¥³IsdF?êK«yÓÂG%éඳoÎtæ·J/ÇJspïªSnÎ^MU=ùy4Ú=¨èy:ÿ°,ÉmÁ¸Ío5ÚR{»i¹WfÍ^+6bÕvÊ9"[¶]e[çQf0½E[÷ÇtDa¡®nÙiå î$yצ Óh¹Öaé©ã$¾âÍv¾éL6K­âÉ>®OA4îÐ)îA÷Xñ3¾Ð±ºY."Ë+?¶½½û5úÊ¡´ÍDf&ÕfÖfû¢o¶=$ºzJÞUƵ" à-l 3fpä=©­¶{Æðjlëax+fãÆ1àRp¤3$ä;ÎI4pbIäÄ¡]ê?EýîÕDÅôG »Aö}£\ÁÄÒF7P+YÏpã_E¹ÕNÍæ¦Ö«7Eg'"/ûh>4¥­'né´ St :ÇyG0JÒ;p[Ù³ÃýÆÖ:éM(ÙaZº}F¸qÕy7¦¯»V=Ùy2^Ûcy!z)]ý¥uh¼¤µ(Þ»2räo|NÀìxE~¬]ËeYYVYH¨*ÂäFSv§©bS!É2ãUâ}´È×1Fâ@t<åI]%·¯­ dv÷üùEkÆ°õS©¢mÓdÜ'îà9ôoBPõb½U5ö¥¢çc>Ì׿Ä.wÊÀÞü£²1á1¹·Üo4%ó*25qÆ6­hɶ{3>Ä©rÄÕ¼>Sz·¬­'?¤D²YØ2ÉJÜiù˾Ç_Úc@£ 0è^c¬´w¨9³Áıº¥¡Ï%$®7Fó{NØ»óÅ«AÀPpþ^Ä}@¯Ô¬¹o«¾&MÙýw²mÃÔÓ¨ì(ðWSN1-Ô«¹¾_d{ÍOe!Aèã5©êHÿÄu!( KJyÑRúã!}O¥ºÊt)çYhÖ½_iÒf­änæV2Uî5ï U_Z´¨b Tm£ìþÑbbXNäåbpYÔ|;§Ì1x­RV©ÀAÌp ò0(×-Ù¦öw6w8Ü¥ùêJN[­t{1lýµJ¸èÂÁ+àvò>þu]#E¡à§vG¤¥e$MÔVürgpS&¤[fNI-f´ËÔgyUsf¼RíBA\ZG_í¤©[ª¾d®6[ ¶|*Øf®Tµ±Ç4ô3þ°Ìæ ·H×£4YEYi)Â"PðU®|Ï|:Y´æõnn@òo ¨t\Cdîõ´Åju#3ÚwÓq1Ý¡ôSÍ8[êòyýªè1s|òÉ<1-ÞiÕRÀÂËÂZ´AEAÉ/´zjòUØaªÏiÑÖ%E ¢x²xÎ:aBú$%#($MÿÙ`

But the problem is the token inside the url has expiry time eventually link will expire.

I don't understand the difference between the two image data's I received where one works and other doesn't

1

There are 1 best solutions below

3
On

The Contacts API is a secure sync API, not meant to be used in the same manner as an image host. When your OAuth session is active, the intended usage pattern is that the data is downloaded and presumably stored in some fashion. For an image in JavaScript that would likely be a canvas, or an img tag with a src value of a base64 encoding in a data URI.

I'm not sure how you're fetching the first image in your JS snippet but I can clearly see HTML entities within the string so at some point the data was corrupted presumably while being treated as formatted text.