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��� 		��``"����?	!1AQaq2B���"#RT����br��3����������0	!1A2Qaq�"��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�<��"�U��~"u�|Q ��c�F�IoZЩX���4����\��]Kp�3K'�(#�G�ր^�d���f�FU=#C\@9�Q��g�ݠ�8Ϧ����m���fq$�jMq;���LW����+� ڵ��G���;}�ђ��<���sX���>j���hk���~+�^����3�q4��P؝�oZ������4��P{O-j�]�d�c��pG��<7��Q������zd{n��|�`�mɊ��SN�D����}�Hv��0PY�<\�#�T�k!0�R(�Um�n��e�>�a욶˽�8P����{�)���"����;#~,<+��iA����!�nխ]f�We��q�� �4��}����6�`���T��!wY�� ��4�y�����+�A]U�M�ֻ⼪�d�N��EcQ`a�u�R��Z"�e/���;-�vL�<c���IH"W2Ga���Ӄ⬨�cݻ#q��c�Y䣃F�G�$�0:�z�"	1���S�R�WCh��a���@%#��$�i�y�u��[�6Ή����(c�Sw˻�G��X3����R��n'�m+>����'�/;�%�k�4��Z�/l^�z�/l^�z��Z�}k^��!������O����������Dzx�"��>��û#>�#\~{�L-D�k��T�L��O=�I��\Qy$�1�'<��=�����uR�b� ���({�TAr9����g}��y�{Լ�.�у�8���^��6��"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���"�5�\�@ܧ��� *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�ޟ���<U���� �*"̙����7-rr�{��<��3��#O�S;:/~�"f~Ϋ;IǸ,�V�[Kv�\���c���d4`6��ѣ��Õ]<ϚN��<��r/Fug<֧���ӢуZ�>z�Cܟ{'c��ˏO��jB��o �����c5�:�6:H�Ώ�c�S<�}{���,���o�_8תޫ|{Qm~�kU w��Zi����5B��vƮ�Y�5�Hǽ��U6�^�VKd)��FZ��ʗ���ݹ�E�]tV�� "�� y���a�%���h�����=v�&5� �ג3䒮i�Wq�#�$J �ǖ+��`4" U_c+�T	D����JY!Mhv�1�N Q���ǘH��e�#�!��/X��GO��iC�8>ȅ:���`$���H��m !� ��H�Op��)�&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%%È{~Óè}üªÕÂÍ[Órl¦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=Ùy
2^Û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Æ6hɶ{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Ô|;§Ì1xRV©À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
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.